JavaScript中的HTTP

浏览器在XMLHttpRequest类上定义了它们的HTTP API

常用的三个方法

GET,POST不用说

HEAD:请求资源的首部信息，通常用来判断资源的大小以决定是否要下载，以此节约资源。请求方式类似GET,无需发送请求体，且无响应主体

发送请求

GET,HEAD:

function get(url,callback,params){
    var request=new XMLHttpRequest();
    request.open("GET"/*HEAD*/,url/*+?params+*/);
    request.send(null);
}

POST:

function post(url,callback,params){
    var request=new XMLHttpRequest();
    request.open("POST",url);
    request.setRequestHeader("Content-type","text/plain;charset=UTF-8");
    request.send(params);
}

请求主体

表单编码请求:借助encodeURIComponent对参数进行编码。注：POST请求头设置为application/x-www-form-urlencoded

JSON编码请求：POST请求头设置为application/json。借助JSON.stringify()将数据转换为JSON格式

文件上传：借助HTML元素上<input type="file">上的files属性

multipart/form-data请求:借助FormData对象，设置为键值对形式。注：传入FormData对象时，send()会自动设置Content-type

获得响应

function post(url,callback,params){
    var request=new XMLHttpRequest();
    request.open("POST",url);
    request.onreadystatechange=function(){
        //判断响应状态码
        if(request.readyState===request.DONE&&request.status===200){
            //获取响应头中的响应内容类型
            var type=request.getResponseHeader("Content-type");
            //如果是文本类型
            if(type.match(/^text/)){
                //将响应主体传送给回调函数，注：HEAD无响应主体
                callback(request.responseText/*响应主体为文本*/);
                //callback(request.responseXML/*响应主体为XML*/);
            }
        }
    }
    request.setRequestHeader("Content-type","text/plain;charset=UTF-8");
    request.send(params);
}

响应内容三部分组成：状态码，响应头，响应主体。

默认异步响应，同步响应只需在open()方法中设置第三个参数false。

readyState和readystatechange

只要readyState发生变化，readystatechange事件就会被调用

请求取消方法abort()可能会触发readystatechange事件

响应信息

responseText:返回一个DOMString,在请求完成之前将会得到部分属性

responseType:返回值的类型，可以设置返回的类型，例如：blob,document,text

responseURL:若有重定向，则返回重定向后的url，若没有，则返回url,任意跟在url后面的fragment都会被删除

responseXML:返回HTML或XML的DOM文档

HTTP进度事件

XMLHttpRequest对象在请求不同的阶段触发不同事件

XMLHttpRequest对象也定义了upload属性，upload是一个对象，定义了addEventListener()方法和整个progress事件集合。用于监控文件上传进度事件

请求成功：send()时触发loadstart()事件，加载服务器响应时，触发progress事件，事件完成，触发load事件

请求失败：

HTTP无法完成请求的3种情况：

请求超时触发timeout事件

请求中止触发abort事件

网络错误触发error事件

上述任意事件发生后触发一个loadend事件

事件对象：除了JavaScript事件对象常见的type和timestamp属性。还有loaded(传输的字节数值)，total(“Content-Length”头传输的数据的整体长度)，lengthComputable（知道内容长度为true,否则为false）

有用的响应状态码

304：无需再次请求传输内容，即能够使用缓存的内容

跨域的HTTP请求

跨域资源共享CORS

简单请求：

请求报文的Origin字段，响应报文的Access-Control-Allow-Origin

Access-Control-Allow-Origin:* 表示可以接受任意外域的访问

Access-Control-Allow-Origin：<Origin>表示只接受来自Origin中域的访问

预检请求：略

附带身份凭证的请求：

设置XMLHTTPRequest对象的withCredentials为true，从而向服务器发送cookie。该属性也可以用来测试浏览器是否值支持CORS

类似于简单请求，响应报文中多了Access-Control-Allow-Credentials字段，如果缺失该行信息，响应内容不会发送给请求发起者

H5中，一些元素例如<img>和<video>均有跨域属性crossOrigin,该属性有两个值：anonymous和use-credentials,即不设置凭据和设置凭据。

以上更详细的解释请查阅：

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS#Preflighted_requests

JSONP

借助<script>的src属性。优点：1不受同源策略的影响 2包含JSON编码的数据会自动解码.

使用<script>元素调用数据时，响应内容必须用JavaScript函数名和圆括号包裹起来。注：此函数名允许客户端指定，并附在查询参数后

[1,2,{"buckle":" my shoe"}] =>handleResponse([1,2,{"buckle":" my shoe"}] )

在请求时，通过url后面附加一个"?json"来通知服务器应该返回一个JSONP响应

跨域消息传递postMessage()方法

指定源匹配后，调用postMessage方法时，会在目标窗口上触发message事件

事件对象：

data消息副本，source消息源自的window对象，origin URL形式的消息来源