AJAX （一）
一、AJAX简介
1.什么是AJAX?
AJAX允许通过与后台的Web服务器交换数据来“异步”更新网页内容。可以更新网页的某些部分，而无需重新加载整个页面。
使用AJAX，您可以：
- 将数据发送到Web服务器
- 从Web服务器读取数据
- 更新网页而无需重新加载页面
AJAX可以发送和接收各种格式的信息，包括JSON，XML，HTML和文本文件。 简而言之，就是使用XMLHttpRequest对象与服务器进行通信。 AJAX的两个主要功能使您可以执行以下操作： 向服务器发出请求，而无需重新加载页面 从服务器接收和处理数据
AJAX不是一种编程语言，它是一种用于从网页访问Web服务器的技术
2、AJAX如何工作？
为了执行AJAX通信，JavaScript使用一个XMLHttpRequest对象向服务器发出HTTP请求并作为响应接收数据。
所有的现代浏览器（Chrome、FireFox、IE7+、Safari、Opera）都支持XMLHttpRequest对象
3、AJAX操作步骤
网页中发生了一个事件（即页面已加载或单击了按钮）
XMLHttpRequest对象由JavaScript创建
XMLHttpRequest对象将请求发送到Web服务器
服务器处理请求
服务器将响应发送回网页
响应由JavaScript读取
HTML DOM由JavaScript更新
二、XMLHttpRequest 对象
XMLHttpRequest 对象用于与服务器交换数据。
1、创建一个 XMLHttpRequest 对象
在客户端和服务器之间执行 AJAX 通信之前，首先要做的是示例化一个 XMLHttpReques t对象，如下所示：
<!DOCTYPE html>
<html>
<title>AJAX - XMLHttpRequest 对象示例 - 基础教程(cainiaojc.com)</title><body>
<h1>XMLHttpRequest 对象</h1><p>单击按钮发送请求并从服务器检索数据:</p>
<button type="button" onclick="fetchDoc()">发出请求</button><p id="result"></p><script>
function fetchDoc() {var httpRequest = new XMLHttpRequest();httpRequest.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {document.getElementById("result").innerHTML = this.responseText;}};httpRequest.open("GET", "ajax_data.txt", true);httpRequest.send();
}
</script></body>
</html>2、跨站点XMLHttpRequest
出于安全原因，浏览器不允许跨域访问。也就是当前网页和 ajax 要请求的网页地址要在同一个域名下。
(cainiaojc.com)上的实例都是与(cainiaojc.com)域中的地址交互。
如果要在自己的网页上使用上面的示例，则请求的目标地址必须位于您自己的服务器上。