Ajax全接触

(1)XMLHttpRequest对象的创建(XHR)

1 var request;
2 if(window.XMLHttpRequest){
3     request= new XMLHttpRequest();//ie7+,ff,chrome,opera,safari.
4 }else{
5     request = new ActiveXObject("Microsoft.XMLHTTP");//ie5 6
6 }

 

(2)XHR发送请求

open（method，url，async）

method="get","post","Get","Post",一般大写

url=绝对地址,相对地址

async=true,异步

设置http请求头信息

发送表单信息
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded")

 

 1 <script>
 2 document.getElementById("search").onclick = function() { 
 3     var request = new XMLHttpRequest();
 4     request.open("GET", "server.php?number=" + document.getElementById("keyword").value);
 5     request.send();
 6     request.onreadystatechange = function() {
 7         if (request.readyState===4) {
 8             if (request.status===200) { 
 9                 document.getElementById("searchResult").innerHTML = request.responseText;
10             } else {
11                 alert("发生错误：" + request.status);
12             }
13         } 
14     }
15 }
16 
17 document.getElementById("save").onclick = function() { 
18     var request = new XMLHttpRequest();
19     request.open("POST", "server.php");
20     var data = "name=" + document.getElementById("staffName").value 
21                       + "&number=" + document.getElementById("staffNumber").value 
22                       + "&sex=" + document.getElementById("staffSex").value 
23                       + "&job=" + document.getElementById("staffJob").value;
24     request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
25     request.send(data);
26     request.onreadystatechange = function() {
27         if (request.readyState===4) {
28             if (request.status===200) { 
29                 document.getElementById("createResult").innerHTML = request.responseText;
30             } else {
31                 alert("发生错误：" + request.status);
32             }
33         } 
34     }
35 }
36 </script>

View Code