一、AJAX的观点
二、POST && GET
三、原生实现AJAX大略示例
3.1 实当代码
3.2 重点解释
四、框架隐蔽域
4.1 基本观点
4.2 后台写入脚本
4.3 JS主动判断Iframe的改变
4.4 表单提交数据实战
五、JQ 的 AJAX
5.1 load()
5.2 $.get()
5.3 $.post()
5.4 $.getScript()
5.5 $.getJson()
5.6 $.ajax()
a. 常用的属性解释
b. 常用的事宜解释
c. 全局事宜解释
d. $.ajaxSetup()
5.7 AJAX的再次封装
5.8 序列化表单
六、JSONP的观点
6.1 JSONP的观点
6.2 自己封装的JSONP
6.3 JQ的JSONP利用。
一、
AJAX的观点
AJAX(Asynchronous JavaScript And XML) 中文翻译即“异步的JavaScript 和 XML”。
AJAX实际上是对现有的多种技能进行整合利用得到的技能。它包括：
1) XMLHttpRequset：浏览器的XMLHttpRequset工具，该工具用于向后台发送要求与吸收相应。
2) JavaScript :用于吸收、处理、显示XMLHttpRequest相应后的内容。
3) XML : (Extensible Mrakup Language) 扩展的标记措辞，它规定了一种统一的，可跨平台与系统的文本标记格式，而在AJAX中则用于前端与后台的数据格式定义，但实际上，现在已经很少会有人利用这种格式进行数据的传输，更多的是采取JSON数据格 式，比较之下前者用于解释数据构造的冗余代码更多，但是是构造清晰。
前面说过AJAX不是一种新的技能，而是对已有的技能进行整合得到的，实在AJAX的核心技能XMLHttpRequest是微软率先在IE5.0浏览器上实现的，只是那时候一值将该功能作为一个ActiveXObject的插件利用，在IE实现该功能后，其它的浏览器，如google、firefox等则以自己的办法也实现了该功能，但是这个功能并没有受到利用者的重视，一贯到2005年谷歌在其旗下的Google Map和 Google Gmail等产品率先利用该技能，才让AJAX技能真正的盛行开来。
AJAX将的基本功能便是，当用户在前端页面发起要求后，这个要求会被XMLHttpRequest工具发送到后台，后台吸收要求后进行处理，并将结果按照规定的数据格式，重新发送到前端，当前端页面接相应收到的结果数据后，则会利用JS对数据进行解析、处理、展示等。
总之，AJAX技能的实质便是：实现页面无刷新数据动态变动。
比较之前须要通过刷新页面或者跳转链接才能得到相应的数据，AJAX具有以下几点上风：
+ 无刷新的数据获取，提高用户的体验性。
+ 减轻做事器的带宽
+ 后台与前真个紧密耦合
但是以上的优点，也会产生利用AJAX技能的缺陷
+ 毁坏浏览器的“提高”，“退却撤退”按钮
+ 对搜索引擎的SEO支持不好。
二、POST && GET
POST 与 GET都是HTTP要求办法中的一种。而要求办法又决定了参数传输以及获取数据办法的不同。
这里，我们只须要知道与理解POST 与 GET在运用层方面的差异即可。
· GET要求会将参数跟在URL后进行通报，而POST要求则是作为HTTP的实体内容发送给WEB做事器。
· GET办法传输数据有大小限定(常日不能大于2KB),而POST上传输数据，理论上不受限定。
· GET办法传输的数据会被浏览器缓存，因此利用GET办法传输账号，密码之类的，就会有很大的风险。
· GET办法和POST办法通报的数据在做事器真个获取也不相同。在PHP中，GET办法的数据可以采取$_GET[]获取，而POST则是$_POST[]获取，但两种都可以利用$_REQUEST[]获取。
三、原生实现AJAX大略示例
3.1 实当代码
· 前端代码 ·
1 function ajaxGetData(params){ 2 3 var xhr = null, //创建接管XMLHttpRequest工具变量 4 method = params.method && params.method.toUpperCase() || 'POST', 5 url = params.url || '', 6 data = params.data || null, 7 async = params.async || true, //异步还是同步，默认异步。 8 callback = params.callback || function(){}; 9 10 11 if(window.XMLHttpRequest){ //办理XMLHttpRequest工具的兼容性12 xhr = new XMLHttpRequest();13 }else if(window.ActiveXObject){ //如果是IE6.0之前的，那么那么采取ActiveXObject工具。14 xhr = new ActiveXObject('Microsoft.XMLHTTP');15 }else{16 return false; //如果浏览器不支持该功能， 那么就阻挡程序运行。17 }18 19 20 if(method === 'POST'){21 xhr.open('POST',url,async);
22 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');//POST提交数据，专用头部23 xhr.send(data); //发送要求,并附加数据，如果没有数据，则为默认值，null24 }25 26 if(method === 'GET'){27 (data)?'':data = '';28 xhr.open('GET',encodeURI(url+'?'+data),async); //GET要求，通过URL附加数据传输。而通过编码，可以办理IE6/7在GET办法下传输中文参数涌现乱码的情形。后台则可以通过 urldecode($_GET['a']) 进行解码29 xhr.send(null);30 }31 32 xhr.onreadystatechange=function(){ //注册要求的回调函数。33 if(xhr.readyState == 4 && xhr.status == 200){ //readyState 这个是要求的状态，4表示要求成功。 status表示相应应答或者数据传输的状态。200表示数据传输成功。34 callback(xhr);35 }36 }37 38 39 }
· 后端代码 ·
1 <?php2 $v1 = $_REQUEST['v1'];3 $v2 = $_REQUEST['v2'];4 echo ($v1+$v2);5 ?>
· 调用办法 ·
1 elem.onclick=function(){ 2 ajaxGetData({ 3 url:'index.php', 4 method:'get', 5 data:'v1=1&v2=2', 6 async:true, 7 callback:function(xhr){ 8 alert(xhr.responseText); 9 }10 });11 };
3.2 重点解释
· ActiveXObject
ActiveX插件可以与微软的其它组件进行交流，包括这里我须要的微软自带的HTTP要求方法。
new ActiveXObjcet('Microsoft.XMLHTTP') IE5.0+ 支持的HTTP要求方法。
· setRequestHeader
该方法可以设置要求的头部信息，常用以post办法向一个动态网页文件提交数据时利用。这是由于PHP中的$_POST['key']方法，须要用到键值对的格式，因此必须声明要求的类型为: setRequestHeader('Content-Type','application/x-www-form- urlencoded') 以表单提交数据的办法来发送数据到做事器。
· readyState && status
readyState表示HTTP要求的运行状态，不论要求的数据是否找到，都会经历以下的过程：
0 ---- 要求初始化，简历xhr工具。
1 ---- 与做事器建立连接,open()方法已经成功调用。
2 ---- 要求已经吸收
3 ---- 要求正在处理
4 ---- 要求处理完成
status 则表示了HTTP所要求数据的状态[常见的反馈码]：
200 ---- 数据要求完成，已经可以利用。
404 ---- 页面未找到。
· open
功能：初始化要求的参数。
格式：open('要求数据的办法','所要要求的页面URL','是否异步');
解释：
· 要求数据的办法：GET | POST
· 是否异步:true(异步) | false(同步)
如果存在setRequestHeader()方法，一定要把open()方法放在它之前的一行。
. send
功能：发送要求。
格式：send(params)
代码示例：
send(null)
//在GET办法下用这种办法，由于参数会在open方法中附加在URL后进行传输。
send('fname=神&lname=经病')
//在POST办法，用这种办法传输参数，但要记得利用setRequestHeader()方法。
. 同步与异步
xmlHttpReq工具的open()方法第三个参数可以设置同步或异步的办法。
true - 表示为异步，它不会等待做事器的实行完成。
false - 表示同步，它会等待做事器实行完成，否则便会挂动身序，一贯等待，一样平常不推举是用同步的办法，不过对付一些小程序还是可以利用的。
· 利用韶光戳或随机数来确保无缓存的要求数据
//韶光戳
open('GET','index.php?t='+ new Date()1,true);
//随机数
open('GET','index.php?m='+ Math.random(),true);
四、框架隐蔽域
4.1 基本观点
“框架隐蔽域” 技能，现在紧张用于文件上传时利用，由于AJAX技能，无法实现文件的上传。
在AJAX技能提出之前，如果想实现无刷新的提交或改变数据，一样平常都是通过“框架隐蔽域”来实现的。
“框架隐蔽域”的基本思路便是：页面会有一个空缺的Iframe,通过display:none进行隐蔽，然后在数据须要改变时，通过指定iframe的src值，让其跳转到所要要求的页面。然后将值传输到后台，那么页面的刷新，也会在隐蔽的iframe中进行，当前窗口页面并不会被刷新。末了父页面在去获取隐蔽的iframe中的结果即可，这样，便实现了通过隐蔽iframe办法来实现无刷新的数据提交或改变。
一样平常来说，通过iframe实现无刷新，紧张有以下几种方法：
+将值作为url参数附加到iframe的src中。
+在iframe中放入一个表单，然后让iframe中的表单进行提交
+将父页面的表单元素的target值指定为iframe的name值。
而父页面获取隐蔽iframe要求结果的方法，有以下几种:
+ 通过onload，或JQ的load方法读取改变后的iframe的值，牢记一点是，onload事宜一定要在iframe发生改变之前就要绑定。
+ 后台的结果是一段JavaScript代码，改代码会回调父页面的指定方法，并传输要求结果：
echo '<script>callback('数据提交成功')</script>'
4.2 后台写入脚本
· 前端代码 ·
1 <!DOCTYPE html> 2 <html lang=\"大众en\公众> 3 <head> 4 <meta charset=\公众UTF-8\"大众> 5 </head> 6 <body> 7 <button>click</button> 8 <iframe id=\"大众ifr\公众 src=\"大众\公众 style=\"大众display:none\"大众 frameborder=\"大众0\"大众></iframe> 9 </body>10 </html>11 <script>12 var btn = document.getElementsByTagName('button')[0],13 ifr = document.getElementById('ifr');14 btn.onclick=function(){15 ifr.src=\"大众index.php?v=success?\"大众+new Date().getTime(); //加入韶光戳16 }17 </script>
· 后端代码 ·
1 <?php2 $v = $_REQUEST['v'];3 echo '<script>alert(\"大众'.$v.'\"大众)</script>';4 ?>
4.3 JS主动判断Iframe的改变
· 前端代码 ·
1 <!DOCTYPE html> 2 <html lang=\"大众en\"大众> 3 <head> 4 <meta charset=\"大众UTF-8\"大众> 5 </head> 6 <body> 7 <button>click</button> 8 <iframe id=\"大众ifr\公众 src=\"大众\"大众 style=\公众display:none\"大众 frameborder=\公众0\"大众></iframe> 9 </body>10 </html>11 <script>12 var btn = document.getElementsByTagName('button')[0],13 ifr = document.getElementById('ifr');14 15 function load(obj,fn){16 17 obj.isloaded = false;18 obj.onreadystatechange=function(){19 if(this.readyState == 'complete'){20 if(!this.isloaded){21 this.isloaded = true;22 fn && fn();23 }24 }25 };26 obj.onload=function(){27 if(!this.isloaded){28 this.isloaded = true;29 fn && fn();30 }31 };32 33 }34 35 btn.onclick=function(){36 37 load(ifr,function(){alert(ifr.contentWindow.document.body.innerHTML)});38 ifr.src='index.php?'+new Date().getTime()+'&v=success';39 40 };41 42 </script>
· 后端代码 ·
1 <?php2 $v = $_REQUEST['v'];3 sleep(5);4 echo 'success';5 ?>
4.4 表单提交数据实战
· 前端代码 ·
1 <!DOCTYPE html> 2 <html lang=\"大众en\"大众> 3 <head> 4 <meta charset=\"大众UTF-8\"大众> 5 </head> 6 <body> 7 <form action=\"大众index.php\"大众 method=\"大众post\"大众 target=\"大众MyIframe\公众> 8 <input type=\公众text\"大众 name=\"大众v\公众 /> 9 <input type=\公众button\"大众 id=\"大众btn\"大众 value=\公众SubMit\"大众 />10 </form>11 <iframe id=\公众ifr\"大众 style=\公众display:none\"大众 frameborder=\公众0\"大众 name=\"大众MyIframe\"大众></iframe>12 </body>13 </html>14 <script>15 var btn = document.getElementById('btn'),16 ifr = document.getElementById('ifr');17 18 function load(obj,fn){19 20 obj.isOpen = false;21 obj.onreadystatechange=function(){22 if(this.readyState == 'complete'){23 if(!this.isOpen){24 this.isOpen = true;25 fn && fn();26 }27 }28 };29 obj.onload=function(){30 if(!this.isOpen){31 this.isOpen = true;32 fn && fn();33 }34 };35 36 }37 38 btn.onclick=function(){39 document.forms[0].submit();40 load(ifr,function(){alert(ifr.contentWindow.document.body.innerHTML)});41 42 };43 44 45 </script>
���：关于 load() 方法的解释，见：http://www.cnblogs.com/HCJJ/p/5493821.html
五、JQ 的 AJAX
5.1 load()
load方法是JQ中最大略最常用的Ajax方法。它默认采取GET要求，利用异步的办法，常用于要求一些静态的资源，例如HTML文件，然后插入到指定的DOM中。
load方法也可以指定要求的参数与回调函数，一旦指定了要求参数，那么load方法则会采取POST办法要求页面。
一个完全的load方法利用格式：
load(url,params,callback);
url : 是被要求页面的url地址。若要求的页面是一个html文件，那么可以在url后面空一个空格然后附加一个选择器，便可以指定返回的内容，
params : 要求时通报的参数，如果参数是一个工具，那么load便会利用POST办法要求，如果参数是一组键值对格式的字符串，那么则会采取GET要求。
callback(data,status,xhr) : 要求完成时的回调函数。须要把稳的是load方法的回调函数，不论要求成功还是失落败，只要要求完造诣会触发。
data : 要求完成的值。
status : 要求的状态
xhr : XMLHttpRequest工具。
示例：
1 $('div').load('news.html .para'); //附加选择器2 $('div').load('index.php','v=v1') //附加参数，GET要求3 $('div').load('index.php',{v:'v1'}) //附加参数，POST要求4 $('div').load('index.php',{v:'v1'},function(data){$(this).html(data)})
5.2 $.get()
$.get()方法利用GET办法来进行异步要求。
$.get(url,params,callback)
params : 要求时传输的参数，可以是工具形式，也可以是一个序列化的字符串。
工具格式:{v:'v1'}
序列化的字符串：'v=v1&v2=v2';
callback(data,status,xhr) : 把稳的是，该函数只会在要求成功后才会被触发。
示例：
$.get('index.php',{v:'v1'},function(data){alert(data)})
5.3 $.post()
$.post()方法利用POST办法进行异步要求。
$.post(url,params,callback);
5.4 $.getScript()
$.getScript()方法会通过GET办法去要求一个脚本文件，并实行脚本代码。
$.getScript(url,callback);
url : 脚本文件的url
callback(data,status)：要求后的回调函数，data是脚本的内容，而status则是要求的状态。
5.5 $.getJson()
$.getJson()与$.getScript()方法相同，不过$.getJson()方法专门用于要求json文件。
$.getJson(url,callback);
url : json文件的url
callback(data)：要求后的回调函数，data是相应的数据。
5.6 $.ajax()
$.ajax()方法是JQ中最底层的AJAX方法，上面所说的都是基于$.ajax进行实现的。
学习$.ajax()方法，我们可以从两个最基本点进行入手，便是属性与事宜。
a. 常用的属性解释：
url:[str]： 指定要求页面的url。type:[str]： 设置要求的办法，是get还是post。dataType[str]： 设置期望的后台返回数据格式。JQ会根据你指定的dataType类型进行数据的解析，因此如果不愿定数据类型，这个地方可以不填，默认为JQ自动判断。data:[str | obj]： 指定传输到后台的数据参数。async:[boolean]： 设置要求是同步办法还是异步办法，默认为异步。global:[boolean]： 设置是否开启AJAX的全局事宜。timeout:[number]： 设置超时时间。一旦后台相应的韶光超过timeout的值，那么AJAX就会跳转到error事宜中，并且error事宜中的xhr工具，会有一个statusText属性返回值为timeout。 error:function(xhr){if(xhr.statusText == 'timeout'){alert('要求超时,请重新在试！
');} }
jsonp:[str] : 后台会根据该值或得回调函数名称。
b. 常用的事宜解释：
complete：当AJAX要求完成后触发的事宜。
success：当AJAX要求完成并且成功后触发的事宜。
error：当AJAX要求失落败后触发的事宜。
beforeSend：在AJAX准备发送之前触发的事宜。在该事宜的处理程序中，可对当前AJAX的options做末了一次修正。
beforeSend:function(event,xhr){
xhr.type = 'get';
xhr.url = 'xxx.php';
event.success:function(){
};
}
c. 全局事宜解释：
当页面上存在任何ajax要求的时候都将触发这些特定的全局ajax事宜处理函数。
全局AJAX事宜处理函数的注册与实行，都是有一个特定的顺序。
如图：
个中:ajaxSend、ajaxSuccess、ajaxError、ajaxComplete都可以被页面上所有的AJAX要求,而ajaxStart、ajaxStop则只会被触发一次。
示例代码：
1 var start = 0, 2 send = 0; 3 $(document).ajaxStart(function(){ 4 start++; 5 }); 6 $(document).ajaxSend(function(){ 7 send++; 8 }); 9 $.ajaxSetup({'async':false});10 $.ajax({...}) //ajax1;11 $.ajax({...}) //ajax2;12 13 console.log(start); // --> 1;14 console.log(send); // --> 2;
由于ajaxSart()会在页面上的第一个要求发起时触发，ajaxStop()则会在末了一个要求结束时触发，以是它们常常组合用于显示loading等待框等。用来处理一群ajax要求。
其余须要把稳是：
全局事宜永久不会再跨域的脚本中运行，也不会再JSONP要求中运行。
在jQuery1.8以上，所有的全局ajax事宜处理函数必须绑定到document上，也便是$(document).ajaxEvent()
只有在$.ajax()亦或$.ajaxSetup()中的globle设置成true才能利用ajax全局函数，false将不能利用。
下面详细解释每个AJAX的全局事宜：
· ajaxStart()
ajax的全局事宜。ajax要求开始发送时实行。
该事宜处理函数不会被连续触发。
格式：
1 $(document).ajaxStart(function(e){2 if(e.type === 'ajaxStart'){3 alert('ajax要求开始！
');4 }5 });
e: 事宜工具。
· ajaxSend()
ajax的全局事宜。ajax要求发送时实行。
该事宜处理函数会被连续触发。
格式: $(document).ajaxSend(function(e,xhr,opt){});
e:事宜工具。
xhr:XMLHttpRequest工具。
opt:ajax参数选项。
· ajaxSuccess()
ajax的全局事宜。ajax要求成功时实行。
该事宜处理函数会被连续触发。
格式: $(document).ajaxSuccess(function(e,xhr,opt,res){});
e:事宜工具。
xhr:XMLHttpRequest工具。
opt:ajax参数选项。
res:ajax要求后 response返回的值。
· ajaxError()
ajax的全局事宜。ajax请失落败时实行。
该事宜处理函数会被连续触发。
格式： $(document).ajaxError(function(e,xhr,opt,exc){});
e:事宜工具。
xhr:XMLHttpRequest工具。
opt:ajax参数选项。
exc:失落败缘故原由。常见值：Not Found
· ajaxComplete()
ajax的全局事宜。ajax请失落败时实行。
该事宜处理函数会被连续触发。
格式： $(document).ajaxError(function(e,xhr,opt){});
e:事宜工具。
xhr:XMLHttpRequest工具。
opt:ajax参数选项。
· ajaxStop()
ajax的全局事宜。ajax要求停滞时实行。
格式:
1 $(document).ajaxStop(function(e){2 if(e.type === 'ajaxStop'){3 alert('ajax要求结束！
');4 }5 });
d. $.ajaxSetup()
在JQ的AJAX中,还有一个$.ajaxSetup方法，它可以全局的设置AJAX的默认参数选项。
示例：
1 $.ajaxSetup({ 2 url:'index.php', 3 type:'post', 4 dataType:'json', 5 error:function(){alert('error!!')} 6 }); 7 8 oBtn.onclick=function(){ 9 $.ajax({10 success:function(){11 alert('success');12 }13 });14 }
5.7 自己封装的一个Ajax
再AJAX根本上再次封装，目的是减少书写AJAX代码的冗余。
1 function ajaxGetData(_url,_data,fn,_async){ 2 $.ajax({ 3 type:'post', 4 url:_url, 5 async:!_async, 6 dataType:'json', 7 data:_data, 8 success:function(data){ 9 fn && fn(data);10 },11 error:function(){12 alert('接口要求失落败，失落败地址：'+ _url);13 }14 });15 }
5.8 序列化
在以往利用AJAX结合表单向后台传输参数时，我们须要用JS一个一个探求表单控件元素，然后再逐一取值附加到AJAX要求上。这对只有少量字段的表单勉强还可以利用。但如果表单元素越来越繁芜，再利用这种方法就显得缺少弹性。
Jquery为理解决这一常用的操作，供应了以下几个简便的方法，它们分别可以序列化与JSON格式化form表单元素的值。
serialize() - 序列化表单元素的值。所谓的序列化，便是以k=v的键值对格式并通过&进行连接的字符串。
serializeArray() - 该方法并不会返回字符串的值。而是将表单元素的值序列化为一个Json格式的数据。
示例：
1 $(form).serialize(); //name1=v1&name2=v22 $(form).serializeArray(); //[{name:name1,v:v1},{name:name2,v:v2}]
而实现serialize方法的核心功能，则是JQ的$.param()。
$.params() 方法，可以将一个普通的工具序列化成一个键值对格式的字符串返回。
示例: $.params({'key':'value'}); // 'key=value'
六、JSONP
6.1 JSONP的观点
JSONP(JavaScript Object Notaction With Padding) 便是采取JSON格式表示数据并由双方开拓职员相互约定的一种数据传输方法，该协议并不是一种公开标准的协议。只是一个相互约定的利用方法。
JSONP紧张是利用HTML - script标签可以跨域的特性来办理跨域数据的传输与交流。(实际上含有src属性的HTML标记，都是可以跨域的)。
JSONP的核心思路便是通过script标签去要求一个后台做事页面的地址。然后在该后台页面中，会调用前端HTML页面中的一个事先定义好的函数，并将处理的结果作为函数的参数一并传输过去。
对付script标签而言，它不论src指向的url是一个.js的文件，还是其他格式的文件，例如.php或者.jsp等，只要这个url指向的文件能返回一个符合JavaScript语法与格式的字符串即可。
JSONP的基本事情流程如图所示：
JSONP的基本事情流程代码实现如下
· 前端代码 ·
1 <!DOCTYPE html> 2 <html lang=\"大众en\"大众> 3 <head> 4 <meta charset=\"大众UTF-8\"大众> 5 <title>Document</title> 6 </head> 7 <body> 8 9 </body>10 </html>11 <script src=\公众http://hd.tzj.iwgame.com/js/jquery.min.js\公众></script>12 <script>13 14 function callback(v){15 alert(v);16 }17 18 19 </script>20 <script src=\"大众index.php\"大众></script>
· 后端代码 ·
<?php $v = isset($_REQUEST['v'])? $_REQUEST['v'] : '\"大众xxx\"大众'; echo 'callback('.$v.')';?>
6.2 自己封装的JSONP
节制JSONP的观点与基本的利用办法后，那么我们便可以封装一个公用的JSONP方法，该方法可以将要求的需求参数，与回调函数名称传输给后台，让后台自动的去天生所要回调的函数与结果。减少前端与后台的每次沟通本钱。
详细代码如下：
1 function JSONP(params){ 2 3 var url = params.url, 4 data = params.data, 5 fn = params.callback, 6 oScript = document.createElement('script'), 7 hd = document.getElementsByTagName('head')[0], 8 callback = 'jsonp_'+ new Date().getTime()%1e6; 9 10 window[callback] = function(data){11 12 oScript.parentNode.removeChild(oScript);13 fn(data);14 window[callback] = undefined;15 try{delete window[callback];}catch(e){;}16 17 };18 19 oScript.src = url+'?data='+ data + '&callback=' + callback;20 hd.appendChild(oScript);21 22 }
利用办法如下：
1 JSONP({2 'url':'index.php',3 'data':'condition=lt30',4 'callback':function(data){alert(data)}5 });
后台代码如下：
1 <?php2 $fn = isset($_REQUEST['callback'])? $_REQUEST['callback'] : '';3 $data = isset($_REQUEST['data'])? $_REQUEST['data'] : '';4 if($fn){5 echo ''.$fn.'(\"大众'.$data.'\"大众)';6 }7 ?>
6.3 JQ的JSONP利用。
接下来我们再看下，基于$.ajax()方法实现的JSONP要求。
1 $.ajax({
2 type:'get',
3 url:'index.php',
4 dataType:'jsonp', //指定期望的返回结果是一个JSONP
5 jsonp:'callback', //指定后台通过callback参数来吸收到JQ自己创建的一个回调函数名称。
6 data:'data=x',
7 success:function(data){alert(data)}
8 });
末了我们再总结一下，JSONP要求与传统的AJAX要求的差异，帮我们更好的区分与认识这两种机制。
1. AJAX是基于XMLHttpRequest的并被同源策略所限定，而JSONP则是基于Script标签，可跨域的数据交流协议。
2. AJAX的核心是XMLHttpRequest，它是一个已经标准化的协议，而JSONP则是一种相互约定非公开的协议。
