完美解决AJAX跨域问题


Posted in Javascript onNovember 01, 2013

从AJAX诞生那天起,XMLHttprequest对象不能跨域请求的问题就一直存在。这似乎是一个很经典的问题了。是由于javascript的同源策略(这里不作深入探讨)所导致。

解决的办法,大概有如下几种:

1. 使用中间层过渡的方式(可以理解为“代理”):

中间过渡,很明显,就是在AJAX与不同域的服务器进行通讯的中间加一层过渡,这一层过渡可以是PHP、JSP、c++等任何具备网络通讯功能的语言,由中间层向不同域的服务器进行读取数据的操作。拿asp.net做一个例子,如果需要对不同域的某一个asp.net进行通讯,现在客户端的xmlhttprequest先query本域的一个asp.net ,然后由本域的这个asp.net去和不同域的asp.net进行通讯,然后由本域的asp.net响应输出(response);思路大概就是这样的,相信读者已经很清楚的理解了。

2. 使用<script>标签

这个方法是利用<script>标签中的src来query一个aspx获得response,因为<script>标签的src属性不存在跨域的问题。

举个例子来让大家看得更清楚一点吧:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Ajax跨域问题</title>
    <script type="text/javascript" src="" id="getAspx">
    </script>
    <script type="text/javascript">
        function get(url) {
            var obj = document.getElementById("getAspx");
            obj.src = url;
            (obj.readStatus == 200)
            {
                alert(responseVal);//如果成功,会弹出Dylan
            }
        }
        function query() {
            get(getDemo.aspx);
        }
    </script>
</head>
<body>
<input type="button" value="Ajax跨域测试" onclick="query();"/>
</body>
</html>

getDemo.aspx后台代码:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace LearnJS
{
    public partial class getDemo : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Response.Write("var responseVal='Dylan'");
        }
    }
}

这个方法又叫做ajaj或者ajax without xmlHttprequest,把x换成了j,是因为使用了<script>标签而没有用到xml和xmlHttprequest的缘故。这种方法似乎有点“另类”,哈哈。

那现在我们就看看,有了jQuery之后,如何来解决ajax的跨域问题:

<html>
<head>
<title>JQuery学习</title>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    var oBtnTest = $("#btnTest");
    oBtnTest.click(function(){
        oBtnTest.disabled = true;    
        var oResult = $("#result");
        oResult.html("loading").css("color","red");
        jQuery.getScript("https://3water.com/test/js.txt", 
        function(){            
            oResult.html("name:" + Dylan.name + "<br/>email:" + Dylan.email).css("color","black");            
            oBtnTest.disabled = false;            
        });         
    });    
});    
</script>
</head>
<body>
<button id="btnTest">BtnTest</button>
<div id="result"></div>
</body>
</html>

远程服务器端js.txt中的内容为:
var Dylan= {name:"Dylan",email:Dylan@163.com}

笔者感觉这种方式更加简洁。呵呵。当然,读者可以根据实际情况,任意选择实现方式。

怎么样,其实很简单吧,我看到过很多人不愿意去正视ajax所存在的技术瓶颈,其实AJAX更应该是Ajax而不是AJAX,突出第一个A是想强调其实AJAX发扬的是一种异步传输的方法,而不是具体到底使用了哪种技术。

其实,在json数据格式之后,有一种更牛X的“jsonp”,也可以实现ajax的跨域通信。其实jsonp不是一种数据格式,只是对我介绍的第二种方式做了改进。从jQuery1.2 版本开始,jQuery 拥有对 JSONP 回调的本地支持。

Javascript 相关文章推荐
javascript 四则运算精度修正函数代码
May 31 Javascript
清空上传控件input file的值
Jul 03 Javascript
jquery struts 验证唯一标识(公用方法)
Mar 27 Javascript
js调用iframe实现打印页面内容的方法
Mar 04 Javascript
javascript数字时钟示例分享
Apr 23 Javascript
JavaScript中字符串分割函数split用法实例
Apr 07 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
JavaScript包装对象使用详解
Jul 09 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
移动端滑动插件Swipe教程
Oct 16 Javascript
基于bootstrap的选择框插件icheck
Dec 23 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
Dec 12 Javascript
javascript中创建对象的几种方法总结
Nov 01 #Javascript
如何学习Javascript入门指导
Nov 01 #Javascript
js动态设置鼠标事件示例代码
Oct 30 #Javascript
获取非最后一列td值并将title设为该值的方法
Oct 30 #Javascript
eclipse如何忽略js文件报错(附图)
Oct 30 #Javascript
Javascript 多浏览器兼容总结(实战经验)
Oct 30 #Javascript
javascript实现的DES加密示例
Oct 30 #Javascript
You might like
PHP实现删除非站内外部链接实例代码
2014/06/17 PHP
php实现的Cookies操作类实例
2014/09/24 PHP
PHP批量去除BOM头代码分享
2015/06/26 PHP
PHP获取二维数组中某一列的值集合
2015/12/25 PHP
深入理解PHP之源码目录结构与功能说明
2016/06/01 PHP
PHP入门教程之操作符与控制结构流程详解
2016/09/09 PHP
PHP实现文件上传下载实例
2016/10/18 PHP
php事件驱动化设计详解
2016/11/10 PHP
PHP实现二维数组按照指定的字段进行排序算法示例
2019/04/23 PHP
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
js实现收缩菜单效果实例代码
2013/10/30 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
Nodejs异步回调的优雅处理方法
2014/09/25 NodeJs
webapp框架AngularUI的demo改造之路
2014/12/21 Javascript
浅析javascript中函数声明和函数表达式的区别
2015/02/15 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
JS获得多个同name 的input输入框的值的实现方法
2017/01/09 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
2017/09/28 Javascript
微信小程序版翻牌小游戏
2018/01/26 Javascript
VUE 使用中踩过的坑
2018/02/08 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
2019/07/29 Javascript
js实现div色块碰撞
2020/01/16 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
用Python编写分析Python程序性能的工具的教程
2015/04/01 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
使用TFRecord存取多个数据案例
2020/02/17 Python
Python astype(np.float)函数使用方法解析
2020/06/08 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
历史专业个人求职信范文
2013/12/07 职场文书
四风问题专项整治工作情况报告
2014/10/28 职场文书
2015年前台文员工作总结
2015/05/18 职场文书
2015年卫生监督工作总结
2015/05/21 职场文书
2015年度绩效考核工作总结
2015/05/27 职场文书
2016廉洁从业学习心得体会
2016/01/19 职场文书
Python列表删除重复元素与图像相似度判断及删除实例代码
2021/05/07 Python
MYSQL事务的隔离级别与MVCC
2022/05/25 MySQL