JavaScript（10）——Ajax以及跨域处理

Posted 2020-08-09

Ajax以及跨域处理

  哈哈哈，终于写到最后一章了。不过也还没有结束，说，不要为了学习而学习，恩。我是为了好好学习而学习呀。哈哈哈。正在尝试爱上代码，虽然有一丢丢的难，不过，我相信我会的！

【Ajax】

Ajax技术的核心是XMLHttpRequest对象(简称HXR)。Ajax通信与数据格式无关，这种技术就是无须刷新页面即可从服务器取得数据，但不一定是XML数据。

【XMLHttpRequest对象】

IE5是第一款引入XHR对象的浏览器。XHR对象是通过MSXML库中的一个ActiveX对象实现的。在IE5中，可能会遇到MSXML2.XMLHttp、MSXML2.XMLHttp.3.0、MSXML2.XMLHttp.6.0这三种版本的XHR对象。

XHR的用法

在使用XHR对象时，要调用的第一个方法是open()，他接收三个参数：要发送的请求类型（"get"、"post"等）、请求的URL和表示是否异步发送请求的布尔值。

XHR对象的属性

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

responseXML：如果响应的内容类型是"text/xml"或"application/xml"，这个属性中将保存包含着响应数据的XML DOM文档。

status：响应HTTP状态。

statusText：HTTP状态说明。

HTTP头部信息

http是计算机通过网络进行通信的规则。

http请求过程：

（1）建立TCP连接

（2）web浏览器向web服务器发送请求命令。

（3）web浏览器发送请求头信息。

（4）web服务器应答。

（5）web服务器发送应答头信息。

（6）web服务器向浏览器发送数据。

（7）web服务器关闭TCP连接。

http请求组成：

（1）http请求的组成和方法，比如get或者post请求；

（2）正在请求的URL；

（3）请求头，包含客户端环境信息，身份验证信息等；

（4）请求体，也就是请求正文。可以包含客户提交的查询字符串信息、表单信息等等。

get请求和post请求

get：一般用于信息获取，使用传递参数，对所发送信息的数量也有限制，一般在2000个字符。

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

post：通常用于向服务器发送应该被保存的数据，一般用于修改服务器上的的资源，对所发信息的数量无限制。

与get请求相比，post请求消耗的资源会更多一些。从性能角度来看，以发送相同的数据计，get请求的速度最多可达到post请求的两倍。

【XMLHttpRequest2级】

FromData

为序列化表单以及创建与表单以及创建与表单格式相同的数据（用于通过XHR传输）提供了便利。如下创建了一个FromData对象，并添加了一些数据：

var data=new FromData();
data.append("name","Nicholas");

这个append()方法接受两个参数：建和值，分别对应表单字段的名字和字段中包含的值。

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

超时设定

IE8为XHR对象添加了一个属性timeout，表示请求在等待响应多少毫秒之后就终止。在给timeout设置一个值后，如果在规定的时间内浏览器还没有接受响应，那么就会触发timeout事件，进而调用ontimeouts事件处理程序。

overrideMimeType()方法：用于重写XHR响应的MIME类型。

【跨源资源共享】

默认情况下，XHR对象只能访问与包含它的页面位于同一域中的资源。CORS（跨源资源共享）定义了必须访问跨源资源时，浏览器与服务器应该如何沟通。CORS背后的基本思想，就是自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或相应是应该成功还是失败。

IE对CORS的实现

微软在IE8中引入了XDR类型，这个对象与XHR类似，但能实现安全可靠的跨域通信。XDR对象安全机制部分实现了W3C和CORS规范。

所有XDR请求都是异步执行的，不能用它来创建同步请求。请求返回后，会触发load事件，响应的数据也会保存在responseText属性中。如下：

var xdr=new XDomainRequest();
xdr.onload=function(){
    alert(xdr.responseText);
};
xdr.open("get","http://www.somewhere-else.com/page/");
xdr.send(null);

【其他跨域技术】

图像Ping

动态创建图像经常用于图像Ping。图像Ping是与服务器进行简单、单向的跨域通信的一种方式。

图像Ping最常用于跟踪用户点击页面或动态广告曝光次数。图像Ping主要有两个缺点，一是只能发送get请求，二是无法访问服务器的响应文本。

JSONP

JSONP是JSON with padding（填充式JSON或参数式JSON）的简写。JSONP与JSON差不多，只不过是被包含在函数调用中的JSON。如下：

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

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

http://freegroip.net/json/?callback=handleResponse

【Comet】

Comet指的是一种更高级的Ajax技术（经常也有人称作“服务器推送”）。Ajax是一种从页面向服务器请求数据的技术，而Comet则是一种服务器向页面推送数据的技术。

实现Comet的方式有两种，长轮询和流。

长轮询是传统轮询（即短轮询）的一个翻版，即浏览器定时向服务器发送请求，看有没有更新数据。长轮询吧短轮询颠倒了一下。页面发起一个到服务器的请求，然后服务器一直保持连接打开，直到有数据可发送。发送完数据之后，浏览器关闭连接，随即又发起一个到服务器的新请求。

HTTP流，流不同于轮询，因为他在页面的整个生命周期内只使用HTTP连接。具体而言，就是浏览器向服务器发送一个请求，而服务器保持连接打开，然后周期性地向浏览器发送数据。所有服务器端语言都支持打印到输出缓存然后刷新（将输出缓存中的内容一次性全部发送到客户端）的功能，也正是实现HTTP流的关键所在。