加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

原生ajax

发布时间:2020-12-15 21:39:16 所属栏目:百科 来源:网络整理
导读:1.创建XMLHttpRequest对象 Js代码 span style="font-size:14px;" function createXMLHTTPRequest() { //1.创建XMLHttpRequest对象 //这是XMLHttpReuquest对象无部使用中最复杂的一步 //需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码 var

1.创建XMLHttpRequest对象

Js代码
<span style="font-size:14px;">    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;  
                 }     </span>

2.get请求

Js代码

<span style="font-size:14px;">    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);  
        }  
    }  </span>

3.post请求

Js代码

 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——服务器产生内部错误

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读