AJAX原生态编写

Posted 2020-07-07 有何不可_2016

1. function createXMLHTTPRequest() {     
2.                  //1.创建XMLHttpRequest对象     
3.                  //这是XMLHttpReuquest对象无部使用中最复杂的一步     
4.                  //需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码     
5.                  var xmlHttpRequest;  
6.                  if (window.XMLHttpRequest) {     
7.                      //针对FireFox，Mozillar，Opera，Safari，IE7，IE8     
8.                     xmlHttpRequest = new XMLHttpRequest();     
9.                      //针对某些特定版本的mozillar浏览器的BUG进行修正     
10.                      if (xmlHttpRequest.overrideMimeType) {     
11.                          xmlHttpRequest.overrideMimeType("text/xml");     
12.                      }     
13.                  } else if (window.ActiveXObject) {     
14.                      //针对IE6，IE5.5，IE5     
15.                      //两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中     
16.                      //排在前面的版本较新     
17.                      var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];     
18.                      for ( var i = 0; i < activexName.length; i++) {     
19.                          try {     
20.                              //取出一个控件名进行创建，如果创建成功就终止循环     
21.                              //如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建     
22.                             xmlHttpRequest = new ActiveXObject(activexName[i]);   
23.                             if(xmlHttpRequest){  
24.                                 break;  
25.                             }  
26.                          } catch (e) {     
27.                          }     
28.                      }     
29.                  }     
30.                  return xmlHttpRequest;  
31.              }     

32. function createXMLHTTPRequest() {   
                     //1.创建XMLHttpRequest对象   
                     //这是XMLHttpReuquest对象无部使用中最复杂的一步   
                     //需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码   
                     var xmlHttpRequest;
                     if (window.XMLHttpRequest) {   
                         //针对FireFox，Mozillar，Opera，Safari，IE7，IE8   
                        xmlHttpRequest = new XMLHttpRequest();   
                         //针对某些特定版本的mozillar浏览器的BUG进行修正   
                         if (xmlHttpRequest.overrideMimeType) {   
                             xmlHttpRequest.overrideMimeType("text/xml");   
                         }   
                     } else if (window.ActiveXObject) {   
                         //针对IE6，IE5.5，IE5   
                         //两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中   
                         //排在前面的版本较新   
                         var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];   
                         for ( var i = 0; i < activexName.length; i++) {   
                             try {   
                                 //取出一个控件名进行创建，如果创建成功就终止循环   
                                 //如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建   
                                xmlHttpRequest = new ActiveXObject(activexName[i]); 
                                if(xmlHttpRequest){
                                    break;
                                }
                             } catch (e) {   
                             }   
                         }   
                     }   
                     return xmlHttpRequest;
                 }   

 

 2.get请求

 

Js代码  

1. function get(){  
2.     var req = createXMLHTTPRequest();  
3.     if(req){  
4.         req.open("GET", "http://test.com/?keywords=手机", true);  
5.         req.onreadystatechange = function(){  
6.             if(req.readyState == 4){  
7.                 if(req.status == 200){  
8.                     alert("success");  
9.                 }else{  
10.                     alert("error");  
11.                 }  
12.             }  
13.         }  
14.         req.send(null);  
15.     }  
16. }  

            function get(){
                var req = createXMLHTTPRequest();
                if(req){
                    req.open("GET", "http://test.com/?keywords=手机", true);
                    req.onreadystatechange = function(){
                        if(req.readyState == 4){
                            if(req.status == 200){
                                alert("success");
                            }else{
                                alert("error");
                            }
                        }
                    }
                    req.send(null);
                }
            }

 

 3.post请求

 

Js代码  

1.    function post(){  
2.     var req = createXMLHTTPRequest();  
3.     if(req){  
4.         req.open("POST", "http://test.com/", true);  
5.         req.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=gbk;");     
6.         req.send("keywords=手机");  
7.         req.onreadystatechange = function(){  
8.             if(req.readyState == 4){  
9.                 if(req.status == 200){  
10.                     alert("success");  
11.                 }else{  
12.                     alert("error");  
13.                 }  
14.             }  
15.         }  
16.     }  
17. }  

               function post(){
                var req = createXMLHTTPRequest();
                if(req){
                    req.open("POST", "http://test.com/", true);
                    req.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=gbk;");   
                    req.send("keywords=手机");
                    req.onreadystatechange = function(){
                        if(req.readyState == 4){
                            if(req.status == 200){
                                alert("success");
                            }else{
                                alert("error");
                            }
                        }
                    }
                }
            }

post请求需要设置请求头

 

4.    readyState与status:

         readyState有五种状态：

　　0 (未初始化)： (XMLHttpRequest)对象已经创建，但还没有调用open()方法；
　　1 (载入)：已经调用open() 方法，但尚未发送请求；
　　2 (载入完成)： 请求已经发送完成；
　　3 (交互)：可以接收到部分响应数据；
　　4 (完成)：已经接收到了全部数据，并且连接已经关闭。
如此一来，你应该就能明白readyState的功能，而status实际是一种辅状态判断，只是status更多是服务器方的状态判断。关于status，由于它的状态有几十种，我只列出平时常用的几种：
　　100——客户必须继续发出请求
　　101——客户要求服务器根据请求转换HTTP协议版本
　　200——成功
　　201——提示知道新文件的URL
　　300——请求的资源可在多处得到
　　301——删除请求数据
　　404——没有发现文件、查询或URl
　　500——服务器产生内部错误