w3cschool教你一天入门AJAX

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 是一种用于创建快速动态网页的技术。

AJAX不是指一种单一的技术，而是有机地利用一系列交互式网页应用相关的技术所形成的结合体。

AJAX 可以使网页实现异步更新。即在无需重新加载整个网页的情况下，能够更新部分网页的技术。

传统模式中，数据提交通过表单form来实现，而数据获取是靠全页面刷新来重新获取整个页面的内容。而AJAX模式只是通过XMLHttpRequest对象向服务器端提交希望提交的数据，即按需发送。

AJAX的工作原理相当于在用户和服务器之间加了一个中间层，使用户操作和服务器响应异步化。它在客户端创建AJAX引擎，把传统方式下的一些服务器端负担的工作转移到客户端，便于客户端资源来处理，减轻服务器和带宽的负担。

安装WEB环境——AppServ(PHP网页架站工具组合包，能帮助初学者快速完成网页架站)

1.XMLHttpRequest 是 AJAX 的基础。

      所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象，并支持XMLHttpRequest对象。XMLHttpRequest 对象是AJAX的核心——发送异步请求、接收响应以及执行回调都是通过它来实现的。

      XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

      为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 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");
  }

2.XMLHttpRequest 对象用于和服务器交换数据。

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

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

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

GET 还是 POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

• 无法使用缓存文件（更新服务器上的文件或数据库）
• 向服务器发送大量数据（POST 没有数据量限制）
• 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

3.服务器

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

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

4.onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

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

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

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

注释：onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。