原生Ajax请求流程：同步请求、异步请求「建议收藏」

大家好，欢迎来到IT知识分享网。

• Ajax
  • 异步无刷新技术
  • 原生Ajax的实现流程
    • 得到XMLHttpRequest对象
      – var xhr = new XMLHttpRequest();
    • 打开请求
      – xhr.open(method,url,async);
      – method:请求方式，通常是GET|POST
      – url：请求地址
      – async：是否异步。如果是true，表示异步，false表示同步
    • 发送请求
      – xhr.send(params);
      – params:请求时需要传递的参数
      – 如果是GET请求，设置null(GET请求设置在url后面)
      – 如果是POST请求，无参数设置为null，有参数则设置参数
    • 接受响应
      – xhr.status xiangy状态（状态码）
      – xhr.responseText 得到响应结束
• 同步请求

<script type="text/javascript"> /** * 同步请求 */ function test01() { 
      //得到XMLHttpRequest对象 var xhr = new XMLHttpRequest(); console.log(xhr.readyState);//准备状态 //打开请求 xhr.open('GET','js/data.json',false); //同步请求 console.log(xhr.readyState);//准备状态 // 发送请求 xhr.send(null); console.log(xhr.readyState);//准备状态 // 判断响应状态 if(xhr.status == 200){ 
      console.log(xhr.readyState);//准备状态 // 获取响应结果 console.log(xhr.responseText); }else{ 
      console.log("状态码："+xhr.status+",原因:"+xhr.responseText); } console.log("同步请求。。。。"); } // 同步请求 test01(); </script>

IT知识分享网

• 异步请求

IT知识分享网<script type="text/javascript"> /** * 异步请求 */ function test02(){ 
      //得到XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // console.log(xhr.readyState);//准备状态 //打开请求 xhr.open('GET','js/data.json',true); //异步请求 // console.log(xhr.readyState);//准备状态 // 发送请求 xhr.send(null); /** * 由于是异步请求，所以需要知道后台已经将请求处理完毕，才能获取响应结果 * 通过监听readyState的变化来得知后面的处理状态（4表示完全处理成功） * xhr.onreadystatechange = function(){ * } */ xhr.onreadystatechange = function(){ 
      // 当readySate的值为4时，表示结果成功响应 if( xhr.readyState == 4){ 
      // 判断响应状态 if(xhr.status == 200){ 
      // console.log(xhr.readyState);//准备状态 // 获取响应结果 console.log(xhr.responseText); }else{ 
      console.log("状态码："+xhr.status+",原因:"+xhr.responseText); } } } // console.log(xhr.readyState);//准备状态 console.log("异步请求。。。。"); } // 异步请求 test02(); </script>