Asynchronous JavaScript and XML,用JavaScript执行异步网络请求。
AJAX是客户端与服务器端的交互技术,通过异步请求的方式,实现页面无刷新式提交。
使用AJAX,请求响应模式不再是请求对应页面的模式,服务器端的响应不要求重新加载整个页面,而可能仅仅更新部分内容。而且发送的请求是异步的,不需要等待服务器对该异步请求做出响应,还可以继续当前页面的操作,当服务器对异步请求相应完成后,浏览器才对页面的局部内容进行更新。下面来看看AJAX技术在哪些地方得到了广泛的应用。
- 验证注册名是否已使用
- 网站页面局部登陆和退出
- 文本框自动补全功能
- 地图拖动、放大、缩小功能
(1)在现代浏览器上写AJAX主要依靠对象XMLHttpRequest对象:
open(methods,url,async(true/false)) | 建立与服务器的连接。method参数可以是GET/POST/PUT,,url参数指定请求的地址,async参数指定是否异步,默认为true,千万不要设置为false |
setResquestHeader(header,value) | b把指定的请求头信息设置为所提供的值,必须放在open()之后 |
send(content/null) | 向服务器发送请求,content参数指定请求的参数,为了考虑兼容性问题,如果不设置此参数,建议用null |
abort() | 停止当前请求 |
getRequestHeader(header) | 返回指定的响应头的信息的值 |
getAllRequestHeaders() | f返回所有响应头信息作为键值对返回 |
onreadystatechange() | 指定当XMLHttpRequest对象的readyState属性发生变化时调用的函数进行处理 |
readyState | 表示XMLHttpRequest对象的状态,0表示为初始化;1 open已调用,没有调用send;2 已调用send,未收到响应;3 接收到响应;4 响应接受完毕,可以使用了 |
status | f服务器返回的HTTP协议状态码,其中200表示服务器正常响应,只有readyState的值为3或者4时,该属性才可以使用 |
statusText | HTTP状态码的相应文本,例如ok Not Found |
responseText | 服务器响应的文本内容,当readyState的值为4时,信息完整 |
responseXML | 服务器的响应,表示为XML,可以解析为一个DOM对象 |
(2)编写createXMLHttpRequest()方法 因为不同浏览器创建XMLHttpRequest对象的的方法是不同的,所以为了兼容不同版本的浏览器,将创建XMLHttpRequest对象的方法写成如下形式:
function createXMLHttpRequest() {
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else if(window.ActiveXObject){
try {
xmlHttp = new ActiveXObject("Msxml2.xmlHttp");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.xmlHttp");
} catch (e) {
alert("对不起,您的浏览器不支持xmlHttpRequest对象!");
}
}
}
}
(3)作为客户端浏览器,需要根据XMLHttpRequest对象状态的改变编写相应的代码,对页面进行处理。下面的代码完成的功能是当XMLHttpRequest对象读取响应结束
function success(text) {
var textarea = document.getElementById('test-response-text');
textarea.value = text;
}
function fail(code) {
var textarea = document.getElementById('test-response-text');
textarea.value = 'Error code: ' + code;
}
var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象
request.onreadystatechange = function () { // 状态发生变化时,函数被回调
if (request.readyState === 4) { // 成功完成
// 判断响应结果:
if (request.status === 200) {
// 成功,通过responseText拿到响应的文本:
return success(request.responseText);
} else {
// 失败,根据响应码判断失败原因:
return fail(request.status);
}
} else {
// HTTP请求还在继续...
}
}
// 发送请求:
request.open('GET', '/api/categories');
request.send();
alert('请求已发送,请等待响应...');
通过检测window
对象是否有XMLHttpRequest
属性来确定浏览器是否支持标准的XMLHttpRequest
。注意,不要根据浏览器的navigator.userAgent
来检测浏览器是否支持某个JavaScript特性,一是因为这个字符串本身可以伪造,二是通过IE版本判断JavaScript特性将非常复杂。
当创建了XMLHttpRequest
对象后,要先设置onreadystatechange
的回调函数。在回调函数中,通常我们只需通过readyState === 4
判断请求是否完成,如果已完成,再根据status === 200
判断是否是一个成功的响应。
XMLHttpRequest
对象的open()
方法有3个参数,第一个参数指定是GET
还是POST
,第二个参数指定URL地址,第三个参数指定是否使用异步,默认是true
,所以不用写。
注意,千万不要把第三个参数指定为false
,否则浏览器将停止响应,直到AJAX请求完成。如果这个请求耗时10秒,那么10秒内你会发现浏览器处于“假死”状态。
最后调用send()
方法才真正发送请求。GET
请求不需要参数,POST
请求需要把body部分以字符串或者FormData
对象传进去。
安全限制
这是因为浏览器的同源策略导致的。默认情况下,JavaScript在发送AJAX请求时,URL的域名必须和当前页面完全一致。
常用的跨域方法:JSONP和CORS