ajax

new XMLHttpRequest来取得XHR对象。

要使用XHR对象，要调用以下方法：

    open(要发送的请求类型，请求的url地址，是否异步发送请求)：调用这个方法不会真正发送请求，而只是启动一个请求以备发送。

    send(作为请求主体发送的数据)：调用这个方法就发送了特定的请求。如果不需要通过请求主体发送数据，则必须传入null。

当服务器响应之后，响应的数据会自动填充XHR对象的属性，相关的属性简介如下：

    responseText：作为响应主体被返回的文本。无论内容类型是什么，响应主体的内容都会保存到这个属性中。

    responseXML：如果响应的内容类型是“text/xml”或“application/xml”，这个属性中将保存着响应数据的的XML DOM文档。对于非XML数据而言，这个属性的值为null。

    status：响应的HTTP状态，一般来说可以将HTTP状态代码200作为成功的标志。此外304表示请求的资源并没有被修改，可以直接使用浏览器中缓存的版本，当然，也意味着响应是有效的。

    statusText：HTTP状态的说明。

    readyState：表示请求/响应过程的当前活动阶段。它有以下几个可取的值：

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

    1:启用。已经调用open方法，但尚未调用send()方法。

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

    3:接收。已经接收到部分响应数据。

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

只要readyState属性的值由一个值变为另外一个值，都会触发一次readystatechange事件。XHR对象还有一个abor()方法来取消异步请求。

HTTP头部信息：

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

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

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

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

    Accept-Language：浏览器当前设置的语言。

    Connection：浏览器与服务器之间连接的类型。 

    Cookie：当前页面设置的任何cookie。

    Host：发送请求的页面所在的域。

    Referer：发送请求的页面的URI。

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

    Content-Type: 指定请求和响应的HTTP内容类型。如果未指定 ContentType，默认为text/html。

使用以下方法，可以设置自定义的请求头部信息：

    setRequestHeader(头部字段的名称，头部字段的值)：这是XHR对象的方法，要成功发送请求头部信息，必须在调用open()方法之后且调用send()方法之前调用这个方法。

调用XHR对象的以下方法可以取得相应的响应头部信息：

    getResponseHeader(头部字段名称)：这个方法可以取得相应的响应头部信息。

    getAllResponseHeaders()：这个方法可以取得包含所有头部信息的长字符串。

GET请求：

    get请求将查询字符串参数追加到URL的末尾，查询字符串的每个参数的名称和值都必须使用encodeURIComponent()进行编码，然后才能放到URL的末尾。而且所有的名值对都必须由和号(&)分隔。

POST请求：

    post请求发送过去的数据需要后端用程序处理。而表单发送过去的数据，处理起来更方便，所以一般都模拟表单的形式将数据发送给后端。模拟表单提交：

        1、首先将Content-Type头部信息用XHR的setRequestHeader()方法设置为application/x-www-form-urlencoded，也就是表单提交时的内容类型。

        2、以适当的格式创建一个字符串，post数据的格式与get查询字符串格式相同，名值对都需要使用encodeURIComponent()方法进行编码，以和号(&)分隔拼成字符串。

FormData传送数据:

    FormData是一个构造函数，它的实例有一个append(键，值)方法：分别对应表单字段的名字和字段中包含的值，可以通过这个方法给实例添加多个键值对。也可以向FormData构造函数中传入表单元素，用于将表单元素的所有键值对传入其中。创建了实例以后可以将它直接传给XHR的send()方法。使用了FormData之后，不需要明确的在XHR对象上设置请求头部。XHR对象能够识别传入的数据类型是FormData的实例，并配置适当的头部信息。

超时设定：

以下都是XHR对象的属性或者方法：

    timeout：给这个属性设置一个数值，表示在等待多少毫秒之后还没有响应就会终止，并且触发XHR的timeout事件处理程序。

    timeout：这是XHR对象的事件处理程序，超时就会触发这个事件。

进度事件：

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

progress：在接收响应期间持续不断的触发，必须在open()方法之前添加这个监听事件。这个事件有event对象，其中包含三个额外的属性：

    lengthComputable：表示进度信息是否可用的布尔值。

    position：表示已经接收的字节数。

    totalSize：表示根据Content-Length响应头部确定的预期字节数。

    chrome用total、loaded、lengthComputable这三个属性表示上列的信息。

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

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

load:在接收到完整的响应数据时触发。只要浏览器接收到服务器的响应，不管状态如何，都会触发load事件。必须要检查status属性，才能确定数据是否真的可用了。

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

跨域源资源共享：

在发送请求时，需要给它附加一个Origin头部，其中包含请求页面的完整地址。如果服务器认为这个请求可以接受，就在Access-Control-Allow-Origin头部中回发相同的源信息，也就是地址(如果是公共资源，可以回发*)。如果没有这个头部，或者有这个头部但源信息不匹配，浏览器就会驳回请求。请求和响应都不包含cookie信息。

跨域安全限制：

1、不能使用setRequestHeader()设置自定义头部，否则会返回空。

2、不能发送和接收cookie。

3、调用getAllResponseHeaders()方法总会返回空字符串。

Preflignted Requests：

CORS通过一种叫做Preflignted Requests的透明服务器验证机制支持开发人员使用自定义的头部、GET或POST之外的方法，以及不同类型的主体内容。在使用下列高级选项来发送请求时，就会向服务器发送一个Preflight请求。这种请求使用OPTIONS方法，发送下列头部。

Origin：与简单的请求相同。

Access-Control-Request-Method：请求自身使用的方法。

Access-Control-Request-Headers：(可选)自定义的头部信息，多个头部信息以逗号分隔。

发送这个请求后，服务器可以决定是否允许这种类型的请求。服务器通过在响应中发送如下头部信息与浏览器沟通。

Access-Control-Allow-Origin：与简单的请求相同。

Access-Control-Allow-Methods：允许的方法，多个方法以逗号分隔。

Access-Control-Allow-Headers：允许的头部信息，多个头部信息以逗号分隔。

Access-Control-Max-Age：应该将这个Preflight请求缓存多长时间(以秒表示)。

Preflight请求结束后，结果将按照响应中的指定时间缓存起来。而为此付出的代价只是第一次发送这种请求时会多一次HTTP请求。

带凭据的请求：

默认情况下，跨域请求不提供凭据(cookie、HTTP认证及客户端SSL证明等)。通过将XHR的withCredentials属性设为true，可以指定某个请求应该发送凭据。如果服务器接受带凭据的请求，会用下面的HTTP头部来响应。

Access-Control-Allow-Credentials：true

如果发送的事带凭据的请求，但服务器响应中没有包含这个头部，那么浏览器就不会把响应交给JavaScript(于是，responseText中将是空字符串，status的值为0，而且会调用onerror事件处理程序)。

其它跨域技术

图像ping

创建一个图片，然后通过指定图片的src来发起请求，这样子的请求是不受同源策略影响。从而可以发起请求，但是发起请求后得不到信息，只能通过load或者error事件得到是否成功。

JSONP

创建一个script元素，然后指定src，通过返回的信息是在script标签内的，就会执行相应的内容，从而可以调用指定函数，并且通过参数传入数据。

Ajax和Comet:

SSE(服务器发送事件)：

这个事件是服务器能不间断的给客户端发送信息，发送的信息MIME类型必须是text/event-stream(data: foo)，并且保持域服务器的活动链接，只能服务器给客户端发送。这个API需要创建一个新的EventSource对象，并且在实例化的时候传入连接的URL，这个对象有三个事件：

open：在建立连接时触发。

message：在从服务器接收到新事件时触发。

error：在无法建立连接时触发。

这个对象还可以通过close方法断开连接。

Web Sockets：

它可以实现持久连接提供双向通信，但是它必须使用Web Socket协议。要创建Web Sockets，先实例一个WebSocket对象并传入要连接的URL。这个对象有这几个方法：

close():关闭Web Socket连接。

send(要发送的数据)：向服务器发送数据，只能发送纯文本数据，可以传入json数据。

WebSocket对象还有这几个事件：

message:当服务器向客户端发来消息时，WebSocket对象就会触发这个事件。传入的数据存放在event.data属性中。只能是纯文本数据，可以传入json数据。

open：在成功建立连接时触发。

error：在发生错误时触发，连接不能持续。

close：在连接关闭时触发。事件对象中包含着额外的三个属性：

wasClean：是一个布尔值，表示连接是否已经明确的关闭。

code：服务器返回的数值状态码。

reason：服务器发回的信息。

WebSocket对象不支持DOM2级事件监听，因此只能用DOM0级语法定义每个事件处理程序。