逐渐深入地理解Ajax

微信公众号：

阅读此文章需要12分钟

快速理解Ajax精选文

Ajax的基本原理是：XMLHttpRequest对象(简称XHR对象)，XHR为向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器获得更多信息。

意味着用户不必刷新页面也能取得新数据，然后通过DOM将数据插入到页面中

XMLHttpRequest对象方法如下：

about()：停止当前的请求；

open("method","URL",[asyncFlag]) ：

等常见的方法；

XHR的基本用法：

在使用XHR对象时，要调用的第一个方法是open()方法，它有三个参数，第一个参数是：需要发送请求的类型(get或者post)，第二个参数是请求的url，第三个参数是请求的布尔值(true是异步,false是同步)；

xhr.open('get','http://127.0.0.1/ajax/ajax.php',false);

如上代码会启动一个get请求ajax.php,但是请注意：open方法并不会真正发请求，而只是启动一个请求以备发送；

要发送真正请求必须使用send()方法；如下：

1 xhr.open('get','http://127.0.0.1/ajax/ajax.php',false);
2 xhr.send(null);

send的方法接收一个参数，需要请求发送的数据，如果请求不需要发送数据，需要传送一个null，因为对于有些浏览器这是必须的；上面第三个参数传的是false，是同步请求，服务器接收到响应后再继续执行后面的代码，响应后的数据会自动填充XHR对象的属性，XHR有以下属性：

responseText: 作为响应主体被返回的文本。

responseXML: 如果响应的内容是”text/xml” 或 “application/xml”,这个属性将保存包含响应数据的XML DOM文档；

status: 响应http状态；

statusText: http状态说明；

在接收到响应后，第一步是检查status状态，如果状态时200，说明已经成功返回，此时responseText属性已经就绪；如果状态是304，说明资源未被修改，可以直接使用浏览器缓存的版本，当然，响应是有效的；如下ajax请求代码；

 1 // 创建xhr对象方法如下：
 2 function createXHR(){
 3      var xhr;
 4 
 5      if (window.XMLHttpRequest){
 6 
 7         // code for IE7+, Firefox, Chrome, Opera, Safari
 8 
 9         xhr=new XMLHttpRequest();
10 
11     }else{ // code for IE6, IE5
12 
13             xhr=new ActiveXObject("Microsoft.XMLHTTP");
14 
15    }
16 
17    return xhr;
18 
19 }
20 
21 var xhr = createXHR();
22 
23 xhr.open('get','http://127.0.0.1/ajax/ajax.php',false);
24 
25 xhr.send(null);
26 
27 if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
28    console.log(xhr.responseText);
29 }else {
30    console.log(xhr.status);
31 
32 }

ajax.php代码如下：

1 <?php
2 
3 $data = json_decode(file_get_contents("php://input"));
4 
5 echo ('{"id" : ' . $data->id . ', "age" : 24, "sex" : "boy", "name" : "huangxueming"}');
6 
7 ?>

发ajax请求后，在控制台中打印如下：

说明已经请求成功；

上面的demo代码是同步请求，但是有时候我们需要发送异步请求，才能让javascript后续代码继续执行而不会堵塞，此时，我们可以检测XHR对象的readyState属性，该属性表示请求/响应当前活动阶段；这个属性取值如下：

0：未初始化。尚未调用open()方法；

1：启动。已经调用open()方法，但未调用send()方法；

2：发送。已经调用send()方法，但尚未接收到响应；

3：接收。已经接收到部分数据；

4：完成。已经接收到全部响应数据，而且可以在客户端使用了；

readyState属性值由一个值变为另一个值，就会触发一次readystatechange事件。可以利用这个事件检测每次状态变化后的readyState值，但是必须在调用open()方法之前指定onreadystatechange事件；如下代码：

 1 // 创建xhr对象方法如下：
 2 function createXHR() {
 3 
 4     var xhr;
 5 
 6     if (window.XMLHttpRequest) {
 7 
 8         // code for IE7+, Firefox, Chrome, Opera, Safari
 9         xhr = new XMLHttpRequest();
10 
11     } else {
12 
13         // code for IE6, IE5
14         xhr = new ActiveXObject("Microsoft.XMLHTTP");
15 
16     }
17 
18     return xhr;
19 
20 }
21 
22 var xhr = createXHR();
23 
24 xhr.onreadystatechange = function() {
25 
26     if (xhr.readyState == 4) {
27 
28         if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
29 
30             console.log(xhr.responseText);
31 
32         } else {
33 
34             console.log(xhr.status);
35 
36         }
37 
38     }
39 
40 }
41 
42 xhr.open('get', 'http://127.0.0.1/ajax/ajax.php', false);
43 
44 xhr.send(null);

如上代码，在处理onreadystatechange事件时使用了xhr对象，没有使用this对象，原因是onreadystatechange事件处理程序的作用域的问题；如果使用this对象，在有的浏览器下会执行失败，或者导致错误发生；

理解Http头部信息

每个http请求和响应都会带有响应的头部信息，xhr对象也提供了操作这两种头部(请求头部和响应头部的)信息的方法；

默认情况下，在发送XHR请求的同时，还会发送下列头部信息：

Accept: 浏览器能够处理的内容类型；

Accept-Charset: 浏览器能够显示的字符集；

Accept-Encoding: 浏览器能够处理的压缩编码；

Accept-Language: 浏览器当前设置的语言；

Connection: 浏览器与服务器之间连接的类型；

Cookie：当前页面设置的cookie；

Host：发出请求页面所在的域；

Referer：发出请求的页面url。

User-Agent: 浏览器的用户代理字符串。

如下ajax.php请求所示：

我们还可以使用setRequestHeader()方法可以设置自定义的请求头部信息，这个方法接收2个参数：头部字段的名称和头部字段的值；要成功发送请求头部信息，必须在调用open()方法之后且调用send()方法之前调用setRequestHeader()；如下demo所示：

1 xhr.open('get','http://127.0.0.1/ajax/ajax.php',false);
2 
3 xhr.setRequestHeader("myHeader","myValue");
4 
5 xhr.send(null);

截图如下：

调用getAllResponseHeaders()方法则可以取得一个包含所有头部信息的长字符串，如上代码中在onreadystatechange事件中添加getAllResponseHeaders()方法：

 1 xhr.onreadystatechange = function() {
 2 
 3     if (xhr.readyState == 4) {
 4 
 5         if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
 6 
 7             var myHeader = xhr.getAllResponseHeaders();;
 8 
 9             console.log(myHeader);
10 
11         } else {
12 
13             console.log(xhr.status);
14 
15         }
16 
17     }

打印如下：

理解GET请求

在ajax中，有常见的get请求或者post请求，使用get请求时，我们是把参数的名-值对经过encodeURIComponent()进行编码，然后放到URL的末尾，所有名值对必须由和好(&)分割；如下代码：

xhr.open('get','http://127.0.0.1/ajax/ajax.php?name1=value1&name2=value2',true);

下面我们可以封装一个方法可以辅助向现有的URL的末尾添加查询字符串参数；

1 function addURLParam(url,name,value) {
2 
3 url += url.indexOf("?") == -1 ? "?" : "&";
4 
5 url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
6 
7 return url;
8 
9 }

如下代码测试：

 1 // 创建xhr对象方法如下：
 2 function createXHR() {
 3 
 4     var xhr;
 5 
 6     if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
 7         xhr = new XMLHttpRequest();
 8 
 9     } else { // code for IE6, IE5
10         xhr = new ActiveXObject("Microsoft.XMLHTTP");
11 
12     }
13 
14     return xhr;
15 
16 }
17 
18 var xhr = createXHR();
19 
20 xhr.onreadystatechange = function() {
21 
22     if (xhr.readyState == 4) {
23 
24         if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
25 
26             var myHeader = xhr.getAllResponseHeaders();;
27 
28             console.log(myHeader);
29 
30             console.log(xhr.responseText);
31 
32         } else {
33 
34             console.log(xhr.status);
35 
36         }
37 
38     }
39 
40 }
41 
42 var url = "http://127.0.0.1/ajax/ajax.php";
43 
44 url = addURLParam(url, "name1", "value1");
45 
46 url = addURLParam(url, "name2", "value2");
47 
48 xhr.open('get', url, true);
49 
50 xhr.setRequestHeader("myHeader", "myValue");
51 
52 xhr.send(null);
53 
54 function addURLParam(url, name, value) {
55 
56     url += url.indexOf("?") == -1 ? "?": "&";
57 
58     url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
59 
60     return url;
61 
62 }

如下截图所示：

理解POST请求：

Post请求时作为请求的主体提交，post请求的主体可以是非常多的数据，而且格式不限；在open方法的第一个参数传入post，就可以初始化post请求，如下：xhr.open('post',"http://127.0.0.1/ajax/ajax.php",true);

接下来我们需要使用send()方法来发送数据，传入的参数可以是任何的字符串或者form表单序列化之后的数据；比如我们现在可以使用xhr来模仿表单提交数据，首先我们需要将Content-Type头部信息设置为application/x-www-form-urlencoded, 也就是表单提交的内容类型，其次以适当的格式创建一个字符串，比如form表单序列化数据，然后通过xhr发送到服务器端，

如下HTML代码：

1 <form id="form">
2 
3 <input name="user-name" value="aaa"/>
4 
5 <input name="user-email" value="233"/>
6 
7 </form>

JS代码如下：

  1 // 序列化的代码
  2 function serialize(form) {
  3 
  4     var arrs = [],
  5 
  6     field = null,
  7 
  8     i,
  9 
 10     len,
 11 
 12     j,
 13 
 14     optLen,
 15 
 16     option,
 17 
 18     optValue;
 19 
 20     for (i = 0, len = form.elements.length; i < len; i++) {
 21 
 22         field = form.elements[i];
 23 
 24         switch (field.type) {
 25 
 26         case "select-one":
 27 
 28         case "select-multiple":
 29 
 30             if (field.name.length) {
 31 
 32                 for (j = 0, optLen = field.options.length; j < optLen; j++) {
 33 
 34                     option = field.options[j];
 35 
 36                     if (option.selected) {
 37 
 38                         optValue = '';
 39 
 40                         if (option.hasAttribute) {
 41 
 42                             optValue = option.hasAttribute("value") ? option.value: option.text;
 43 
 44                         } else {
 45 
 46                             optValue = option.attributes["value"].specified ? option.value: option.text;
 47 
 48                         }
 49 
 50                         arrs.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue));
 51 
 52                     }
 53 
 54                 }
 55 
 56             }
 57 
 58             break;
 59 
 60         case undefined:
 61             //字段集
 62         case "file":
 63             // 文件输入
 64         case "submit":
 65             // 提交按钮
 66         case "reset":
 67             // 重置按钮
 68         case "button":
 69             // 自定义按钮
 70             break;
 71 
 72         case "radio":
 73             // 单选框
 74         case "checkbox":
 75             // 复选框
 76             if (!field.checked) {
 77 
 78                 break;
 79 
 80             }
 81 
 82             /* 执行默认动作 */
 83 
 84         default:
 85 
 86             // 不包含没有名字的表单字段
 87             if (field.name.length) {
 88 
 89                 arrs.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
 90 
 91             }
 92 
 93         }
 94 
 95     }
 96 
 97     return arrs.join("&");
 98 
 99 }
100 
101 var url = "http://127.0.0.1/ajax/ajax.php";
102 
103 xhr.open('post', "http://127.0.0.1/ajax/ajax.php", true);
104 
105 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
106 
107 var form = document.getElementById("form");
108 
109 xhr.send(serialize(form));

之后我们可以看到form表单序列化之后传过去的数据如下：

XMLHttpRequest 2级

XMLHttpRequest 1级只是把已有的xhr对象的实现细节描述出来了，而XMLHttpRequest 2级是在原来的基础上增加了一些规范，但所有的浏览器只是实现了他规定的部分内容；如下几个：

理解FormData

现在web应用中频繁使用的一项功能是form表单序列化，XMLHttpRequest 2级定义了FormData类型，使用FormData获取数据与表单序列化数据一样，但是更简洁方便；

支持FormData浏览器有：firefox4+, safari5+, chrome和Android3+版的webkit.

比如我现在提交form表单数据如下demo：

HTML代码：

1 <form id="form">
2 
3 <input name="user-name" value="aaa"/>
4 
5 <input name="user-email" value="233"/>
6 
7 </form>

JS代码如下：

1 var url = "http://127.0.0.1/ajax/ajax.php";
2 
3 xhr.open('post',"http://127.0.0.1/ajax/ajax.php",true);
4 
5 var form = document.getElementById("form");
6 
7 xhr.send(new FormData(form));

在chrome浏览器下如下：

在firefox浏览器如下：

使用formData的方便之处体现在不必明确地在XHR对象上设置请求头部，XHR对象能识别传入的数据类型是FormData实例，并配置适当的头部信息。

理解超时设定

IE8为XHR对象添加了一个timeout属性，表示请求在等待响应多少毫秒之后停止，在给timeout设置一个数值后，如果在规定的时间之内浏览器没有接受到响应，那么就会触发ontimeout事件，那么就会终止ajax请求，如下代码：

 1 var url = "http://127.0.0.1/ajax/ajax.php";
 2 
 3 xhr.open('get',"http://127.0.0.1/ajax/ajax.php",true);
 4 
 5 xhr.timeout = 1;
 6 
 7 xhr.ontimeout = function(){
 8 
 9 alert("111");
10 
11 };
12 
13 xhr.send(null);

如上我把代码timeout设置1毫秒，如果请求1毫秒之后没有返回数据的话，就执行ontimeout事件，并且请求停止掉，目前我测试的浏览器chrome和firefox都支持；如下chrome浏览器截图如下：

进度事件

Progress Events规范是W3C的一个工作草案，定义了与客服端服务器通信有关的事件，这些事件最早是针对XHR操作的，有以下6个事件；

loadstart: 在接收到响应数据的第一个字节时触发；

progress: 在接收响应期间持续不断的触发；

error: 在请求发生错误时触发；

abort: 在因为调用abort()方法而终止连接时触发；

load：在接收到完整的响应数据时触发；

loadend：在通信完成或者触发error，abort或load事件后触发；（这个事件基本上不使用的。）

支持前5个事件的浏览器有：firefox3.5+，safari4+，chrome，IOS版的safari和android版的webkit，opera(从11开始)，IE8+只支持load事件；

load事件

Firefox在实现XHR对象的某个版本时，为了简化异步交互模型，实现了load事件，用以替代readystatechange事件，响应接收完毕后触发load事件，因此就没有必要检查readyState属性了；

目前支持的浏览器有：firefox，opera，chrome和safari

如下代码演示：

 1 var xhr = createXHR();
 2 
 3 xhr.onload = function(){
 4 
 5 　　if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
 6 
 7 　　　　console.log(xhr.responseText);
 8 
 9 　　}else {
10 
11 　　　　console.log(xhr.status);
12 
13 　　}
14 
15 }
16 
17 xhr.open('get',"http://127.0.0.1/ajax/ajax.php",true);
18 
19 xhr.send(null);

progress事件

这个事件在浏览器接收数据期间周期性的触发，而onprogress事件处理程序会接收一个event对象，包含三个属性，lengthComputable是一个表示进度信息是否可用的布尔值；position表示已经接收的字节数，totalSize表示根据Content-Length响应头部确定的预期总字节数。如下代码：

 1 var xhr = createXHR();
 2 
 3 xhr.onload = function() {
 4 
 5     if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
 6 
 7         console.log(xhr.responseText);
 8 
 9     } else {
10 
11         console.log(xhr.status);
12 
13     }
14 
15 }
16 
17 xhr.onprogress = function(event) {
18 
19     var divStatus = document.getElementById("status");
20 
21     if (event.lengthComputable) {
22 
23         divStatus.innerHTML = "Received " + event.position + " of " +
24 
25         event.totalSize + " bytes";
26 
27     }
28 
29 };
30 
31 xhr.open('get', "http://127.0.0.1/ajax/ajax.php", true);
32 
33 xhr.send(null);

截图运行如下：

跨源资源共享

通过XHR实现ajax通信的一个主要限制，来源于跨域安全策略。默认情况下，XHR对象只能访问与包含它的页面位于同一个域中的资源，因为浏览器这样做的限制就是防止一些恶意操作；那么CORS（跨源资源共享）的基本原理是：需要由服务器发送一个响应标头就可以让浏览器与服务器进行沟通；

比如我现在做一个demo来试着看，假如我现在在hosts文件下绑定2个IP地址：如下：

127.0.0.1 abc.example1.com

127.0.0.1 def.example2.com

那么现在我 abc.example1.com下有一个页面ajax.html，如下代码：

 1 var xhr = createXHR();
 2 
 3 xhr.onload = function() {
 4 
 5     if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
 6 
 7         console.log(xhr.responseText);
 8 
 9     } else {
10 
11         console.log(xhr.status);
12 
13     }
14 
15 }
16 
17 xhr.open('POST', "http://def.example2.com/ajax/ajax.php", true);
18 
19 xhr.send(null);

如上代码，在给域下def.example2.com 下的ajax.php发ajax请求，因为是同源策略问题，肯定不成功，如下所示：

现在我们在def.example2.com域下php设置头部即可；如下代码：

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

ajax.php代码如下：

1 <?php
2 
3 header("Access-Control-Allow-Origin: *");
4 
5 $data = json_decode(file_get_contents("php://input"));
6 
7 echo ('{"id" : ' . $data->id . ', "age" : 24, "sex" : "boy", "name" : "huangxueming"}');
8 
9 ?>

这样就可以认为大功告成，很高兴，看到书上或者网上查找资料后，也是这么说的，但是呢当我再次请求这个页面的时候http://abc.example1.com/ajax/ajax.html 还是发现因为同源策略的问题，请求不成功，查看控制台这样的错误，如下：

XMLHttpRequest cannot load http://def.example2.com/ajax/ajax.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://abc.example1.com' is therefore not allowed access.

也是同源策略的问题，不允许访问；继续通过网上查找资料，发现原来是我的php.ini里面的配置出了问题，在php安装目录下找到php.ini文件output_buffering默认为off的。我现在把它设为on就ＯＫ了。如下截图所示：

我们继续重启下php服务器，即可看到请求成功，这时候我们会喜出往外；这时候我们再看看php请求如下设置：

在php文件头部设置header，header("Access-Control-Allow-Origin: *");星号意思是所有的请求都可以，但是设置并不安全，所以我们可以针对当前的这个页面域下设置，如下：

1 <?php
2 
3 header("Access-Control-Allow-Origin: http://abc.example1.com");
4 
5 $data = json_decode(file_get_contents("php://input"));
6 
7 echo ('{"id" : ' . $data->id . ', "age" : 24, "sex" : "boy", "name" : "huangxueming"}');
8 
9 ?>

我们继续截图如下看看：

同样也可以访问；但是上面的在IE7-8下还是会报错，因为同源策略的问题，会报错，如下截图所示：

标准浏览器下比如chrome或者firefox不会报错，那么我们可以看下在IE下，IE如何实现对CORS的支持；

IE对CORS的实现方式如下：

微软在IE中引入XDR（XDomainRequest）类型，这个对象与XHR类似，但是能实现安全可靠的跨域通信，XDR对象部分实现了W3C的CORS规范；XDR与XHR不同之处如下：

Cookie不会随请求发送，也不会随响应返回。
只能设置请求头部信息中的Content-Type字段。
不能访问响应头部信息。
只支持get和post请求。

这些变化使CSRF（Cross-Site Request Forgery，跨站点请求伪造）和XSS(Cross-Site Scripting，跨站点脚本)的问题得到了缓解，被请求的资源可以根据它认为合适的任意数据(用户代理，来源页面等)来决定是否设置Accept-Control-Allow-Origin头部。作为请求的一部分，Origin头部的值表示请求的来源域，以便远程资源明确地识别XDR请求。

XDR对象的使用方法与XHR对象非常相似，先创建一个XDomainRequest对象，如下：

var xdr = new XDomainRequest();

再调用open()方法，再调用send()方法；但是XDR对象的open（）方法只接受2个参数，请求的类型和URL；

所有XDR的请求都是异步的，不能用来创建同步请求，请求成功后，会触发load事件，响应的数据保存在responseText属性中；如下demo，我们继续看下在IE7-8下如何可以跨域请求成功；如下代码：

 1 var xdr = new XDomainRequest();
 2 
 3 xdr.onload = function() {
 4 
 5     alert(xdr.responseText);
 6 
 7 };
 8 
 9 xdr.open('POST',"http://def.example2.com/ajax/ajax.php",true);
10 
11 xdr.send(null);

现在我们刷新下页面可以看到请求成功了，如下所示：

如果响应失败的话，会调用error方法，通知开发人员，如下代码：

 1 var xdr = new XDomainRequest();
 2 
 3 xdr.onload = function() {
 4 
 5     alert(xdr.responseText);
 6 
 7 };
 8 
 9 xdr.onerror = function() {
10 
11     alert("响应失败");
12 
13 };
14 
15 xdr.open('POST', "http://def.example2.com/ajax/ajax.php", true);
16 
17 xdr.send(null);

与XHR一样，XDR对象也支持timeout属性以及ontimeout事件处理程序，如下代码：

1 xdr.timeout = 1;
2 
3 xdr.ontimeout = function(){
4 
5     alert("Request took too long.");
6 
7 };

请求超过1毫秒后没有响应，就调用ontimeout事件；

标准浏览器下实现对CORS的实现

其实实现方式在第一次讲解跨域的时候我们已经讲过了，可以翻到上面，但是我们现在重新来理一遍；

Firefox3.5+，Safari4+，chrome，ios版的safari和android平台中的webkit都通过XMLHttpRequest对象实现了CORS的原生支持；如下代码：

 1 var xhr = new XMLHttpRequest();
 2 
 3 xhr.onreadystatechange = function() {
 4 
 5     if (xhr.readyState == 4) {
 6 
 7         if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
 8 
 9             alert(xhr.responseText);
10 
11         } else {
12 
13             console.log(xhr.status);
14 
15         }
16 
17     }
18 
19 }
20 
21 xhr.open('POST', "http://def.example2.com/ajax/ajax.php", true);
22 
23 xhr.send(null);

如上代码即可就可以实现在标准浏览器下ajax的跨域通信问题；

与IE中的XDR对象不同，通过跨域XHR对象可以访问status和statusText属性，而且还支持同步请求，跨域XHR对象也有一些限制，如下限制：

不能使用setRequestHeader()设置自定义头部；
不能发送和接收cookie。
调用getAllResponseHeaders()方法总会返回空字符串。

跨浏览器的CORS的实现

如上介绍的是对IE下和标准浏览器下2种方案实现跨域的实现方案，下面我们可以来封装下对常用的所有浏览器支持下，首先我们先检查是否存在withCredentials属性(标准浏览器下有这个属性)，再结合检测XDomainRequest对象是否存在(就可以检测到IE)，如下是所有封装的代码：

 1 function createCORSRequest(method, url) {
 2 
 3     var xhr = new XMLHttpRequest();
 4 
 5     if ("withCredentials" in xhr) {
 6 
 7         xhr.open(method, url, true);
 8 
 9     } else if (typeof XDomainRequest != 'undefined') {
10 
11         xhr = new XDomainRequest();
12 
13         xhr.open(method, url);
14 
15     } else {
16 
17         xhr = null;
18 
19     }
20 
21     return xhr;
22 
23 }
24 
25 var request = createCORSRequest('POST', "http://def.example2.com/ajax/ajax.php");
26 
27 if (request) {
28 
29     request.onload = function() {
30 
31         alert(request.responseText);
32 
33     }
34 
35     request.send();
36 
37 }

浏览器支持程度：IE7+，firefox3.5+，safari4+，chrome3+等；

JSONP跨域技术的基本原理

Jsonp跨域get请求是如何实现的；我们先来了解下为什么会出现跨域？

Javascript是一种在web开发中经常使用的前端动态脚本技术，在javascript中，有一个很重要的安全限制，被称为”same-Origin-Policy”同源策略，这一策略对于javascript代码能够访问的页面内容作了很重要的限制，即javascript只能访问与包含它的文档在同一域下的内容；

JSONP的基本原理是：利用在页面中创建<script>节点的方法向不同域提交http请求的方法称为JSONP。

比如我现在的ajax.html页面http://abc.example1.com/ajax/ajax.html 下提交ajax请求http://def.example2.com/ajax/ajax.php get请求，我们可以在ajax.html页面动态的创建script标签，如下：

1 var eleScript= document.createElement("script");
2 
3 eleScript.type = "text/javascript";
4 
5 eleScript.src = "http://def.example2.com/ajax/ajax.php";
6 
7 document.getElementsByTagName("HEAD")[0].appendChild(eleScript);

当get请求从http://def.example2.com/ajax/ajax.php 返回时，可以返回一断javascript代码，这段代码会自动执行，可以用来负责调用页面http://abc.example1.com/ajax/ajax.html 中的一个callback函数；

理解JSONP执行过程如下：

首先在客户端注册一个callback(比如jsonpcallback)，然后把callback名字(比如叫jsonp123456)传给服务器端，服务器端得到callback名字后，需要用jsonp123456（）把将要输出的json内容包括起来，此时，服务器生成的json数据才能被客户端正确接收；然后以javascript语法的方式，生成一个function，function的名字就是传递回来的参数jsonp123456.然后就可以在客户端直接运行调用jsonp123456这个函数了；

JSONP的优点：它不像XMLHttpRequest对象实现ajax请求受到同源策略的限制，它在所有的浏览器都支持，比如古老的IE6也支持，并且在请求完成后可以通过callback的方式传回结果；

JSONP的缺点：只支持get请求，不支持post请求，它只支持http跨域的请求情况，不能解决不同域的两个页面之间如何进行javascript调用的问题；

转自：github

链接：https://github.com/TrustTheBoy

posted @ 2016-08-04 14:41 $小瑞阅读(518) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部