Ajax操作如何实现跨域请求？

      　　Ajax (XMLHttpRequest)请求受到同源策略的限制。
      　　Ajax通过XMLHttpRequest能够与远程的服务器进行信息交互，另外XMLHttpRequest是一个纯粹的Javascript对象，这样的交互过程，是在后台进行的，用户不易察觉。
      因此，XMLHTTP实际上已经突破了原有的Javascript的安全限制。
   举个例子：
        　假设某网站引用了其它站点的javascript，这个站点被入侵并在javascript中加入获取用户输入并通过ajax提交给其他站点，这样就可以源源不断收集信息。
           或者某网站因为存在漏洞导致XSS注入了javascript脚本，这个脚本就可以通过ajax获取用户信息并通过ajax提交给其他站点，这样就可以源源不断收集信息。
          如果我们又想利用XMLHTTP的无刷新异步交互能力，又不愿意公然突破Javascript的安全策略，可以选择的方案就是给XMLHTTP加上严格的同源限制。
          这样的安全策略，很类似于Applet的安全策略。IFrame的限制还仅仅是不能访问跨域HTMLDOM中的数据，而XMLHTTP则根本上限制了跨域请求的提交。（实际上下面提到了CORS已经放宽了限制）
          随着Ajax技术和网络服务的发展，对跨域的要求也越来越强烈。下面介绍Ajax的跨域技术。
 
 

（1）JSONP  （JSON with Padding）

       JSONP（JSONP是JSON的一种“使用模式”)，利用script标签的src属性（浏览器允许script标签跨域）。我们知道<script>标签可以加载跨域的javascript脚本，并且被加载的脚本和当前文档属于同一个域。因此在文档中可以调用/访问脚本中的数据和函数。如果javascript脚本中的数据是动态生成的，那么只要在文档中动态创建<script>标签就可以实现和服务端的数据交互。
       JSONP就是利用<script>标签的跨域能力实现跨域数据的访问，请求动态生成的JavaScript脚本同时带一个callback函数名作为参数。其中callback函数本地文档的JavaScript函数，服务器端动态生成的脚本会产生数据，并在代码中以产生的数据为参数调用callback函数。当这段脚本加载到本地文档时，callback函数就被调用。
       这里需要明确的一点是：所谓的域跟js的存放服务器没有关系，比如baidu.com的页面加载了google.com的js，那么此js的所在域是baidu.com而不是google.com。也就是说，此时该js能操作baidu.com的页面对象，而不能操作google.com的页面对象。
       如果还不太明白，这里再详细解释一下：因为通过script标签引入的js是不受同源策略的限制的（正如前文提到的baidu.com的页面加载了google.com的js）。所以我们可以通过script标签引入一个js或者是一个其他后缀形式（如PHP，jsp等）的文件，此文件返回一个js函数的调用，如返回JSONP_getUsers(["paco","john","lili"])，也就是说此文件返回的结果调用了JSONP_getUsers函数，并且把["paco","john","lili"]传进去，这个["paco","john","lili"]是一个用户列表。那么如果此时我们的页面中有一个JSONP_getUsers函数，那么JSONP_getUsers就被调用到，并且传入了用户列表。此时就实现了在本域获取其他域数据的功能，也就是跨域。
 
eg：
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <h1>Index</h1>
 9     <input type="button" onclick="JqAjax();" value="江西tv-list">
10     <div id="container"></div>
11     <script src="/static/jquery-2.1.4.min.js"></script>
12     <script>
13         function JqAjax() {
14             $.ajax({
15                 url:'http://www.jxntv.cn/data/jmd-jxtv2.html',
16                 type:'GET',
17                 dataType:'jsonp',
18                 jsonp: 'callback',
19                 jsonpCallback: 'list',
20                 success: function (param) {
21                     $.each(param.data,function (i) {
22                         var item = param.data[i];
23                         var str = "<p>"+ item.week +"</p>";
24                         var bq = $('#container');
25                         bq.append(str);
26                         $.each(item.list,function(j){
27                             var temp = "<span>"+item.list[j].time+"----</span><a href='" + item.list[j].link +"'>" + item.list[j].name +" </a><br/>";
28                             bq.append(temp);
29                         });
30                         bq.append("<hr/>");
31                     })
32                 }
33             })
34         }
35     </script>
36 </body>
37 </html>
展开

 

 

           为什么script标签引入的文件不受同源策略的限制？因为script标签引入的文件内容是不能够被客户端的js获取到的，不会影响到被引用文件的安全，所以没必要使script标签引入的文件遵循浏览器的同源策略。而通过ajax加载的文件内容是能够被客户端js获取到的，所以ajax必须遵循同源策略，否则被引入文件的内容会泄漏或者存在其他风险。
 
JSONP的缺点是：它只支持GET请求而不支持POST等其它类型的HTTP请求。不过，一般get请求能完成所有功能。
 
           JSONP易于实现，但是也会存在一些安全隐患，如果第三方的脚本随意地执行，那么它就可以篡改页面内容，截获敏感数据。但是在受信任的双方传递数据，JSONP是非常合适的选择。可以看出来JSONP跨域一般用于获取其他域的数据。

一般能够用JSONP实现跨域就用JSONP实现，这也是前端用的最多的跨域方法。

 
 
(2)CORS   (Cross origin resource sharing ，即：跨域资源共享)

　　　　通过在HTTP Header中加入扩展字段，服务器在相应网页头部加入字段表示允许访问的domain和HTTP method，客户端检查自己的域是否在允许列表中，决定是否处理响应。CORS协议提升了Ajax的跨域能力，但也增加了风险。一旦网站被注入脚本或XSS攻击，将非常方便的获取用户信息并悄悄传递出去。
　　　　假设我们页面或者应用已在 http://www.test1.com 上了，而我们打算从 http://www.test2.com 请求提取数据。一般情况下，如果我们直接使用 AJAX 来请求将会失败，浏览器也会返回“源不匹配”的错误。
　　 　  利用 CORS，在 http://www.test2.com 上只需添加一个标头，就可以允许来自 http://www.test1.com 的请求，下图是我在PHP中的 hander() 设置，“*”号表示允许任何域向我们的服务端提交请求：
　　　　　   header('Access-Control-Allow-Origin:*');
也可以设置指定的域名，如域名 http://www.test2.com ，那么就允许来自这个域名的请求：
　　　　　　header('Access-Control-Allow-Origin:http://www.test2.com');