AJAX(Asynchronous Javascript And XML),是一个局部刷新技术,即网页不需要重新加载,只进行部分更新即可
通过 AJAX与服务器进行数据交换,AJAX可以使网页实现局部更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
基本原理
Ajax的工作原理相当于在服务器和客户端之间加了一个中间层,由这个中间层操控,使用户操作与服务器端响应异步化。
怎么来实现局部刷新?
通过Ajax XmlHttpRequest 对象,使用这个对象可以异步向服务器发送请求,获取获取响应,完成局部更新。
JavaScript中原生ajax
function f1(){
//1.创建ajax对象
var xmlHttp = new XMLHttpRequest();
//2.绑定监听函数
xmlHttp.onreadystatechange = function(){
//判断数据是否正常返回
if(xmlHttp.readyState==4&&xmlHttp.status==200){
//6.接收数据
var res = xmlHttp.responseText;
document.getElementById("span1").innerHTML = res;
}
}
//3.绑定处理请求的地址,true为异步,false为同步
//GET方式提交把参数加在地址后面?key1:value&key2:value
xmlHttp.open("POST","/ajax/ajax1",true);
//4.POST提交设置的协议头(GET方式省略)
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//POST提交将参数,如果是GET提交send不用提交参数
//5.发送请求
xmlHttp.send("name=zjj&age=18");
}
AJAX状态(READY-STATE)
0 =>UNSENT 刚开始创建XHR,还没有发送
1 =>OPENED 已经执行了OPEN这个操作
2 =>HEADERS_RECEIVED 已经发送AJAX请求(AJAX任务开始),响应头信息已经被客户端接收了(响应头中包含了:服务器的时间、返回的HTTP状态码…)
3 =>LOADING 响应主体内容正在返回
4 =>DONE 响应主体内容已经被客户端接收
(可能问到的xhr的状态码,xhr的属性和方法,请求类型,get和post区别)
JQuery版AJAX
JQuery版AJAX有三种写法,下面一一介绍这三种写法
第一种:
$.ajax({
url:“请求路径”,
data:{“键名1”:值1,“键名2”:值2,“键名3”:值3…},
type:“提交方式get/post”,
dataType:“返回数据格式”,(常用:text,json)
async:true/false,
success:function(){},
error:function(){}
})
url:请求路径;data:请求数据;type:数据请求方式;dataType:返回数据格式;async:是否异步;success:执行成功执行本函数;error:执行失败执行本函数
代码示例:
$.ajax({
url:"JQAjax",
data:{"name":"李四","age":24},
type:"post",
dataType:"text",
async:true,
success:function(obj){
$("#msg").text(obj);
}
})
第二种&第三种:
第二种和第三种是将提交方式分解出来, . g e t ( ) 和 .get()和 .get()和.post()内容基本一致
$.get(
“请求路径”,(对应第一种方式url)
{“键名1”:值1,“键名2”:值2,“键名3”:值3…},(对应data)
function(){},(对应success:function(){})
“返回数据格式”(对应dataType)
)
$.post(
“请求路径”,
{“键名1”:值1,“键名2”:值2,“键名3”:值3…},
function(){},
“返回数据格式”
)
代码示例:
$.get(
"JQPostAjax",
{"name":"张三","age":23},
function(obj){
$("#msg").text(obj);
},
"text"
);
$.post(
"JQPostAjax",
{"name":"张三","age":23},
function(obj){
$("#msg").text(obj);
},
"text"
);
缺点
- AJAX虽然提高了用户体验,但无形中向服务器发送的请求次数增多了,导致服务器压力增大;
- 因为AJAX是在浏览器中使用Javascript技术完成的,所以还需要处理浏览器兼容性问题;
优点
- AJAX使用Javascript技术向服务器发送异步请求;
- AJAX无须刷新整个页面;
- 因为服务器响应内容不再是整个页面,而是页面中的局部,所以AJAX性能高;
使用场景
登陆失败时不跳转页面,注册时提示用户名是否存在,二级联动等等使用场景