原生JS操做AJAX

1，get方式的AJAX

 1 function sendAjaxReq()
 2 {
 3     //1,建立ajax引擎 XMLHttpRequest對象
 4     var req = new XMLHttpRequest() || new ActiveXObject("Msxm12.XMLHTTP");
 5     //2,打開一個請求，此時未發送請求，定義好發送請求的方式以及是否須要攜帶數據 是否同步異步
 6     req.open("get", "testAjax?phone=iphone&apple=pen");
 7     //3,準備好處理服務器返回的數據
 8     req.onreadystatechange = function()
 9     {
10         if(req.readyState == 4)
11         {
12             //返回json數據的解析格式
13             var str = req.responseText;
14             eval("var obj=" + str);
15             alert(obj.name);
16             //返回xml的解析格式
17             var data = req.reponseXML.getElementsByTagName("bigName")[0].first(child.data);
18         }
19     }
20     //4,發送請求,若是是在火狐下，使用get方式發送ajax請求，send的時候括號寫上null
21     req.send(null);
22 }

2，post方式AJAX

 1 //使用post傳參，須要攜帶一個請求頭模擬表單提交
 2 function sendAjax()
 3 {
 4     var request = new XMLHttpRequest() || new ActiveXObject("Msxm12.XMLHTTP"); 
 5     request.open("post", "testAjax?phone=1", true)
 6     request.onreadystatechange = function()
 7     {
 8         if(request.readyState == 4)
 9         {
10             if(request.status == 200)
11             {
12                 var str = request.responseText;
13                 alert(str); 
14             }
15             else if(request.status == 404)
16             {
17                 alert("找不到資源");
18             }
19         }
20     }
21     request.setRequestHeader("content-type", "application/x-www-form-urlencoded")
22     request.send("phone=");
23 }

 

3，封裝了get和post的AJAX

 1 function sendAjaxReq(method,url,param,fun200,fun404,fun500)
 2  {
 3      var req;
 4       if(window.XMLHttpRequest)
 5       {
 6           req = new XMLHttpRequest();    
 7       }
 8           else if(window.ActiveXObject)
 9       {
10          req = new ActiveXObject("Msxml2.XMLHTTP");
11       }
12       req.open(method,url);
13       req.onreadystatechange = function()
14       {
15           if(req.readyState == 4)
16           {
17               if(req.status == 200)
18               {
19                   if(fun200)
20                   {
21                      fun200(req.responseText);
22                   }
23               }
24               else if(req.status == 404)
25               {
26                   if(fun404)
27                   {
28                       fun404();
29                   }
30               }
31               else if(req.status == 500)
32               {
33                   if(fun500)
34                   {
35                       fun500();
36                   }
37               }
38           }
39       }
40       if(method.toUpperCase() == "GET")
41       {
42           req.send(null);
43       }
44       else if(method.toUpperCase() == "POST")
45       {
46           req.setRequestHeader("context-type", "application/x-www-form-urlencoded");
47           req.send(param);
48       }
49   }
50 
51 function testAjax()
52 {
53     sendAjaxReq("get","ajaxServlet?uname=1&password=2",null,function(data)
54     {
55         eval("var obj="+data);
56         alert(obj.data);
57     });
58 }