Ajax技术应用

一、Ajax的请求方法和响应

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

二、Ajax模板的四个步骤

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

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

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

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

 1 let xhr=new XMLHttpRequest();
 2 xhr.onreadystatechange=function(){
 3    if(xhr.readyState==4){
 4       if(xhr.status==200){
 5          console.log(xhr.responseText);
 6       }
 7    }
 8 }
 9 xhr.open("GET",URL,TRUE);
10 xhr.send(null);

JavaScript脚本元素

 1 <script>
 2        //js中问题的解决方案:console.log(),debugger,排除法
 3        function doAjaxStart(){
 4           debugger //js中断点
 5           //初始化span标记内部内容(可选)
 6           let span=document.getElementById("result");
 7           span.innerHTML="Data is loading....."
 8          //创建XHR对象
 9           let xhr=new XMLHttpRequest();
10          //设置状态监听
11           xhr.onreadystatechange=function(){
12               if(xhr.readyState==4&&xhr.status==200){
13                   span.innerHTML=xhr.responseText;
14               }
15           }
16            const url="http://localhost/doAjaxStart";
17           //建立连接
18            xhr.open("GET",url,true);//true 表示异步
19           //发送请求
20            xhr.send(null);
21        }
22   </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函数

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