Ajax

ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，ajax可以使网页实现异步更新，这就意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

同步：
例如一个服务员对多个顾客进行服务，服务完一个才能再对下一个顾客进行服务。

网页的同步请求操作（ajax同步请求操作）：
js发送一个请求去请求数据——js等待后台返回数据——js处理完返回数据后再执行后面的操作

异步：（高效）
例如一个服务员可以同时对多个顾客进行服务，不需要等待将一个顾客的服务做完。

网页的异步请求操作（ajax异步请求操作）：
js发送一个请求去请求数据——js不等待后台返回数据——js执行后面的操作——后台返回数据后，js处理完返回的数据

Ajax流程：
1、创建ajax对象
2、设置请求，发送请求地址，发送请求的方式
3、发送数据
4、设置监听事件，监听后台是否返回数据
5、处理数据

//1、创建xhr对象
var xhr=new XMLHttpRequest();
//2、设置请求的方法和路径
xhr.open("GET","http://127.0.0.1:8848/1ajax/abc.txt");
//GET和POST的区别：GET是将表单提交的数据拼接到请求的路径里面（提交的数据少 效率高） POST是将表单的数据放在请求的body里面（数据大 安全）
//3、发送数据(也可以不发数据)
xhr.send("username=admin&password=12345");
//xhr.send();
//4、监听后台是否返回数据
xhr.onreadystatechange=function(){
  if(xhr.status==200&&xhr.readyState==4){
       console.log("成功获取数据");
       console.log(xhr);
       console.log(xhr.status);
       console.log(xhr.readyState);
   //检查status和readyState的状态 200正常 404找不到路径 403禁用 没有权限
   //5、处理数据
   var res=xhr.response;
   var h1=document.createElement(“h1”);
   h1.innerHTML=res;
   document.body.appendChild(h1);
   }
 }

封装ajax

function  getAjax(httpUrl,callbackFn){
  var xhr=new XMLHttpRequest();
  xhr.open("GET",httpUrl);
  xhr.send();
  xhr.onreadystatechange=function(){
  if(xhr.status==200&&xhr.readyState==4){
        callbackFn(xhr);
  }  
}

var httpUrl="http://api.apionpen.top/getJoke?page=1&count=2&type=video";
getAjax(httpUrl,function(xhr){
   console.log(xhr);//得到json字符串数据
   var datiObj=JSON.parse(xhr.response);//将json字符串转化为对象
   console.log(datiObj);
})