zoukankan      html  css  js  c++  java
  • 原生ajax书写

    1.创建XMLHttpRequest对象

    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;  

                 }    

    get请求

    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请求:post请求需要设置请求头

      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=手机");    //post请求方请求头

            req.onreadystatechange = function(){  

    if(req.readyState == 4){  

    if(req.status == 200){  

                        alert("success");  

                    }else{  

                        alert("error");  

                    }  

                }  

            }  

        }  

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

  • 相关阅读:
    五大P2P平台费用一览
    警惕P2B模式
    仿照jquery封装一个自己的js库
    怎样给div增加resize事件
    美化浏览器滚动条效果
    手机端触屏手指滑动方向及拖动层
    JS中原型链中的prototype与_proto_的个人理解与详细总结(**************************************************************)
    JavaScript this用法总结(**************************************)
    js中call、apply、bind那些事2
    深刻理解JavaScript---闭包
  • 原文地址:https://www.cnblogs.com/zhaoleigege/p/7903098.html
Copyright © 2011-2022 走看看