AJAX简介和简单应用|【大学生博客大赛】
AJAX简介和简单应用
1.1.AJAX是什么:
Ajax即Asynchronous Javascript and XML
使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。
* 可以利用js访问服务器, 而且是异步访问
* 通常服务器给浏览器响应的是一个完整的页面, 而在AJAX中, 由于是利用js访问服务器, 再由js接受响应, 局部刷新页面, 所以服务器不用给浏览器响应整个页面了, 而只是数据。
* 服务器响应的数据:
> text 纯文本 "用户名已存在"
> xml
> json: js提供的一种数据交互格式, 在js中很受欢迎
ajax --> ajaj --> aj
1.2.同步交互和异步交互
同步:
* 向服务器发一个请求, 必须等待响应结束, 才能发送第二个请求, 在服务器处理期间, 浏览器不能干别的事儿
* 刷新整个页面
异步:
* 向服务器发一个请求, 不用等待响应结束, 就可以发送第二个请求, 在服务器处理期间, 浏览器可以干别的事儿
* 可以使用js接受服务器的响应, 再利用js局部刷新页面
1.3.AJAX的应用场景
* 百度的搜索框
* 注册用户时, 校验用户名是否被注册过
...
1.4.AJAX的优点和缺点
优点:
* 异步交互, 提高了用户体验
* 服务器只响应部分数据, 而不是整个页面, 所以降低了服务器的压力
...
缺点:
* ajax不能应用所有的场景
* ajax会无端的增加访问服务器的次数, 给服务器带来了压力
1.5.JavaScript实现AJAX(只需四步)
1.5.1.第一步, 获取XMLHttpRequest对象
var xmlHttp = ajaxFunction();
function ajaxFunction(){
var xmlHttp;
try{
//现代浏览器（IE7+、Firefox、Chrome、Safari 和 Opera）都有内建的 XMLHttpRequest 对象
xmlHttp = new XMLHttpRequest();
}catch(e){
try{
//IE6.0
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
//IE5.0及更早版本
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
alert("...");
throw e;
}
}
}
return xmlHttp;
}
1.5.2.第二步, 打开与服务器的连接
xmlHttp.open(method, url, async);
> method: 请求方式, 可以是GET或POST
> url: 所要访问的服务器中资源的路径 如: /Day10/servlet/AServlet
> async: 是否为异步传输, true 表示为异步传输 一般都是true
1.5.3.第三步, 发送请求
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//通知服务器发送的数据是请求参数
xmlHttp.send("xxxx"); //注意, 如果不给参数可能会造成部分浏览器无法发送请求
> 参数:
如果是GET请求, 可以是null, 因为GET提交参数会拼接在url后面
如果是POST请求, 传入的就是请求参数
"username=张飞&psw=123"
1.5.4.第四步, 注册监听
> 在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;//得到服务器响应的文本格式的数据
xmlHttp.onreadystatechange = function(){
//当服务器已经处理完请求之后
if(xmlHttp.readyState == 4){
if( xmlHttp.status == 200 ){
//获取响应数据
var result = xmlHttp.responseText;
result = xmlHttp.responseXML;
}
}
}
1.6.jQuery实现AJAX
1.6.1. load方法
$(selector).load(url,data,callback);
selector -- 选择器, 将从服务器获取到的数据加载到指定的元素中
url -- 发送请求的URL地址
data -- 可选, 向服务器发送的数据 key/value数据 如:{"username" : "张飞", "psw" : "123"}
callback -- 可选, load方法完成后所执行的函数
示例:
$("#username_msg").load("<%= request.getContextPath() %>/AjaxCheckUsernameServlet", {"username": username});
1.6.2. $.get方法/& $.post方法
$.get(url, [data], [callback]);
url -- 发送请求的URL地址
data -- 可选, 向服务器发送的数据
callback -- 可选, 请求成功后所执行的函数
示例:
$.get("<%= request.getContextPath() %>/AjaxCheckUsernameServlet", {"username": username}, function(result){
$("#username_msg").html("<font style='color:red'>"+result+"</font>");
});
1.6.3. $.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>")
}
});