AJAX简述
1.概述
异步的js和xml
可以通过AJAX实现异步访问服务器，并局部刷新网页
2.同步交互与异步交互
- 同步（串行）
向服务器发送一个请求，必须等待响应结束，才能发起第二个请求，
在服务器处理期间，浏览器不能干别的事。
通常会刷新整个页面。 - 异步（交替）
向服务器发送一个请求，无须等待响应结束，就能发起第二个请求，
在服务器处理期间，浏览器可以干别的事。
通常会刷新局部页面
3.应用场景
百度搜索框
用户名检验
。。。
4.优缺点
- 优点：
异步交互，提高了用户的体验。
服务器只响应了部分数据，而不是整个页面，所以降低了服务器的压力。 - 缺点：
AJAX不适用所有场景，比如页面跳转。
AJAX会增加服务器压力，因为可能会无端增加访问服务器的次数
5.JavaScript实现AJAX
第一步--获取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;
}
第二步--打开与服务器的连接
xmlHttp.open(method, url, async);
- method: 请求方式, 可以是GET或POST
- url: 所要访问的服务器中资源的路径如:/servlet/AServlet
- async: 是否为异步传输, true 表示为异步。传输一般都是true。
第三步--发送请求
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//通知服务器发送的数据是请求参数
xmlHttp.send("xxxx"); //注意, 如果不给参数可能会造成部分浏览器无法发送请求
xmlHttp.send("username="+username+"&psw="+)
参数:
如果是GET请求, 可以是null, 因为GET提交参数会拼接在url后面。
如果是POST请求, 传入的就是请求参数，如："username=张飞&psw=123"
第四步--注册监听
在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;//得到服务器响应的文本格式的数据
// readyState0 --> 1
/* 注册监听, 时刻监听服务器处理请求的状态 */
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4){
//状态为4表示服务器已经处理完成, 但是不代表处理成功
if(xmlHttp.status == 200){//当状态码为200, 表示服务器成功的处理了请求
var result = xmlHttp.responseText();
//xxx
}
}
}
6.jQuery实现AJAX
$ .get() 或 $ .post()
$.get(url,[data],[callback])
- url:发送请求的url地址
- data:可选，向服务器发送的数据，需要json格式
- callback：可选，回调函数，即请求成功后执行的函数
load()
$(selector).load(url,[data],[callback])
- $(selector)：选择器，可以选中某个元素，并将服务器的返回值填充到这个元素中
- url：发送请求的url地址
- data：可选，向服务器发送的数据，需要json格式
- callback：可选，回调函数，即请求成功后执行的函数
ajax()
$.ajax(url,[data],[async],[type],[success])
- url：发送请求的url地址
- data：可选，向服务器发送的数据，需要json格式
- async：可选，默认是true，表示异步，false为同步
- type：可选，请求方式
- success：可选，回调函数，即请求成功后执行的函数
