AJAX详解

AJAX技术与原理

简介：

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

Ajax所包含的技术:

    ajax并⾮⼀种新的技术，⽽是⼏种原有技术的结合体。它由下列技术组合⽽成。
    1.使⽤CSS和XHTML来表示。
    2.使⽤DOM模型来交互和动态显示。
    3.使⽤XMLHttpRequest来和服务器进⾏异步通信。
    4.使⽤javascript来绑定和调⽤。
    AJAX 的核⼼是 XMLHttpRequest 对象。
    不同的浏览器创建 XMLHttpRequest 对象的⽅法是有差异的。
    IE 浏览器使⽤ ActiveXObject，⽽其他的浏览器使⽤名为 XMLHttpRequest 的 JavaScript
                        内建对象

Ajax工作原理：

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

传统WEB应用模型

AJAX模型：

浏览器的普通交互⽅式：

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

XMLHttpRequest常⽤属性

    onreadystatechange 属性
    onreadystatechange 属性存有处理服务器响应的函数。
    下⾯的代码定义⼀个空的函数，可同时对 onreadystatechange 属性进⾏设置：
    xmlHttp.onreadystatechange = function() { //我们需要在这写⼀些代码}
    readyState 属性

responseText 属性

XMLHttpRequest⽅法

    open() ⽅法
    open() 有三个参数。第⼀个参数定义发送请求所使⽤的⽅法，第⼆个参数规定服务器端
    脚本的URL，第三个参数规定应当对请求进⾏异步地处理。
    xmlHttp.open(“GET”,“test.php”,true);
    send() ⽅法
    send() ⽅法将请求送往服务器。如果我们假设 HTML ⽂件和 PHP ⽂件位于相同的⽬
    录，那么代码是这样的：
    xmlHttp.send(null);
其他方法：

AJAX编程步骤：

1. 创建XMLHttpRequest对象：
   var xmlHttp=new XMLHttpRequest();
   ⼀般我们⼿写AJAX的时候，⾸先要判断该浏览器是否⽀持XMLHttpRequest对象，如果⽀持
   则创建该对象，如果不⽀持则创建ActiveX对象：
   var xmlHttp;
   if (window.XMLHttpRequest) {
   //⾮IE
   xmlHttp = new XMLHttpRequest();
   } else if (window.ActiveXObject) {
   //IE
   xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”)
   }
   2.设置请求对象：
   
   3.调用回调函数：
   
   4.发送请求：
   
   jQuery的AJAX方法：
   传统⽅式实现Ajax的不⾜：
   步骤繁琐 ⽅法、属性、常⽤值较多不好记忆
   AJAX方法：
   
   JSON在JAVA中使用：
   首先需要导包
   java对象与JSON之间的转换
   java->json
   

对象集合与JSON之间的转换

AJAX实例：实现数据的自动填充