AJAX
-
同步异步
所谓同步,指当浏览器访问一个新的地址时,在响应之前阻塞当前页面,直到响应回来后,阻塞结束展示结果。
所谓异步,指当浏览器访问一个新的地址时,浏览器不被阻塞,继续工作,当响应回来后回调处理结果。
浏览器通常的访问都是同步访问
但,某些场景下有异步访问的需求,例如,注册时用户名已存在的校验。 -
AJAX
a. 概述
AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”。
可以使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,现在传输的数据不仅仅是XML)。
b. 特点
异步请求 局部刷新
c. 应用场景百度搜索框 直播弹幕 网页qq
…
d. 原生js实现
在DHTML中提供了XMLHttpRequest对象,可以用它来实现AJAX。
i. 获取XMLHttpRequest对象
//1 创建XMLHttpRequest对象
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;
}
}
}
}
ii. 设置回调函数
在ajax执行时,随着执行的过程,xmlHttpRequest对象中的readystate属性会经历如下几个状态的变化
0 : 代表未初始化。 还没有调用 open 方法
1 : 代表正在加载。 open 方法已被调用,但 send 方法还没有被调用
2 : 代表已加载完毕。send 已被调用。请求已经开始
3 : 代表交互中。服务器正在发送响应
4 : 代表完成。响应发送完毕
每次状态值变化都会出发onreadystatechange事件,开发者可以监听此事件,当状态转变为4的时候处理响应结果
var data = null;
var xmlHttp = ajaxFunction();
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200||xmlHttp.status==304){
data = xmlHttp.responseText;
}
}
}
可以通过xmlHttp.status获取服务器返回的状态码
可以通过xmlHttp.responseText获取返回的数据
iii. 发送ajax请求
-
打开连接
xmlHttp.open(method,url,asynch);
method:请求类型,类似"GET"或"POST"的字符串。
url:路径字符串,指向你所请求的服务器上的那个文件。可以是绝对路径或相对路径。
asynch:表示请求是否要异步传输,默认值为true(异步)。
-
设置请求头
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
-
发送请求
a. GET请求xmlHttp.send(null);
send方法参数为http请求的实体内容
GET请求没有实体内容,传入null即可
b. POST请求
xmlHttp.send("a=7&b=8");
send方法参数为http请求的实体内容
传入要传输的请求参数即可。
POST方式传输请求参数,必须设置头Content-Type为application/x-www-form-urlencoded
e. jquery实现AJAX
i. $.ajax(url, [data], [async], [callback]);
url -- 发送请求的URL地址
data -- 可选, 发送至服务器的key/value数据
async -- 可选, 默认为true, 表示异步交互
type -- 请求方式 , 默认为"GET"。
success -- 可选, 请求成功后执行的函数, 函数参数:
result -- 服务器返回的数据
ii. $(selector).load(url,data,callback);
selector -- 选择器, 将从服务器获取到的数据加载到指定的元素中
url -- 发送请求的URL地址
data -- 可选, 向服务器发送的数据 key/value数据
callback -- 可选, load方法完成后所执行的函数
iii. $.get(url[, data][, callback][, type]);
$.post(url[, data][, callback][, type]);