Ajax技术应用

一、Ajax的请求方法和响应

可以同时发送多个请求，客户端不阻塞

 

 

二、Ajax模板的四个步骤

1、基于dom事件创建XHR对象

2、在XHR对象上注册状态监听(监听客户端与服务端的通讯过程)

3、与服务端建立连接(指定请求方式,请求url,同步还是异步)

4、发送请求(将请求数据传递服务端)

let xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
   if(xhr.readyState==4){
      if(xhr.status==200){
         console.log(xhr.responseText);
      }
   }
}
xhr.open("GET",URL,TRUE);
xhr.send(null);

JavaScript脚本元素

<script>
       //js中问题的解决方案:console.log(),debugger,排除法
       function doAjaxStart(){
          debugger //js中断点
          //初始化span标记内部内容(可选)
          let span=document.getElementById("result");
          span.innerHTML="Data is loading....."
         //创建XHR对象
          let xhr=new XMLHttpRequest();
         //设置状态监听
          xhr.onreadystatechange=function(){
              if(xhr.readyState==4&&xhr.status==200){
                  span.innerHTML=xhr.responseText;
              }
          }
           const url="http://localhost/doAjaxStart";
          //建立连接
           xhr.open("GET",url,true);//true 表示异步
          //发送请求
           xhr.send(null);
       }
  </script>

其中,readyState==4表示服务端响应到客户端的数据已经接收完成,status==200 表示服务端处理过程OK的,500表示异常.

 三、jquery中的Ajax

1、jquery简介

jQuery是一个快速、简洁的JavaScript库框架，是一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

2、jquery中Ajax函数

<script src="/js/jquery.min.js"></script>
<script>
     function doAjax(){
          let requestUrl="/doAjaxGet";
          let params="";
          //$符号在这里代表jquery对象
          //ajax({})为jquery种的一个ajax函数,底层封装了ajax请求过程
          $.ajax({
              url:requestUrl,//key必须为url
              data:params,
              //type:"GET",//可以省略,默认为Get请求
              dataType:"text",//服务端响应到客户端的数据格式,默认为json
              //async:true,//默认异步
              //contentType:"application/json",//假如需要向服务端传递json串
               success:function(result){//callback 回调函数
                  console.log("result",result);
                  //JS原生写法
                  //document.querySelector("#result").innerHTML=result;
                  //Jquery种的封装简化写法
                  $("#result").html(result);
              }
          });
          //假如服务端响应到客户端的数据为json格式字符串,底层会默认将其转换为json对象
       }
</script>