前后端数据交互技术——AJAX（二）

设置请求头

通过XMLHttpRequest对象，中的setRequestHeader(key,value)方法进行设置，如下所示

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

自定义头部信息引发的错误

一般浏览器为了安全都会限制请求头的信息，只有预定义的头部信息能通过，自定义的头部信息则会报错。
解决办法就是在服务端设置响应头，允许所有的头部信息通过，代码如下：

res.setHeader('Access-Control-Allow-Header','*');

执行以上代码后发现还是报错，这是因为多了个options类型的请求，只需要把服务端的接受post请求的方法改为all即可。

荷载参数的请求

使用XMLHttpRequest中的send()方法发送请求时，在括号中添加参数，如下所示：

xhr.send('username=malerain&password=123456');

对象作为参数进行传输

发送

对象不能直接作为参数进行传输，需要在传输之前将对象转为JSON字符串，再进行传输。代码如下所示：

// 创建对象
var data = {
    name:'X',
    age:19,
    sex:'男',
    maritalStatus:'single'
}
// 将对象转为JSON字符串
data = JSON.stringify(data);
 
// 将字符串发送
xhr.send(data);

接收

成功发送后，接收到的是一个JSON字符串，字符串是无法作为对象直接使用的。要将得到的JSON先进行解析，才能使用。解析字符串有以下两种方法：

第一种 手动转换

使用JSON.parse()进行解析。如下所示：

let data = JSON.parse(jsonstr);

第二种 自动转换

设置响应体的类型为json，这样获取的数据就自动解析成对象了。如下所示：

xhr.responseType('json');

设置请求超时以及请求超时事件

可以通过XMLHttpRequest当中的timeout属性设置请求超时。如下所示，设置两秒内未响应则请求超时。

xhr.timeout = 2000;

对于请求超时一般还会有相应的提示，这时就需要使用到超时的监听事件ontimeout。如下所示，如果请求超时，则弹出提示框。 ``` xhr.ontimeout = function(){ alert('你的网络似乎出现了一点问题...'); } ```

取消请求

可以通过XMLHttpRequest对象中的abort()方法，对于即将发送的请求进行取消。代码如下：

xhr.abort();

关于ajax重复发送请求的问题

设有一个按钮用于发送请求，当用户疯狂点击按钮的时候会不断发送请求，这时就会造成服务器压力过大。解决办法就是当发送请求时，取消上一次未请求成功的请求。