Ajax 跨域难题 - 原生 JS 和 jQuery 的实现对比

• 讲解顺序：
  • AJAX 的概念及由来
  • JS 和 jQuery 中的 ajax
  • 浏览器机制
  • AJAX 跨域

AJAX 的概念

• 在讲解 AJAX 的概念以前，我先提一个问题。

这是一个典型的 B/S 模式。

• PS. B/S结构（Browser/Server，浏览器/服务器模式），是WEB兴起后的一种网络结构模式，WEB浏览器是客户端最主要的应用软件。这种模式统一了客户端，将系统功能实现的核心部分集中到服务器上，简化了系统的开发、维护和使用。客户机上只要安装一个浏览器

• B/S 模式

  • 优势：一个服务器能够响应多个客户端
  • 缺点：短连接（与 C/S 相反）
  • 特色：客户端主动去请求（request），服务器端被迫去响应（response）这一点很重要
  • 好处：大大减小了服务器的资源
  • 结论：服务器永远没办法主动告诉客户端一些信息

在这张图中，左侧是菜单，很早以前的作法是点击刷新按钮会对整个页面进行刷新，这样作的弊端是什么？如何不使用 AJAX 进行局部刷新？

• 弊端
  • I/O 网络吞吐量过大
  • 网页加载慢
  • 耗内存及 CPU
• 局部刷新
  • 很 low，可是只有惟一的方法：iframe
  • 虽然是局部刷新，可是是局部总体刷新

那么有什么办法能进行数据实时推送（例如股票价格）？

因而诞生了这几个方法。

• 轮询机制（依旧很占服务器资源，low）
• 服务器推送（提一下，想了解的下次，不是此次要讲的东西）

那么，iframe 最大的缺点是什么？

• 外面的 window 和 iframe 的 window 不是一个对象，也就是说，不在一个 DOM 树中！这样的话，外面内容和里面内容交互起来特别繁琐。
• AJAX 解决了这个问题。

了解 AJAX 以前先要了解一下先后端的交互过程。

你们慢慢看……

JS 和 jQuery 中的 ajax

• AJAX 全称：即“Asynchronous JavaScript And XML” （表明一种格式，好比：json、HTML、XML、text、jsonp等等）
• AJAX 的核心对象是 XMLHttpRequest 对象
• 查看方法（就是 network 里的 XHR）
• IE7及其余浏览器：XMLHttpRequest
• IE6及如下：ActiveXObject

// 简单的ajax请求
var xhr = new XMLHttpRequest();// 建立
xhr.onreadystatechange = function() {// onreadystatechange 不是检测方法，而是状态改变后更新的状态
    if (xhr.status == 200) {
        /* 普及一下经常使用的状态码 200：ok，服务器成功返回数据 400：Bad Request，语法错误 401：请求须要认证 404：not found，找不到页面 500：服务器遇到意外错误 503：服务器正在维护或者过载没法完成请求 其余百度去 */
        if (xhr.readyState == 4) {
        /* xhr.readyState 是 ajax 状态 普及一下这个4是什么意思： 0：建立服务 1：打开服务 2：发送服务 3：服务器响应 4：加载成功 */
            var data = JSON.parse(xhr.responseText);// responseText 是返回的文本或对象
        }
    } else {
        // 若是不是正常返回
        console.log("数据返回失败！状态码" + xhr.status + "状态信息：" + xhr.statusText)
        // xhr.statusText是浏览器的错误信息，由于跨浏览器的时候，可能不太一致，不建议直接使用它
    }
}
xhr.open("post", "list.json?rand="+new Date(), true);// 打开，最后一个 bool 表明是否异步，这一步仅仅只配置了 ajax 的基本信息，而并无对服务器请求
// rand=new Date()是为了让每一次请求 url 都不一样，用来区分缓存
xhr.setRequestHeader("Content-Type","application/www-x-form-urlencoded");
xhr.send(null);// 向服务器发送请求
复制代码

jQuery 的 ajax 实际上就是封装了上面的代码

$.ajax({
    type:"get",
    dataType: "json",
    url: url,
    async: true,
    success: function(){},
    error: function(){}
})


下面用 chrome 和 Firefox 来演示跨域问题。

复制代码

浏览器机制

• 用 原生 AJAX 进行跨域请求，会发现报错了，仔细分析错误
• 获得结论：AJAX 自己是能够跨域的，可是浏览器的同源策略机制，限制了 XMLHttpRequest 请求，致使没法跨域，因此 AJAX 在浏览器中跨域是一个伪命题，而 AJAX 不是没法跨域的主谋。
• 如下几种状况会被浏览器视为不安全，而直接进行拦截
• 同源规则：同域名、端口、协议（只针对 XMLHttpRequest）
• www.a.com 和 a.com实际是配置的两个域名

编号	url	说明	是否容许通讯
1	http://www.a.com/a.js http://www.a.com/b.js	同一域名下	容许
2	http://www.a.com/a/a.js http://www.a.com/b/b.js	同一域名不一样文件夹	容许
3	http://www.a.com:8080/a.js http://www.a.com:9090/a.js	同一域名不一样端口号	不容许
4	http://www.a.com/a.js https://www.a.com/b.js	同一域名不一样协议	不容许
5	http://www.a.com/a.js http://192.168.4.158/b.js	域名与域名对应的ip地址	不容许
6	http://www.a.com/a.js http://github.a.com/b.js	主域名相同，子域名不一样	不容许
7	http://www.a.com/a.js http://a.com/b.js	同一域名，不一样二级域名（同上）	不容许（cookie这种状况下也不容许访问）
8	http://www.a.com/a.js http://www.b.com/b.js	不一样域名	不容许

AJAX 跨域

1. 代理
   • 向服务器发送对应的 url，服务器在后台作了一个代理，前端只须要访问A的服务器也就至关与访问了B的服务器，好比在A（www.a.com/sever.php）和B（www.b.com/sever.php）各有一个服务器，A的后端（www.a.com/sever.php）直接访问B的服务，而后把获取的响应值返回给前端。这种代理属于后台的技术，因此不展开叙述。
2. JSONP
   • 说白了就是利用同源策略的漏洞，利用建立标签的形式进行加载。

• JS 中的实现

//建立一个script元素

var  Scr = document.reateElement('script');

//声明类型

Scr.type='text/javascript';

//添加src属性，引入跨域访问的url

Scr.src=url;

//在页面中添加新建立的script元素

document.getElementsByTagName('body')[0].appendChild(Scr)
复制代码

• jQuery 中的实现：

$.ajax({
    url: 'http://192.168.1.114/yii/demos/test.js', //不一样的域
    type: 'GET', // jsonp模式只有GET是合法的
    data: {
        'action': 'aaron'
    }, // 预传参的数组
    dataType: 'jsonp', // 数据类型
    jsonp: 'backfunc', // 指定回调函数名，与服务器端接收的一致，并回传回来
})
复制代码

整个流程就是：

客户端发送一个请求，规定一个可执行的函数名（这里就是jQuery作了封装的处理，自动帮你生成回调函数并把数据取出来供success属性方法来调用,不是传递的一个回调句柄），服务端接受了这个backfunc函数名，而后把数据经过实参的形式发送出去

其实就是jquery内部会转化成http://192.168.1.114/yii/demos/test.js?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron 而后动态加载 <script type="text/javascript" src="http://192.168.1.114/yii/demos/test.js?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron"></script>

3. XHR2

   • “XHR2” 全称 “XMLHttpRequest Level2” 是HTML5提供的方法，对跨域访问提供了很好的支持，而且还有一些新的功能。

   • IE10如下的版本都不支持

   • 只须要在服务器端头部加上下面两句代码：

   • header( "Access-Control-Allow-Origin:*" );

   • header( "Access-Control-Allow-Methods:POST,GET" );