1.创建xhr对象
1 var xmlhttp; 2 if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari 3 xmlhttp=new XMLHttpRequest(); 4 } 5 else{// code for IE6, IE5 6 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 7 }
2.向服务器发送请求
1 xmlhttp.open(method,url,async); //async取值true或false,true为异步,flase为同步 2 xmlhttp.send(string); //string仅用于post请求
3.判断响应事件(onreadystatechange)
readyState:存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
status:响应http的状态
200: "OK"
404: 未找到页面
1 if (xmlhttp.readyState==4 && xmlhttp.status==200) { 2 .... 3 }
4.获得响应数据
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。内容类型一般为“text/xml”;需要解析:如下
1 xmlDoc=xmlhttp.responseXML; 2 txt=""; 3 x=xmlDoc.getElementsByTagName(" tagname"); 4 for (i=0;i<x.length;i++) 5 { 6 txt=txt + x[i].childNodes[0].nodeValue + "<br>"; 7 }
(responseText返回的是你请求的url指定文件的全部文本,responseXML返回的是你请求的url指定文件的整个DOM对象。)
方法详解:
GET 还是 POST?
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。然而,在以下情况中,请使用 POST 请求:
无法使用缓存文件(更新服务器上的文件或数据库);向服务器发送大量数据(POST 没有数据量限制);发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠;
GET方法:
请求数据:
xmlhttp.open("GET","url?t=" + Math.random(),true);为了避免得到的是缓存的结果,可以向URL 添加一个唯一的ID:
xmlhttp.send();
发送数据(不建议):信息添加在URL中
xmlhttp.open("GET","url?info",true);
xmlhttp.send()
POST方法:
请求数据:
xmlhttp.open("POST","url",true);
xmlhttp.send();
发送数据:需要使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:
xmlhttp.open("POST","url",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("info");