《JavaScript》高级程序设计第21章：Ajax和Comet

时间：2016-08-17 00:03:50 阅读：194 评论：0 收藏：0 [点我收藏+]

标签：

Ajax的技术核心是XMLHttpRequest对象（简称XHR）

一、创建XMLHttpRequest对象

 1     function createXHR(){
 2         if(typeof XMLHttpRequest != "undefined"){
 3             //IE7, FireFox, Opera, Chrome, Safari都支持原生的XHR对象，这些浏览器中可以使用XMLHttpRequest构造函数
 4             return new XMLHttpRequest();        
 5         } else if (typeof ActiveXObject != "undefined"){
 6             //使用于IE7之前的版本
 7             if(typeof arguments.callee.activeXString != ‘string‘){
 8                 var versions = [ "MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",
 9                                  "MSXML2.XMLHttp"],
10                     i, len;
11                 for(i=0, len=versions.length; i<len; i++){
12                     try{
13                         new ActiveXObject(versions[i]);
14                         arguments.callee.activeXString = versions[i];
15                         break;
16                     } catch(ex){
17                         //跳过
18                     }
19                 }
20             }
21             return new ActiveXObject(arguments.callee.activeXString);
22         } else {
23             throw new Error("No XHR object available");
24         }
25     }
26 
27     //创建XHR对象
28     var xhr = createXHR();

二、XHR的用法

　　1. open()方法：

- 三个参数：发送的请求类型；请求的url；是否异步发送
- 注意：
  - url相对于执行代码的当前页面（也可以使用绝对路径）
  - 调用open()方法并不会真正发送请求，而只是启动一个请求以备发送
  - 只能向同一个域中使用相同端口和协议的url发送请求，如果url和启动请求的页面有任何差别，都会引发安全错误！

　　2. 发送请求：send()方法

- 接收一个参数，即要作为请求主体发送的数据。
- 如果不需要通过请求主体发送数据，则必须传入null。这个参数对某些浏览器来说是必须的。

　　3. 收到响应后，响应的数据会自动填充xhr对象的属性。相关的属性有：

- responseText
- responseXML
- status
- statusText

　　　收到响应，首先要检查status属性，一般来说，可将http状态代码为200作为成功标志。此外，状态码304表示请求资源没有被修改，可以直接使用浏览器中缓存的版本，则响应也有效。

　　　对于异步请求，可以检测xhr对象的readyStatus属性，该属性表示请求/响应过程的当前活动阶段，可取值如下：

- 0：未初始化。尚未调用open()方法
- 1：启动。已经调用open()方法，尚未调用send()方法
- 2：发送。已经调用send()方法，尚未接收到响应
- 3：接收。已经接收部分响应数据。
- 4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了。【一般只需检查这个阶段】

　　　只要readyStatus属性改变，都会触发一次readyStatechange事件。

 1     var xhr = createXHR();
 2     //必须要在open()方法前指定onreadyStatechange事件处理程序才能确保跨浏览器兼容性
 3     xhr.onreadyStatechange = function(){
 4         //这里使用xhr对象而非this对象，原因是此事件的作用域问题
 5         //如果使用this对象，在有的浏览器中会导致函数执行失败，或者导致错误发生。
 6         if(xhr.readyState == 4){
 7             if((xhr.status >= 200 && xhr.status <300) || xhr.status == 304){
 8                 alert(xhr.responseText);
 9             } else {
10                 alert("Request was unsuccessful: " + xhr.status);
11             }
12         }
13     };
14     xhr.open("get", "example.txt", true);
15     xhr.send(null);

三、XMLHttpRequest 2 级

四、进度事件

五、跨域资源共享

1. 跨域：

　　跨域安全策略：默认情况下， XHR对象只能访问与包含它的页面位于同一个域中的资源。

　　所谓跨域，就是因为JavaScript同源策略的限制，a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。

　　简单来说,同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一来源指的是主机名、协议和端口号的组合.

URL	说明	是否允许通信
http://www.a.com/a.js http://www.a.com/b.js	同一域名下	允许
http://www.a.com/lab/a.js http://www.a.com/script/b.js	同一域名下不同文件夹	允许
http://www.a.com:8000/a.js http://www.a.com/b.js	同一域名，不同端口	不允许
http://www.a.com/a.js https://www.a.com/b.js	同一域名，不同协议	不允许
http://www.a.com/a.js http://70.32.92.74/b.js	域名和域名对应ip	不允许
http://www.a.com/a.js http://script.a.com/b.js	主域相同，子域不同	不允许
http://www.a.com/a.js http://a.com/b.js	同一域名，不同二级域名（同上）	不允许（cookie这种情况下也不允许访问）
http://www.cnblogs.com/a.js http://www.a.com/b.js	不同域名	不允许

2. 跨域资源共享（CORS，Cross-Origin Resource Sharing）

　　是W3C的标准。

　　基本思想：使用自定义的http头部让浏览器与服务器进行沟通，从而决定请求或相应是应该成功，还是应该失败。（这一块的东西看着烦，先不管了）

六、其他跨域技术

1. 图像Ping

　　即使用<img>标签。因为网页可以从任何网页中加载图像，而不用担心是否跨域。

　　请求的数据是通过查询字符串形式发送的，而响应可以是任意内容。通过图像Ping，浏览器得不到任何具体的数据，但是通过侦听load和error事件，能知道响应是什么时候接收到的。

1     var img = new Image();
2     //将onload和onerror事件处理程序指定为同一个函数。这样无论是什么响应，只要请求完成，就能得到通知。
3     img.onload = img.onerror = function(){
4         alert(‘Done‘);
5     };
6     //请求从设置src属性那一刻开始，这里在请求中发送了一个name参数
7     img.src=‘http://xxxxxxxx/test?name=Nicholas‘;

　　缺点：

- 只能发送GET请求
- 无法访问服务器的响应文本
- 因此只能用于浏览器与服务器间的单向通信

2. JSONP（JSON with padding，填充式JSON/参数式JSON）

　　是被包含在函数调用中的JSON。由两部分组成：

　　　　1）回调函数：当响应到来时应该在页面中调用的函数。一般在请求中指定

　　　　2）数据：传入回调函数中的JSON数据

　　JSONP是通过动态<script>元素来使用，使用时可以为src属性指定一个跨域URL。这里script和img元素类似，都有能力不受限地从其他域加载资源。因为JSONP是有效的JavaScript代码，所以在请求完成后，即在JSONP响应加载到页面中以后，会立即执行。

1     function handleResponse(response){
2         alert("You are at IP address " + response.ip + ", which is in " +
3             response.city + ", " + response.region_name);               //试了下真的可以弹出我的地址！！！
4     }
5 
6     var script = document.createElement("script");　　　　
7     script.src = "http://freegeoip.net/json/?callback=handleResponse";　　　　//指定回调函数是handleResponse()
8     document.body.insertBefore(script,document.body.firstChild);

　　与图片Ping相比，JSONP的优点在于：

　　　　1）能够直接访问响应文本

　　　　2）支持在浏览器与服务器之间双向通信。

　　不足：

　　　　1）JSONP是从其他域中加载代码执行。其他域的安全性难以保证

　　　　2）要确保JSONP请求是否失败并不容易。<script>元素的onerror事件处理程序不被浏览器支持，因此必须使用计时器检测指定时间内是否收到响应。但是用户上网速度和带宽并不一定。

七、安全

《JavaScript》高级程序设计第21章：Ajax和Comet

标签：

原文地址：http://www.cnblogs.com/haoyijing/p/5778155.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

《JavaScript》高级程序设计第21章：Ajax和Comet

一、创建XMLHttpRequest对象

二、XHR的用法

1. open()方法：

2. 发送请求：send()方法

3. 收到响应后，响应的数据会自动填充xhr对象的属性。相关的属性有：

五、跨域资源共享

1. 跨域 ：

2. 跨域资源共享（CORS，Cross-Origin Resource Sharing）

六、其他跨域技术

1. 图像Ping

　　1. open()方法：

　　2. 发送请求：send()方法

　　3. 收到响应后，响应的数据会自动填充xhr对象的属性。相关的属性有：

1. 跨域：