Ajax跨域
一、Ajax介绍:
Ajax是jQuery的一个方法，它的全称是AsynchronousJavascript+XML，即异步的JavaScript和Xml。它通过JavaScript的XMLHttpRequest 对象来直接与服务器进行通信，通过这个对象，JavaScript可是在不重载整个页面的情况下完成Web与服务器的交互。即当一个页面只有局部更改时，使用Ajax提交可以不用刷新整个页面，从而减少对服务器的请求，节省网络带宽。客户端也无须等待整个页面加载完成后再进行其它的操作。
1、浏览器同源策略：
同源策略是浏览器出于安全性而制定的策略。同源是指url中的协议、域名和端口号都相同。若其中有一个不同，比如域名A中的页面要调用域名B中的数据时(即跨域请求)，就会被禁止。
2、如何解决跨域请求：
幸运的是，在域名A的页面上引用域名B的js文件是可以的(不仅是js，只要是拥有 “scr” 这个属性的标签都是可以跨域的，比如<img>、<iframe>标签)，这样我们可以将请求的数据放在js文件中，以该js文件为载体传递给调用着就可以了。Jsonp正式利用这个特性来解决跨域请求的。
3、Jsonp介绍：
Jsonp是一种非正式的json传输协议，json是一种最常用的数据交换方式，也是跨域之前数据传递最好的选择。
当域A调用域B中的js文件时，可以在ajax中指定一个callback参数发给服务端。服务端将请求的数据放在json文件中，并使用callback定义的参数作为函数名，包裹住json返回给客户端。这样，客户端可以随意指定callback参数(即函数名)来处理请求得到的数据。
如callback参数为data，则请求返回的数据格式为data({'a':'1','b':'2','c':'3'})。
Jsonp本质是动态添加<script>标签来调用远程服务器提供的js文件。
Ajax本质是通过XmlHttpRequest获取非本页内容。
二、Ajax使用:
使用Ajax跨域请求的实例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="container"></div> <input type="button" value="获取节目" onclick="getdata();"> <script src="jquery-2.2.4.min.js"></script> <script type="text/javascript"> function getdata(){ $.ajax({ url:'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403', //文件内容结构{data:[{k:v},{k:[]}]} data:{}, type:'GET', dataType:'jsonp', jsonp:'callback', jsonpCallback:'list', success:function(msg) { //msg是一个字典{data:[{k:v},{k:[]}]} $.each(msg.data,function(i){ //msg.data是一个列表[{k:v}] var item = msg.data[i]; //i是列表的索引,item是列表里的每个字典 var str = "<p>" + item.week + "</p>"; //item.week获取日期 $('#container').append(str); //container里添加str $.each(item.list, function (j) { //item.list获取到一个列表 var temp = "<a href='" + item.list[j].link + "'>" + item.list[j].name + " </a><br/>"; $('#container').append(temp); }) $('#container').append("<hr/>"); }) } }) } </script> </body> </html>
