要谈AJAX,就不得不提同步与异步的概念了
同步交互:用户发送一个请求,在收到服务器的应答之前,不可以做任何操作。并且在收到应答后,会刷新整个页面。在网络不好的情况下用户体验不好。
异步交互:用户发送一个请求,在收到服务器的应答之前,可以向服务器发送新的请求。可以使用js接受服务器的响应,再利用js局部刷新页面。
同步好还是异步好:
异步:用户体验好,不能适用于所有场景(例如使用支付软件付款时,必须等到支付成功才能开始新的支付操作)
同步:用户体验不好,适用于所有场景。
AJAX不是一项新的技术,它是由asynchronous(异步代码块)、javascript and xml组成,它就是基于js和xml来实现异步请
求。它可以利用js来异步访问服务器。通常服务器给浏览器响应的是一个完整的页面,而在AJAX中,
由于是利用js接受响应,局部刷新页面,所以服务器不用给浏览器响应整个页面了,只返回数据就行了。
例如:你进入一个购物网站,出现了许多商品,你点击了一个按钮“按销量排序”,这时后台给服务器发送了一个AJAX请求,服务器接受请求后只返回了商品销量的数据(这些数据以xml结构或者json键值对表示)而不是整个页面,然后由javascript把这些商品的数据显示在了页面上。由于json表示的数据除了结构清晰外还更紧凑,在js中很受欢迎。
AJAX应用场景
百度的搜索框、注册用户时,校验用户名是否被注册过。
AJAX的优缺点:
优点:异步交互,提高了用户体验;服务器只响应部分数据,而不是整个页面,所以降低了服务器应答的压力(带宽)。
缺点:不能应用所有场景(支付);会无端的增加访问服务器的次数,给服务器带来了接收请求的压力。
javascript实现AJAX的核心对象是XMLHttpRequest,实现步骤(只需四步)
第一步,获取XMLHttpRequest对象,直接new一个XMLHttpRequest对象, var xmlHttp = new XMLHttpRequest()(适用于IE7+、firefox、Chrome、Safari和Opera),如果还有其他版本的浏览器,则会创建各自对应的对象。
第二步,打开与服务器的连接
xmlHttp.open(method,url,async);
method:请求方式,可以是GET或POST
url:所要访问的服务器中资源的路径 如servlet/AServlet
async:是否为异步传输,true表示为异步传输,一般都是true
第三步,发送请求
xmlHttp-.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//设置请求头,通知服务器发送的数据是请求参数
new XMLHttpRequest().send("xxxxx");//注意,如果不给参数,可能会造成部分浏览器无法发送请求
参数:如果是GET请求,可以是null,因为GET提交参数会拼接在url后面
如果是POST请求,传入的就是请求参数
第四步,注册监听
在XMLHttpRequest对象的一个事件上注册监听器:
onreadystatechange
一共有五个状态:(xmlHttp.readyState)
0状态: 表示刚创建XMLHttpRequest对象, 还未调用open()方法
1状态: 表示刚调用open()方法, 但是还没有调用send()方法发送请求
2状态: 调用完了send()方法了, 请求已经开始
3状态: 服务器已经开始响应, 但是不代表响应结束
4状态: 服务器响应结束!(通常我们只关心这个状态)
//获取xmlHttp对象的状态:
var state = xmlHttp.readyState;//可能得到0, 1, 2, 3, 4
//获取服务器响应的状态码
var status = xmlHttp.status;
//获取服务器响应的内容
var data = xmlHttp.responseText;//得到服务器响应的文本格式的数据
//相当于每次状态改变时,都会调用这个function
xmlHttp.onreadystatechange = function(){
//当服务器已经处理完请求之后
if(xmlHttp.readyState == 4){
//status是应答状态码,200说明服务器响应完成,而且状态OK
if( xmlHttp.status == 200 ){
//获取响应数据并执行局部刷新的逻辑
var result = xmlHttp.responseText;
result = xmlHttp.responseXML;
}
}
}
jQuery实现AJAX
1.$(selector).load方法
$(selector).load(url,data,callback);
selector:选择器,将从服务器获取到的数据加载到指定的元素中
例如jsp页面中的span标签,我们给了它一个id值为msg_username,用它来表示这个span标签,这样的话我们从后台获取的数据就可以显示在页面上了。
url:发送请求的url地址
data:可选,想服务器发送的数据 key/value数据 如:
{"username":"张三","psw":"123"}
如果提供了data参数,那么使用POST提交;如果没有提供data参数,而是将参数拼接在url后面,那么使用GET提交。
callback:可选,load方法完成后所执行的函数。
会自动将服务器返回的应答内容填充到selector选择的组件内部,相当于.html(result),可以省略掉callback。
示例:
$("#username_msg").load("<%= request.getContextPath() %>/AjaxCheckUsernameServlet", {"username": username});
2.$.get方法
$.get(url, [data], [callback]);
使用get请求
url:发送请求的URL地址
data:可选, 向服务器发送的数据
callback:可选, 请求成功后所执行的函数
示例:
$.get("<%= request.getContextPath() %>/AjaxCheckUsernameServlet", {"username": username}, function(result){
$("#username_msg").html("<font style='color:red'>"+result+"</font>");
});
3.$.post方法
使用post请求
$.post(url, [data], [callback]);
url:发送请求的URL地址
data:可选, 向服务器发送的数据
callback:可选, 请求成功后所执行的函数
//由于是post请求,所以不需要再后面拼接参数
var url2="/AJAXCheckUsernameServlet";
var data={"username":$(this).val()};
$.post(url2,data,function(result){
//result就是服务器返回的应答内容
// 将应答内容添加到username对应的span中
$("#msg_username").html(result);
});
4.$.ajax方法
$.ajax(url, [data], [async], [callback]);
url:发送请求的URL地址
data:可选, 发送至服务器的key/value数据
async:可选, 默认为true, 表示异步交互
type:可选, 请求方式 , 默认为"GET"。
success:可选, 请求成功后执行的函数, 函数参数:
result:服务器返回的数据
示例:
$.ajax({
"url" : "<%= request.getContextPath() %>/AjaxCheckUsernameServlet",
"data" : {"username": username},
"async" : true,
"type" : "POST",
"success" : function(result){
$("#username_msg").html("<font style='color:red'>"+result+"</font>")
}
});