Ajax基本知识

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");

posted @ 2015-04-22 16:00  Bigdots  阅读(155)  评论(0编辑  收藏  举报