首页 > 代码库 > JavaScript(10)——Ajax以及跨域处理

JavaScript(10)——Ajax以及跨域处理

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=http://www.mamicode.com/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流的关键所在。

JavaScript(10)——Ajax以及跨域处理