JS复习：二十一章

一、XHR对象

　　Ajax( )对象的核心技术就是XMLHttpRequest对象。

二、XHR的用法

　　在使用XHR对象时，要调用的第一个方法是open( )，它接受3个参数：要发送的请求类型("get"、"post")、请求的URL和表示是否异步发送请求的布尔值。下面就是调用这个方法的例子：

　　xhr.open("get","example.php","false");

　　要发送特定的请求，必须像下面这样调用send( )方法：

　　xhr.open("get","example.txt","false";);

　　xhr.send(null);

　　在接收到响应之前还可以调用abort( )方法来取消异步请求：xhr.abort( );

三、GET请求

　　使用GET请求经常会发生一个错误，就是查询字符串的格式有问题。查询字符串中每个参数的名称和值都必须使用encodeURIComponent( )进行编码，然后才能放到URL的末尾；而且所有名-值对儿都必须由和号（&）分隔，如下面的例子所示。

　　xhr.open("get","example.php?name1=value1&name2=value2",true);

四、POST请求

　　POST请求应该把数据作为主体提交，而GET请求传统上不是这样。POST请求的主题可以包含非常多的数据，而且格式不限。在open( )方法第一个参数的位置传入"post"，就可以初始化一个POST请求。

　　xhr.open("post","example.php",true);

五、XML2级

1.FormData

　　现代Web应用中频繁使用的一项功能就是表单数据的序列化。FormData为序列化表单以及创建与表单格式相同的数据提供了便利。下面的代码创建了一个FormData对象，并向其中添加了一些数据。

　　var data=new FormData( );

　　data.append("name","Nicholas");

 

　　这个append( )方法接收两个参数：键和值，分别对应表单字段的名字和字段中包含的值。而通过向FormData构造函数中传入表单元素，也可以用表单元素的数据预先向其中填入键值对：

　　var data=new FormData(document.forms[0]);

　　创建了FormData的实例后，可以将它直接传给XHR的send( )方法，如：xhr.send(new FormData(form));

2.超时设定

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

3.overrideMimeType( )方法

　　overrideMimeType( )方法用于重写XHR响应的MIME类型。比如，服务器返回的MIME类型是text/plain，但数据中实际包含的是XML。根据MIME类型，即使数据是XML，responseXML属性中仍然是null。通过调用overrideMimeType( )方法，可以保证把响应当作XML而非纯文本来处理。

　　var xhr=createXHR( );

　　xhr.open("get","text.php",true);

　　xhr.overrideMimeType("text/xml");

　　xhr.send(null);

 

　　调用overrideMimeType( )方法必须在send( )方法之前，才能保证重写响应的MIME类型。

六、进度事件

　　1.与客户端服务器通信有关的事件：

　　　　（1）loadstart：在接收到响应数据的第一个字节触发。

　　　　（2）progress：在接收响应期间持续不断地触发。

　　　　（3）error：在请求发生错误时触发。

　　　　（4）abort：在因为调用abort( )方法而终止连接时触发。

　　　　（5）load：在接收到完整的响应数据时触发。

　　　　（6）loadend：在通信完成或者触发error、abort或load事件后触发。

七、跨源资源共享

　　通过XHR实现Ajax通信的一个主要限制，来源于跨域安全策略。默认情况下，XHR对象只能访问与包含它的页面位于同一个域中的资源。这种安全策略可以预防某些恶意行为。但是，实现合理的跨域请求对开发某些浏览器应用程序也是至关重要的。

　　CORS背后的思想：使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应式应该成功，还是应该失败。

　　比如一个简单的使用GET或POST发送的请求，它没有自定义的头部，而主体内容是text/plain。在发送该请求时，需要给它附加一个额外的Origin头部，其中包含请求页面的信息，以便服务器根据这个头部信息来决定是否给予响应。下面是一个Origin头部的一个示例：

　　Origin：http://www.nczonline.net

　　如果服务器认为这个请求可以接受，就在Access-Control-Allow-Origin头部中回发相同的源信息。例如：

　　Access-Control-Allow-Origin：http://www.nczonline.net

　　如果没有这个头部或者有这个头部但是信息源不匹配，浏览器就会驳回请求。注意：请求和响应都不包含cookie信息。

八、其他跨域技术：

1.图像Ping：

例如：

var img = new Image( );

　　　img.onload = img.onerror = function(){

　　　　　alert("Done!");　

　　　};
　　　img.src = "http://www.example.com/test?name = Nicholas";

　　这里创建了一个Image实例，然后将onload和onerror事件处理程序指定为同一个函数。缺点是只能发送GET请求，二是无法访问服务器的响应文本。因此，图像ping只能用于浏览器与服务器间的单向通信。

2.JSONP

　　JSONP看起来与JSON差不多，只不过被包含在函数调用中的JSON，就像下面这样：

　　callback({"name":"Nicholas"});

　　JSONP由两部分组成：回掉函数和数据。回掉函数是当响应到来时应该在页面中调用的函数。回掉函数的名字一般是在请求中指定的。而数据就是传入回掉函数中的JSON数据。