ajax的核心是xmr对象,要调用的第一个方法是open(),他接受3个参数:要发送的请求类型("get","post")、请求的URL和表示是否异步发送请求的布尔值。
xhr("get",url,false);
调用open()方法并不会真正发送请求,而是启动一个请求已备发送,要发送特定请求,必须像下面这样调用send()方法
xhr.send(null);这个null对于某些浏览器是必须的。调用send()方法后,请求就会被分派到服务器。在收到响应后,响应的数据会自动填充xhr对象那个的属性,相关属性如下:
responseText:作为响应主体被返回的文本。
responseXML:如果响应的内容类型是:"text/html"或"application/xml",这个属性中将保存包含响应数据的xmldom文档。
status:响应的http状态(200表示成功,304表示请求的资源并没有修改 ,可以直接使用浏览器中缓存的版本),为了收到适当的响应,应该像下面这样检查上述两张状态代码:
statusText:http状态说明(ok,fail)。
if((xmlHttpReg.status>=200 && xmlHttpReg.status<300 )|| xmlHttpReg.status==304){ // console.log(xmlHttpReg.responseText); document.getElementById("resText").innerHTML = xmlHttpReg.responseText; document.getElementById("box1").innerHTML = xmlHttpReg.status; }else{ console.log("fail"+xmlHttpReg.status) }
根据返回的状态码,可以显示服务端返回的内容,我们建议通过status来决定下一步操作。
上面通过的是同步请求,如果要发送异步请求,我们需要检测readyState属性,该属性表示请求响应过程的当前活动阶段,这个属性可取的值如下:
0:未初始化,尚调用open()方法
1:启动,已经调用open()方法,但尚未调用send()方法;
2:发送,已经调用send()方法,但尚未接收到响应。
3:接收,已经接受到部分响应数据
4:完成,接受到全部数据,而且已经可以在客户端使用了,如下所示:
if(xmlHttpReg.readyState==4) { if ((xmlHttpReg.status >= 200 && xmlHttpReg.status < 300 ) || xmlHttpReg.status == 304) { document.getElementById("resText").innerHTML = xmlHttpReg.responseText; document.getElementById("box1").innerHTML = xmlHttpReg.status; // console.log(xmlHttpReg.responseXML); } else { console.log("fail" + xmlHttpReg.status) } }
只要readyState属性值由一个值变成另外一个值,都会触发onreadystatechange事件。
get请求最常用与向服务器查询某些信息,可以将字符串参数追加到url末尾,以便将信息发送到服务器,判断url后面的参数如下代码
function addURLParam(url,name,value){ url += (url.indexOf("?")==-1? "?":"&"); url +=encodeURIComponent(name)+"="+encodeURIComponent(value); return url; } var url = "b.txt", url = addURLParam(url,"name","zoumm"); xmlHttpReg.open("get", url, true); // xmlHttpReg.setRequestHeader("myheader","myvalue"); xmlHttpReg.send(null); xmlHttpReg.onreadystatechange = doResult; //设置回调函数
post通常用于向服务器发送应该被保存的数据,post请求应该把数据作为请求的主体提交,
详细代码: