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);
})