Ajax学习笔记

1. 什么叫AJAX

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）,可以用来定义http请求，发送http请求，获取后端传送的数据
注：Ajax主要负责前端的请求发送与后端的数据获取，后端部分可以使用PHH/ASP/JAVA/Node等来写

2. 创建XMLHttpRequest对象

var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

3. 向服务器发送请求

3.1 发送请求

xmlhttp.open(method,url,async);
xmlhttp.send();

方法	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。 - method：请求的类型；GET 或 POST- url：文件在服务器上的位置- async：true（异步）或 false（同步)
send(string)	将请求发送到服务器。

string：仅用于 POST 请求

注: 如果Async=true，将会触发事件 xmlhttp.onreadystatechange

3.2 触发onreadystatechange，执行异步操作

XMLHttpRequest 对象的三个重要的属性：

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数(前提是Async=true)。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: “OK” 404: 未找到页面

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

4. 获取服务器响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据

• 如果来自服务器的响应并非 XML，请使用 responseText 属性。
• 如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性

5. 完整的AJAX实例

var xmlhttp;    // 定义变量

// 创建XMLHttpRequest对象
if (window.XMLHttpRequest)
{
	//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
	xmlhttp=new XMLHttpRequest();
}
else
{
	// IE6, IE5 浏览器执行代码
	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

// Ajax的事件响应
xmlhttp.onreadystatechange=function()
{
	if (xmlhttp.readyState==4 && xmlhttp.status==200)
	{
		// 使用XMLHttpResponse的responseText属性获取数据
		document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 
	}
}

// 定义与发送信息至后端
xmlhttp.open("GET",url, true);
xmlhttp.send();