开头:
学了好久的AJAX,最近在买的红宝书回来之后又看了一遍AJAX完后配合着w3c上的ajax教程想着总结点东西emmm,看看有多少能变自己的东西,那么我的第一篇博客开始啦!
xhr的用法:
在使用XHR对象时候,我们第一个调用的方法应该是open()了,它接受三个参数,第一个是要指定请求的类型,我们暂称它为method,第二个就是你要请求的地址URL,最后就是表示是否异步发送请求的布尔值了(为了方便称呼我们这里叫他为异步的英语单词async)。
xhr.open("method","url",async);
下面我们来详细解析一下open的用法:
method: 用于指定 HTTP 请求的方法,不区分大小写;
该参数的可取的值包括了:"GET","POST","HEAD","PUT","OPTIONS","DELETE",其中我们常用的是post请求和get请求这两种。
URL:用于指定 HTTP 请求的 URL 地址,可以是 绝对URL 或 相对URL;
绝对URL:需要满足 "同源策略"(服务器明确允许跨域请求的情况除外);
相对URL:即相对于文档的 URL。
async:这个参数是可选的,可用布尔值指定脚本是否以异步的方式调用此次 Ajax 请求;
该参数默认为 true,表示异步调用此次 Ajax 请求,不阻塞后续脚本的执行。
这里要注意如果想发送post请求的话还需要有一个 请求头,像这样:
var xhr = new XMLHttpRequest();//创建xhr对象
xhr.open("get","url",false);//get方法,不用下面的请求头
xhr.open("post","url",true);//post方法
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //请求头
那么接下来,我们就要调用send()方法了,
xhr.open("get","url",false);
xhr.send(null);
我们这次发送的请求是同步的,js的代码会在服务器响应之后再继续执行。收到响应后,响应的数据会自动填充XHR对象的几个属性,相关的属性介绍如下:
responseText:作为响应主体被返回的文本。
responseXML:如果响应的内容类型是"text/xml"或"application/xml",这个属性中将保存包含着响应数据的XML DOM文档。
status:响应的HTTP状态。
statusText:HTTP状态的说明。
在我们接收响应的时候,第一时间应该检查status属性来确定响应是否已成功返回,一般来说我们将HTTP状态码为200作为成功的标志。此时,responseText属性的内容已经准备好了,而且在内容类型正确的情况下,responseXML也应该能够访问了。为确保接收到适当的响应,应该像这样来检查一下状态代码:
xhr.open("get","url",false);
xhr.send(null);
if(xhr.status>=200&&xhr.status<300)||xhr.status==304{
alert(xhr.responseText);
}else{
alert("请求不成功:"+xhr.status);
}
像前面这样发送同步请求的话应该是没什么问题了,可是在多数情况下我们还是需要发送异步请求,才能让js继续执行而不必等待响应了,这个时候我们就可以检测XHR对象的readyState属性,这个属性表示请求和响应过程中的活动阶段。这个属性的详情如下:
0:未初始化。尚未调用open()方法。
1:启动。已经调用open()方法但是未调用send()方法。
2:发送。已经调用send()方法,但尚未接收到响应。
3:接收。已经接收到部分响应数据。
4:完成。已经接收到全部响应数据,而且已经可以在客户端使用了。
每次的readyState值的变化都会触发一次readystatechange事件。于是我们可以用这个事件来检测变化后readyState的值。
结尾:
第一次就简简单单的写到这里叭,虽然很多都是书上有的东西,可是都是本小白觉得有用的东西,可以理解为划重点叭,emmmm如果有哪个地方有误或者其他问题的,欢迎指正0.0。