Ajax全称Asynchronous Javascript and XML,中文意思为“异步的Javascript 和XML”。 Ajax这组技术是web2.0的核心之一。
减少冗余请求,节省网络带宽,提高网页加载效率,从而缩短用户等待时间,促进页面与数据分离,提高用户体验
1 var xhr=null;
2 if (window.XMLHttpRequest) {
3 //IE7+,Firefox,chrome,Opera,Safari等现代浏览器执行代码
4 xhr=new XMLHttpRequest();
5 }else{
6 //IE6,IE5浏览器执行代码
7 xhr=new ActiveXObject("Microsoft.XMlHTTP");
8 }
9
10 /* 第二种方法
11 xhr=window.XMLHttpRequest ? new XMLHttpRequest() :new ActiveXObject("Microsoft.XMLHTTP");
12 */
13
14 /* 第三种方法:
15 try{
16 xhr=XMLHttpRequest();
17 }catch(e){
18 xhr=ActiveXObject("Microsoft.XMLHTTP");
19 }
20 */
xhr.open(method,url,async);
规定请求的类型、url、是否是异步处理请求; method:GET或者POST,url:文件在服务器上位置,async:true为异步(默认),false为同步
同步和异步 同步:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式。 异步:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯方式
xhr.send(string) 将请求发送到服务器;string:仅用于POST请求
大部分情况下,都能使用GET,并且相比POST更快更简单。
但是,POST运用在以下场景:
如果要通过GET方法来发送信息,需在URL中添加信息:
xhr.open("GET","index.php?name=a&age=b",true);
xhr.send();
如果要像html表单那样POST数据,需使用setRequestHeader(Header,value)来添加HTTP头进行模拟。然后在send()发送你想要发送的数据:
xhr.open("POST","index.php",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("name=a&age=b");
XMLHttpReques对象有responseText和responseXML属性。
服务器响应不是XML,使用responseText属性,以字符串形式返回:
document.getElementById("test").innerHtml=xhr.responseText;
服务器响应是XML,使用responseXML属性:
xmlDoc=xhr.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("test1");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;
XMLHttpRequest对象还有readyState和status属性:
每当readyState属性改变时,就会触发onreadyStateChange事件。
readyState:表示XMLHttpRequest的状态(0,1,2,3,4):
status: 常见200(“OK”),404(未找到页面)
1 xhr.onreadystatechange=function(){
2 if (xhr.readyState==4 && status==200) {
3 document.getElementById("test").innerHtml=xhr.responseText;
4 }
5 }
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>hello</title>
5 <meta charset="utf-8">
6 </head>
7 <body>
8 <script type="text/javascript">
9 function fix(){
10 var xhr=null;
11 if (window.XMLHttpRequest) {
12 xhr=new XMLHttpRequest();
13 }else{
14 xhr= new ActiveXObject("Microsoft.XMLHTTP");
15 }
16 xhr.onreadystatechange=function(){
17 if(xhr.readyState==4 && xhr.status==200){
18 document.getElementById('test').innerHTML=xhr.responseText;
19 }
20 }
21 xhr.open("GET",'test.txt',true);
22 xhr.send();
23 }
24
25 </script>
26 <div id="test">修改内容</div>
27 <button type="button" onclick="javascript:fix()">点击进行修改</button>
28 </body>
29 </html>
ps:这里我将文件1.html和test.txt放置在Xampp下的htdocs目录下,运行xampp control-》开启服务器。
http://localhost/1.html运行代码,得到以下结果:(Status:200;Type:xhr):