AJAX从入门到放弃

AJAX简单介绍

AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML)，是一种创建交互式网页应用的网页开发技术;AJAX = 异步 Javascript和XML;通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页某部分进行刷新；传统网页(不使用AJAX)如果需要更新内容，必须重新加载整个网页。

AJAX的使用

1. 创建对象

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。