AJAX原理（原生）

AJAX 简介

原理

(1)创建对象

var xhr = new XMLHttpRequest();

(2)打开请求

xhr.open('GET', 'example.txt', true);

(3)发送请求

xhr.send(); 发送请求到服务器

(4)接收响应

xhr.onreadystatechange =function(){}

(1)当readystate值从一个值变为另一个值时，都会触发readystatechange事件。

(2)当readystate==4时，表示已经接收到全部响应数据。

(3)当status ==200时，表示服务器成功返回页面和数据。

(4)如果(2)和(3)内容同时满足，则可以通过xhr.responseText，获得服务器返回的内容。

一个简单的AJAX实例

function loadXMLDoc()
{
	var xmlhttp;
	if (window.XMLHttpRequest)
	{
		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();
	}
	else
	{
		// IE6, IE5 浏览器执行代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	}
	xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
	xmlhttp.send();
}

var xmlhttp;
//ajax
function loadXMLDoc(url, cfunc) {
    if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 代码
        xmlhttp = new XMLHttpRequest();
    } else { // IE6, IE5 代码
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = cfunc;
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}
//触发ajax
function myFunction() {
    loadXMLDoc("/try/ajax/ajax_info.txt", function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
        }
    });
}
//调用 
myFunction()

AJAX 是开发者的梦想，因为您能够：

1. 不刷新页面更新网页
2. 在页面加载后从服务器请求数据
3. 在页面加载后从服务器接收数据
4. 在后台向服务器发送数据

AJAX 如何工作

Ajax 的核心是 XMLHttpRequest 对象。

XMLHttpRequest 对象 所有现代浏览器都支持 XMLHttpRequest 对象。

XMLHttpRequest 对象用于同幕后服务器交换数据。这意味着可以更新网页的部分，而不需要重新加载整个页面。

创建 XMLHttpRequest 对象

所有现代浏览器（Chrom、IE7+、Firefox、Safari 以及 Opera）都有内建的 XMLHttpRequest 对象。

创建 XMLHttpRequest 的语法是：

variable = new XMLHttpRequest();
variable = new ActiveXObject("Microsoft.XMLHTTP");
//为了应对所有浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。
//老版本的 Internet Explorer（IE5 和 IE6）使用 ActiveX 对象：
//如果支持，创建 XMLHttpRequest 对象，如果不支持，则创建 ActiveX 对象：
var xhttp;
if (window.XMLHttpRequest) {
	xhttp = new XMLHttpRequest();
} else {
    // code for IE6, IE5
    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

XMLHttpRequest 对象方法

方法	描述
new XMLHttpRequest()	创建新的 XMLHttpRequest 对象
abort()	取消当前请求
getAllResponseHeaders()	返回头部信息
getResponseHeader()	返回特定的头部信息
open(method, url, async, user, psw)	规定请求:method： 请求类型 GET 或 POST; url：文件位置; async：true（异步）或 false（同步）; user：可选的用户名称; psw：可选的密码
send()	将请求发送到服务器，用于 GET 请求
send(string)	将请求发送到服务器，用于 POST 请求
setRequestHeader()	向要发送的报头添加标签/值对

XMLHttpRequest 对象属性

属性	描述
onreadystatechange	定义当 readyState 属性发生变化时被调用的函数
readyState	保存 XMLHttpRequest 的状态。 0：请求未初始化 1：服务器连接已建立 2：请求已收到 3：正在处理请求 4：请求已完成且响应已就绪
responseText	以字符串返回响应数据
responseXML	以 XML 数据返回响应数据
status	返回请求的状态号 200: "OK" 403: "Forbidden" 404: "Not Found" 如需完整列表请访问 Http 消息参考手册
statusText	返回状态文本（比如 “OK” 或 “Not Found”）

AJAX - 向服务器发送请求

XMLHttpRequest 对象用于同服务器交换数据。

方法	描述
open(method, url, async)	规定请求的类型 method：请求的类型：GET 还是 POST url：服务器（文件）位置 async：true（异步）或 false（同步）
send()	向服务器发送请求（用于 GET）
send(string)	向服务器发送请求（用于 POST）

向服务器发送请求;如需向服务器发送请求，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

GET 还是 POST？ GET 比 POST 更简单更快，可用于大多数情况下。

不过，请在以下情况始终使用 POST：
    1.缓存文件不是选项（更新服务器上的文件或数据库）
    2.向服务器发送大量数据（POST 无大小限制）
    3.发送用户输入（可包含未知字符），POST 比 GET 更强大更安全

//GET 请求
xhttp.open("GET", "demo_get.asp", true);
xhttp.send();
//在上面的例子中，您可能会获得一个缓存的结果。为了避免此情况，请向 URL 添加一个唯一的 ID：

//如果您需要用 GET 方法来发送信息，请向 URL 添加这些信息：
xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();

xhttp.open("GET", "demo_get2.asp?fname=Bill&lname=Gates", true);
xhttp.send();

//POST 请求
xhttp.open("POST", "demo_post.asp", true);
xhttp.send();

//如需像 HTML 表单那样 POST 数据，请通过 setRequestHeader() 添加一个 HTTP 头部。请在 send() 方法中规定您需要发送的数据：
xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Bill&lname=Gates");

方法	描述
setRequestHeader(header, value)	向请求添加 HTTP 头部 header：规定头部名称 value：规定头部值 url - 服务器上的文件

open() 方法的 url 参数，是服务器上文件的地址：

xhttp.open("GET", "ajax_test.asp", true);
//该文件可以是任何类型的文件，如 .txt 和 .xml，或服务器脚本文件，
//如 .asp 和 .php（它们可以在发送回响应之前在服务器执行操作）。

异步 - ture 还是 false？

异步请求 如需异步发送请求，open() 方法的 async 参数必须设置为 true：

xhttp.open("GET", "ajax_test.asp", true);

在 AJAX 之前，此操作可能会导致应用程序挂起或停止。通过异步发送，JavaScript 不必等待服务器响应，而是可以：
1.在等待服务器响应时执行其他脚本
2.当响应就绪时处理响应

//onreadystatechange 属通过 XMLHttpRequest 对象，您可以定义当请求接收到应答时所执行的函数。
//这个函数是在 XMLHttpResponse 对象的 onreadystatechange 属性中定义的：
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.responseText;
  }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

同步请求 如需执行同步的请求，请把 open() 方法中的第三个参数设置为 false：

xhttp.open("GET", "ajax_info.txt", false);
//有时 async = false 用于快速测试。你也会在更老的 JavaScript 代码中看到同步请求。
//由于代码将等待服务器完成，所以不需要 onreadystatechange 函数：

xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;

我们不推荐同步的 XMLHttpRequest (async = false)，因为 JavaScript 将停止执行直到服务器响应就绪。如果服务器繁忙或缓慢，应用程序将挂起或停止。
同步 XMLHttpRequest 正在从 Web 标准中移除，但是这个过程可能需要很多年。
现代开发工具被鼓励对使用同步请求做出警告，并且当这种情况发生时，可能会抛出 InvalidAccessError 异常。

AJAX - 服务器响应

onreadystatechange 属性
readyState 属性存留 XMLHttpRequest 的状态。

status 属性和 statusText 属性存有 XMLHttpRequest 对象的状态。

属性	描述
onreadystatechange	定义了当 readyState 属性发生改变时所调用的函数。
readyState	保存了 XMLHttpRequest 的状态。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 正在处理请求 4: 请求已完成且响应已就绪
status	200: "OK" 403: "Forbidden" 404: "Page not found" 如需完整列表，请访问 Http 消息参考手册
statusText	返回状态文本（例如 “OK” 或 “Not Found”）

每当 readyState 发生变化时就会调用 onreadystatechange 函数。当 readyState 为 4，status 为 200 时，响应就绪：

	function loadDoc() {
    	var xhttp = new XMLHttpRequest();
    	xhttp.onreadystatechange = function() {
        	if (this.readyState == 4 && this.status == 200) {
            	document.getElementById("demo").innerHTML =
            	this.responseText;
       	}
    	};
    	xhttp.open("GET", "ajax_info.txt", true);
    	xhttp.send(); 
	} 
	loadDoc();

使用回调函数回调函数是一种作为参数被传递到另一个函数的函数。

如果您的网站中有多个 AJAX 任务，那么您应该创建一个执行 XMLHttpRequest 对象的函数，以及一个供每个 AJAX 任务的回调函数。
该函数应当包含 URL 以及当响应就绪时调用的函数。

loadDoc("url-1", myFunction1);

loadDoc("url-2", myFunction2);

function loadDoc(url, cFunction) {
  var xhttp;
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      cFunction(this);
    }
  };
  xhttp.open("GET", url, true);
  xhttp.send();
}

function myFunction1(xhttp) {
  // action goes here
 } 
function myFunction2(xhttp) {
  // action goes here
 } 

responseText 属性
responseText 属性以 JavaScript 字符串的形式返回服务器响应，因此您可以这样使用它：

document.getElementById("demo").innerHTML = xhttp.responseText;

responseXML 属性 XML HttpRequest 对象有一个內建的 XML 解析器。

ResponseXML 属性以 XML DOM 对象返回服务器响应。使用此属性，您可以把响应解析为 XML DOM 对象：

//请求文件 music_list.xml，并对响应进行解析：
xmlDoc = xhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
  txt += x[i].childNodes[0].nodeValue + "<br>";
  }
document.getElementById("demo").innerHTML = txt;
xhttp.open("GET",  "music_list.xml", true);
xhttp.send();

getAllResponseHeaders() 方法 返回所有来自服务器响应的头部信息。

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.getAllResponseHeaders();
  }
};

getResponseHeader() 方法 返回来自服务器响应的特定头部信息。

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.getResponseHeader("Last-Modified");
  }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();