Ajax原生代码以及封装调用

AJAX原生代码（底层原理）：

 <script>
       //js中问题的解决方案:console.log(),debugger,排除法
       function doAjaxStart(){
          debugger //js中断点
          // console.log("==doAjaxStart()==")
          //初始化span标记内部内容(可选)
          let span=document.getElementById("result");
          span.innerHTML="Data is loading....."
         //创建XHR对象
          let xhr=new XMLHttpRequest();
         //设置状态监听
          xhr.onreadystatechange=function(){
              //readyState==4表示服务端响应到客户端的数据已经接收完成
              //status==200 表示服务端处理过程OK的,500表示异常
              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);
           //console.log("==main==")
       }
  </script>

原生的get,post,delete,update请求

<script>
      //更新
      function doAjaxPut(){
          //1.创建XHR对象
          let xhr=new XMLHttpRequest();
          //2.设置状态监听
          xhr.onreadystatechange=function(){
              if(xhr.readyState==4){
                  if(xhr.status==200){
                      let div=document.getElementById("result");
                      div.innerHTML=xhr.responseText;
                  }
              }
          }
          //3.建立连接
          let params="id=101&city=tianjin"
          xhr.open("put",`http://localhost/doAjaxPut`,true);
          //put请求必须要设置请求头
          xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
          //4.发送请求
          xhr.send(params);//put请求可以将参数放到send方法内部
      }

      function doAjaxDelete(){
          debugger
          //1.创建XHR对象
          let xhr=new XMLHttpRequest();
          //2.设置状态监听
          xhr.onreadystatechange=function(){
              if(xhr.readyState==4){
                  if(xhr.status==200){
                      let div=document.getElementById("result");
                      div.innerHTML=xhr.responseText;
                  }
              }
          }
          //3.建立连接
          //let params="b";
          let params="102";
          xhr.open("delete",`http://localhost/doAjaxDelete/${params}`,true);
          //4.发送请求
          xhr.send(null);
      }
      function doAjaxPostJson(){
          //1.创建XHR对象
          let xhr=new XMLHttpRequest();
          //2.设置状态监听
          xhr.onreadystatechange=function(){
              if(xhr.readyState==4){
                  if(xhr.status==200){
                      let div=document.getElementById("result");
                      div.innerHTML=xhr.responseText;
                  }
              }
          }
          //3.建立连接
          let params={id:103,city:"xiongan"}
          let paramsStr=JSON.stringify(params);//将json对象转换为json字符串
          console.log("jsonStr",paramsStr);
          xhr.open("post",`http://localhost/doAjaxPostJSON`,true);
          //post请求必须要设置请求头
          xhr.setRequestHeader("Content-Type","application/json");
          //4.发送请求
          xhr.send(paramsStr);//post请求可以将参数放到send方法内部
      }
      function doAjaxPost(){
          //1.创建XHR对象
          let xhr=new XMLHttpRequest();
          //2.设置状态监听
          xhr.onreadystatechange=function(){
              if(xhr.readyState==4){
                  if(xhr.status==200){
                      let div=document.getElementById("result");
                      div.innerHTML=xhr.responseText;
                  }
              }
          }
          //3.建立连接
          let params="id=102&city=shenzhen"
          xhr.open("post",`http://localhost/doAjaxPost`,true);
          //post请求必须要设置请求头
          xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
          //4.发送请求
          xhr.send(params);//post请求可以将参数放到send方法内部
      }

      function doAjaxGet(){
          debugger
          //1.创建XHR对象
          let xhr=new XMLHttpRequest();
          //2.设置状态监听
          xhr.onreadystatechange=function(){
              if(xhr.readyState==4){
                  if(xhr.status==200){
                    let div=document.getElementById("result");
                    div.innerHTML=xhr.responseText;
                  }
              }
          }
          //3.建立连接
          //let params="b";
          let params="";
          xhr.open("Get",`http://localhost/doAjaxGet/${params}`,true);
          //4.发送请求
          xhr.send(null);
      }
  </script>

通过JQuery封装后的调用：

这段虽然比较复杂，但是是最为灵活的代码，可以根据参数的设置而觉得这段代码的功能是什么。

<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>

jquery中的post,get请求

注意：如果说提示$符号不存在，需要重新build项目，原因是static中jquery.js没有导入成功。

<script>
       function doLoad(){
           let requestUrl="/doAjaxGet";
           //load函数会在指定位置通过ajax方法加载数据,并将数据更新到这个位置
           $("#result").load(requestUrl,function(){//可选
               console.log("==load complete==");//加载完成以后执行
           });
       }
       function doPost(){
           let requestUrl="/doAjaxPost";
           let params="id=104&city=shijiazhuang";
           $.post(requestUrl,params,function(result){
               alert(result);
           })
       }
       function doGet(){
           let requestUrl="/doAjaxGet";
           let params="";
           $.get(requestUrl,params,function(result){
               $("#result").html(result);
           },"text");//默认为json
       }

       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>

 <script>
       var cityColumns=[{title:"id"},{title:"city"},{title:"operation"}];
       $(function(){ //页面加载完成以后执行
           debugger
           doInit("city-table",cityColumns);//创建thead,tbody
           //异步加载服务端数据
           doLoadCitys();
       })
       //异步加载服务端citys信息
       function doLoadCitys(){
           $.ajax({
              url:"/doAjaxGet",
              success(result){//readyState==4 && status==200
                 //console.log(result);
                 doSetTableBodyRows($("#city-table>tbody"),result);
              }
           });
       }
       //将服务端响应的结果更新到页面table的tbody位置
       function doSetTableBodyRows(tBody,result){
           //清空tbody原有内容
          tBody.empty();
          //迭代服务端的响应结果，并将其追加到tbody
          //方法1
          // for(let i=0;i<result.length;i++){
          //      tBody.append(doCreateRow(result[i]));
          // }
          //方法2
          //  result.forEach(function(item) {
          //      tBody.append(doCreateRow(item));
          //  })
          //方法3
          result.forEach(item=>tBody.append(doCreateRow(item)));
       }
       function doCreateRow(row){
           return `<tr>
                      <td>${row.id}</td>
                      <td>${row.city}</td>
                      <td><a href='javascript:doDeleteById(${row.id})'>delete</td>
                   </tr>`
       }
       function doDeleteById(id){
           $.ajax({
               url:`/doAjaxDelete/${id}`,
               method:"delete",
               success(result){
                   alert(result);
                   doLoadCitys();//刷新
               }
           })
       }
   </script>