AJAX简单介绍
AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML)，是一种创建交互式网页应用的网页开发技术;AJAX = 异步 Javascript和XML;通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页某部分进行刷新；传统网页(不使用AJAX)如果需要更新内容，必须重新加载整个网页。
AJAX的使用
- 创建对象
XMLHttpRequest 对象是 AJAX 的基础；所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
为了兼容各个浏览器，我们应该先检查是否支持
XMLHttpRequest，如果支持则创建；否则则创建ActiveXObject。
//创建核心对象
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//设置回调函数
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert(xmlhttp.responseText);
}
}
XMLHttpRequest 常用属性方法
属性
- onreadystatechange : 设置请求状态监听
- responseText : 响应的文本
- responseXML : 响应的XML
- status : 服务器返回的状态码 success == 200
- readyState : 请求状态码
| readyState | 描述 |
|---|---|
| 0 | 对象已建立，但是尚未初始化(未调用open方法)； |
| 1 | 对象已建立，尚未调用send方法 |
| 2 | send方法已调用，等待响应 |
| 3 | 已接收部分数据，因为响应头不全，这是通过responseBody和responseText获取数据可能会出现错误 |
| 4 | 数据接收完毕 |
方法
- open(string method,string url,boolean async)：设置请求方式（get，post）；以及请求的地址；是否为异步请求（默认）
- send({String|ArrayBuffer|Blob|Document|FormData} [data])：发送请求时提交数据（一般为post请求）
- setRequestHeader(key,value)：设置请求头
发送GET请求
//open 设置请求方式和路径
xmlhttp.open("get", "/helloAjax?value=123456")
xmlhttp.send();
发送POST请求
这里需要注意的是 POST发送表单数据，需要指定请求头。
application/x-www-form-urlencoded
xmlhttp.open("post", "/helloAjax");
//设置请求头
xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded")
xmlhttp.send("name=" + name);
最后
由于原生AJAX存在很多浏览器兼容性问题，就从上面创建XMLHttpRequest对象来说就比较麻烦，不过我们选择一些库来代替他（封装的比较好，不用我们考虑兼容性问题了）；例如JQuery的AJAX。
