您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例

javascript学习笔记-ajax

发布时间：2018-04-05 18:24:12编辑：雪饮阅读（）

 一个简单的ajax请求

var xhr = new XMLHttpRequest();

//get方式、请求根目录的l.php,同步请求

xhr.open('get','/l.php',false);

//若不需要发送什么数据可以直接null，也可以直接不传参数

xhr.send(null);

ajax请求的取消

var cs=document.getElementById("cs");

   cs.addEventListener('click',function(){

      var xhr = new XMLHttpRequest();

      xhr.open('get','/l.php?l='+Math.random(),true);

      xhr.onreadystatechange=function(){

         alert(xhr.readyState);

      };

      xhr.send();

      //取消异步请求

      xhr.abort();

   },false);

获取响应头

var cs=document.getElementById("cs");

   cs.addEventListener('click',function(){

      var xhr = new XMLHttpRequest();

      xhr.open('get','/l.php?l='+Math.random(),true);

      xhr.onreadystatechange=function(){

         if(xhr.readyState==4 && xhr.status==200){

            //获取响应头信息

            //alert(xhr.getAllResponseHeaders());

            //获取响应头指定字段

            alert(xhr.getResponseHeader('Content-Type'));

         }

        

      };

      xhr.send();

   },false);

设置请求头

window.onload=function(){

   var cs=document.getElementById("cs");

   cs.addEventListener('click',function(){

      var xhr = new XMLHttpRequest();

     

      xhr.onreadystatechange=function(){

         if(xhr.readyState==4 && xhr.status==200){}

      };

     

      xhr.open('get','/l.php?l='+Math.random(),true);

      //设置请求头必须在open之后

      xhr.setRequestHeader("xy",'dmj');

      xhr.send();

   },false);

}

传递特殊字符

var cs=document.getElementById("cs");

   cs.addEventListener('click',function(){

      var xhr = new XMLHttpRequest();

     

      xhr.onreadystatechange=function(){

         if(xhr.readyState==4 && xhr.status==200){

            console.log(xhr.responseText);

         }

      };

      //特殊字符需要编码再传递，否则就会容易解析错误

      var tsfh=encodeURIComponent('&e');

      xhr.open('get','/l.php?l='+Math.random()+'&a='+tsfh,true);

      xhr.send();

   },false);