同步调用相对简单,但使用异步调用才是我们真正常用的手段。使用异步调用的时候,需要触发readystatechange事件,然后检测readyState属性即可。这个属性有五个值:
值 | 状态 | 说明 |
---|---|---|
0 | 未初始化 | 尚未调用open()方法 |
1 | 启动 | 已经调用open()方法,但尚未调用send()方法 |
2 | 发送 | 已经调用send()方法,但尚未接受响应 |
3 | 接受 | 已经接受到部分响应数据 |
4 | 完成 | 已经接受到全部响应数据,而且可以使用 |
addEvent(document,?'click',?function?()?{
var?xhr?=?new?createXHR();
xhr.onreadystatechange?=?function?()?{
if?(xhr.readyState?==?4)?{
if?(xhr.status?==?200)?{
alert(xhr.responseText);
}?else?{
alert('数据返回失败!状态代码:'?+?xhr.status?+?'状态信息:'?
+?xhr.statusText);
}
}
};
xhr.open('get',?'demo.php?rand='?+?Math.random(),?true);
xhr.send(null);
});
PS:使用abort()方法可以取消异步请求,放在send()方法之前会报错。放在responseText之前会得到一个空值。
一.GET与POST
在提供服务器请求的过程中,有两种方式,分别是:GET和POST。在Ajax使用的过程中,GET的使用频率要比POST高。
在了解这两种请求方式前,我们先了解一下HTTP头部信息,包含服务器返回的响应头信息和客户端发送出去的请求头信息。我们可以获取响应头信息或者设置请求头信息。我们可以在Firefox浏览器的firebug查看这些信息。
//使用getResponseHeader()获取单个响应头信息
alert(xhr.getResponseHeader('Content-Type'));
//使用getAllResponseHeaders()获取整个响应头信息
alert(xhr.getAllResponseHeaders());
//使用setRequestHeader()设置单个请求头信息
xhr.setRequestHeader('MyHeader',?'Lee'); //放在open方法之后,send方法之前
PS:我们只可以获取服务器返回回来响应头信息,无法获取向服务器提交的请求头信息,自然自定义的请求头,在JavaScript端是无法获取到的。
GET请求
GET请求是最常见的请求类型,最常用于向服务器查询某些信息。必要时,可以将查询字符串参数追加到URL的末尾,以便提交给服务器。
xhr.open('get',?'demo.php?rand='?+?Math.random()?+?'&name=Koo',?true);
通过URL后的问号给服务器传递键值对数据,服务器接收到返回响应数据。特殊字符传参产生的问题可以使用encodeURIComponent()进行编码处理,中文字符的返回及传参,可以讲页面保存和设置为utf-8格式即可。
//一个通用的URL提交函数
function?addURLParam(url,?name,?value)?{
url?+=?(url.indexOf('?')?==?-1???'?'?:?'&'); //判断的url是否有已有参数
url?+=?encodeURIComponent(name)?+?'='?+?encodeURIComponent(value);
alert(url);
return?url;
}
PS:当没有encodeURIComponent()方法时,在一些特殊字符比如“&”,会出现错误导致无法获取。
POST请求
POST请求可以包含非常多的数据,我们在使用表单提交的时候,很多就是使用的POST传输方式。
xhr.open('post',?'demo.php',?true);
而发送POST请求的数据,不会跟在URL的尾巴上,而是通过send()方法向服务器提交数据。
xhr.send('name=Lee&age=100');
一般来说,向服务器发送POST请求由于解析机制的原因,需要进行特别的处理。因为POST请求和Web表单提交是不同的,需要使用XHR来模仿表单提交。
xhr.setRequestHeader('Content-Type',?'application/x-www-form-urlencoded');
PS:从性能上来讲POST请求比GET请求消耗更多一些,用相同数据比较,GET最多比POST快两倍。
?JSON也可以使用Ajax来建立回调访问。
var?url?=?'demo.json?rand='?+?Math.random();
var?box?=?JSON.parse(xhr.responseText);
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。