Ajax课堂笔记

⼀ Ajax技术与原理

1.1 Ajax简介

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语⾔，⽽是⼀种使⽤现有标准的新⽅法。
AJAX 是与服务器交换数据并更新部分⽹⻚的艺术，在不重新加载整个⻚⾯的情况下。

1.2 Ajax所包含的技术

⼤家都知道ajax并⾮⼀种新的技术，⽽是⼏种原有技术的结合体。它由下列技术组合⽽成。

1.使⽤CSS和XHTML来表示。
2.使⽤DOM模型来交互和动态显示。
3.使⽤XMLHttpRequest来和服务器进⾏异步通信。
4.使⽤javascript来绑定和调⽤。

AJAX 的核⼼是 XMLHttpRequest 对象。
不同的浏览器创建 XMLHttpRequest 对象的⽅法是有差异的。
IE 浏览器使⽤ ActiveXObject，⽽其他的浏览器使⽤名为 XMLHttpRequest 的 JavaScript 内建对象

1.3 Ajax的⼯作原理

Ajax的⼯作原理相当于在⽤户和服务器之间加了—个中间层(AJAX引擎)，使⽤户操作与服务器响应异步
化。并不是所有的⽤户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎⾃⼰来做,，
只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
来看看和传统⽅式的区别

再来看看它们各⾃的交互
浏览器的普通交互⽅式

浏览器的Ajax交互⽅式

在创建Web站点时，在客户端执⾏屏幕更新为⽤户提供了很⼤的灵活性。下⾯是使⽤Ajax可以完成的功
能：
动态更新购物⻋的物品总数，⽆需⽤户单击Update并等待服务器重新发送整个⻚⾯。
提升站点的性能，这是通过减少从服务器下载的数据量⽽实现的。例如，在Amazon的购物⻋⻚⾯，当
更新篮⼦中的⼀项物品的数量时，会重新载⼊整个⻚⾯，这必须下载32K的数据。如果使⽤Ajax计算新
的总量，服务器只会返回新的总量值，因此所需的带宽仅为原来的百分之⼀。
消除了每次⽤户输⼊时的⻚⾯刷新。例如，在Ajax中，如果⽤户在分⻚列表上单击Next，则服务器数据
只刷新列表⽽不是整个⻚⾯。
直接编辑表格数据，⽽不是要求⽤户导航到新的⻚⾯来编辑数据。对于Ajax，当⽤户单击Edit时，可以
将静态表格刷新为内容可编辑的表格。⽤户单击Done之后，就可以发出⼀个Ajax请求来更新服务器，并
刷新表格，使其包含静态、只读的数据。

1.4 XMLHttpRequest常⽤属性

• 1. onreadystatechange 属性
     onreadystatechange 属性存有处理服务器响应的函数。
     下⾯的代码定义⼀个空的函数，可同时对 onreadystatechange 属性进⾏设置：

xmlHttp.onreadystatechange = function() { //我们需要在这写⼀些代码}

• 2. readyState 属性
     readyState 属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会
     被执⾏。
     readyState 属性可能的值
     
     我们要向这个 onreadystatechange 函数添加⼀条 If 语句，来测试我们的响应是否已完成(意味着可获得数据)：

xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
//从服务器的response获得数据
}
}

3. responseText 属性
   可以通过 responseText 属性来取回由服务器返回的数据。
   在我们的代码中，我们将把时间⽂本框的值设置为等于 responseText：

xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
document.myForm.time.value = xmlHttp.responseText;
}
}

1.5 XMLHttpRequest⽅法

• 1. open() ⽅法
     open() 有三个参数。第⼀个参数定义发送请求所使⽤的⽅法，第⼆个参数规定服务器端脚本的URL，第
     三个参数规定应当对请求进⾏异步地处理。

xmlHttp.open("GET","test.php",true);

• 2. send() ⽅法
     send() ⽅法将请求送往服务器。如果我们假设 HTML ⽂件和 PHP ⽂件位于相同的⽬录，那么代码是这
     样的：

xmlHttp.send(null);

其它⽅法如下：