ajax实例

  ajax是一种异步的网页交互手段,遵守同源策略,现各大浏览器都支持。

  ajax是一种客户端(浏览器端)和服务端通信技术

  使用ajax的时候需要先创建ajax实例,除ie5-6,需要使用ActiveXObject(),创建,其他的需要使用XMLHttpRequest()创建,创建ajax实例,需要用到new关键字。

  XMLHttpReuqest的核心属性:

    xhr.responseText:服务器端相应数据

    xhr.responstXML:text/xml

    xhr.status: http相应状态

    xhr.statusText:  http状态说明

    xhr.readystate:

      new xhr()  //0

      open()     //1

      send()  //2

      接收相应    //3

      相应接受完毕  //4

  XMLHttpRequest核心方法:

    xhr.open()    //发送请求,get传null,post传参数

    xhr.send();  //接受响应前执行abort终止xhr后续操作和访问

    xhr.abort();

    //reasState状态变更事件  

    xhr.onreadystatechange()

    对应以上状态的变化

    0.创建xhr ----new XMLHttpRequest() , onreadystatecange

    1.初始化请求 ----open()

    2.发送请求 ---- send()

    3.接受返回数据 ---- readyState ==3

    4.接受完毕 ----readyState ==4  onreandystatechange函数内容

  代码示例

    //封装兼容低版本IE浏览器的xhr函数。

    //ie低版本支持参数:“MSXML.XMLHttp.6.0”,"MSXML.XMLHttp.3.0",“MSXML>XMLHttp”

    function createXhr(){

      if(typeof XMLHttpRequest != 'undefined'){

        return new XMLHTTPRequest();

      }else if(typeof ActiveXObject != 'undefined'){

        var  tmp = '',

          //低版本IE使用ActiveXObject.传参方式创建xhr对象,主要支持一下参数;

          strList ==['MSXML.XMLHttp..0','MSXML.XMLHttp.3.0','MSXML.XMLHttp'];

         for (var n in strList){

            //异常处理,'try'

            中代码出现异常会执行catch中的代码,而不会影响到外部后续代码执行

            try{

              new ActiveXObject(strList[n]);

              var tmp = strList[n];

              break;

            }catch(e){

              console.log(e);

            }

         }

         if(tmp = ''){

           console.log('您的浏览器目前不支持ajax请求');

         }else{

            return new ActiveXObject(tmp);

         }

      }else{

        console.log('您的浏览器目前不支持ajax请求');

      }

    }

    //封装公共请求函数

    function sendRequest(callback){

      var xhr = createXhr();

      //绑定readyState监听事件

      xhr.onreadystatechange = function(){

        if(xhr.status == '200'  || xhr.status =='304' ){

          if(xhr.readyState =='4'){

            //JSON.parse();

            callback && callback(JSON.parse(xhr.responseText));

          }

        } 

      };

      //请求对象初始化

      xhr.open("get","ajaxText.json",false);

      //发送请求

      xhr.send();

    }

    

     

原文地址:https://www.cnblogs.com/browse/p/10143070.html