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);
})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值