Ajax

使用Ajax技术让自己的站点具有更好的响应性、更吸引人，这会使站点的用户在浏览过程中更愉快。更棒的是，你不需要学习全新的技术，因为Ajax是由你已经掌握的几种技术组合而成的。

• 传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。有很多使用 AJAX 的应用程序案例：新浪微博、Google Map、...

1. Asynchronous JavaScript and XML

• 并不是新的技术，它由现有的几种技术组合而成：

1)XHTML(一种对html更规范的写法约定)——控制页面结构

2)CSS——控制页面表示方式

3)DOM——显示和操控页面

4)XML/JSON——服务器与客户端传输数据的格式

5)XMLHttpRequest——异步从服务器获取数据

6)JavaScript——动态地显示所有内容并且提供交互功能

• Ajax应用程序在用户和服务器之间建立一个中介——Ajax engine

1）如果用户的操作并不要求向服务器发出请求（例如，显示已经存储在本地的数据），那么Ajax 引擎会进行响应。这使浏览器能够对许多用户操作立刻作出反应，使网页的反应像桌面程序那样迅速。

2）如果用户操作需要服务器调用，Ajax 引擎就异步地执行它，因此用户不需要等待服务器的响应。用户可以继续与应用程序进行交互，当请求的数据到达时，引擎会更新页面。这里的重点是，用户的操作不会由于等待服务器而暂停。

2. Ajax的问题

1）需要现代浏览器的支持以及对JavaScript的支持 —— 对于老式浏览器或者关闭了JavaScript功能的用户，Ajax不管用

2）可能破坏浏览器后退按钮的正常表现 —— 使用Ajax的页面是动态更新的，因此可能回不到用户想要的页面效果

3. 读取服务器数据

3.1 XMLHttpRequest() Object

• XMLHttpRequest 是 AJAX 的基础。

• 所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象, 老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

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");
  }

3.2 Request

1) method

• open(method,url,async)

• send(string) ---> string 仅用于POST

2) GET VS POST

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

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

1)无法使用缓存文件（更新服务器上的文件或数据库）

2)向服务器发送大量数据（POST 没有数据量限制）

3)发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

//GET
xmlhttp.open("GET","demo_get2.html?fname=Henry&lname=Ford",true);
xmlhttp.send();

//POST
xmlhttp.open("POST","ajax_test.html",true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

setRequestHeader(header,value) -----> 果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头

3.3 Response

1) responseXML & responseText

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

• 如果来自服务器的响应并非 XML(比如JSON)，请使用 responseText 属性。responseText 属性返回字符串形式的响应

3.4 onreadystatechange Event

• onreadystatechange 每当 readyState 属性改变时，就会调用该函数

• readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

• status

200: "OK"

404: Page No Found

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