Ajax基础概念

Ajax（Asynchronous JavaScript and XML，异步JavaScript和XML）由HTML、JavaScript技术、DHTML和DOM组成，这一杰出的方法可以将笨拙的Web页面转化成交互性的Ajax应用程序。使高效的Web开发成为现实。

 

核心：XMLHttpRequest对象

 

Ajax用到的基本技术：

HTML用于建立Web表单并确定应用程序其他部分使用的字段。

JavaScript代码是运行Ajax应用程序的核心代码，帮助改进与服务器应用程序的通信。

DHTML用于动态更新表单。我们将使用div、span和其他动态HTML元素来标记HTML。

文档对象模型DOM用于（通过JavaScript代码）处理HTML结构和（某些情况下）服务器返回的XML。

 

 

问题：

传统的Web应用采用同步交互过程，这种情况下，用户首先向HTTP服务器触发一个行为或请求的调用。反过来，服务器执行某些任务，再向发出请求的用户返回一个HTML页面。这是一种不连贯的用户体验，服务器在处理请求的时候，用户多数时间处于等待的状态，屏幕内容也是一片空白。

       与传统的Web应用不同，AJAX采用异步交互过程。AJAX在用户与服务器之间引入一个中间媒介，从而消除了网络交互过程中的处理—等待—处理—等待缺点。用户的浏览器在执行任务时即装载了AJAX引擎。AJAX引擎用JavaScript语言编写，通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。AJAX引擎允许用户与应用软件之间的交互过程异步进行，独立于用户与网络服务器间的交流。现在，可以用JavaScript调用AJAX引擎来代替产生一个HTTP的用户动作，内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交给AJAX来执行。

 

 

AJAX的优点：

l         减轻服务器的负担。AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担。

l         无刷新更新页面，减少用户心理和实际的等待时间。特别的，当要读取大量的数据的时候，不用像reload那样出现白屏的情况，AJAX使用XMLHttp对象发送请求并得到服务器响应，在不重新载入整个页面的情况下用JavaScript操作DOM最终更新页面。所以在读取数据的过程中，用户所面对的不是白屏而是原来的页面内容（也可以加一个Loading的提示框让用户知道处于读取数据过程），只有当数据接收完毕之后才更新相应部分的内容。这种更新是瞬间的，用户几乎感觉不到。带来更好的用户体验。

l         可以把以前一些服务器负担的工作转嫁到客户端

l         可以调用外部数据

l         基于标准化的并被广泛支持的技术，不需要下载插件或者小程序

l         进一步促进数据呈现和数据处理的分离

 

 

XMLHttpRequest简介

l         open()：建立到服务器的新请求

l         send()：向服务器发送请求

l         abord()：退出当前请求

l         readyState()：提供当前HTML的就绪状态

l         responseText()：服务器返回的响应文本

 

 

Ajax基本上就是把JavaScript技术和XMLHttpRequest对象放在Web表单和服务器之间。

 

创建新的XMLHttpRequest对象：

<script language= “javascript” type= “text/javascript”>

              var request = false;

              try {

                     request = new XMLHttpRequest();

              } catch (failed) {    // js中只有异常变量，没有异常对象（Java中）

       request = false;

}

if (!request) {

       alert(“Error initializing XMLHttpRequest”);

} else {

       alert(request);

}

       </script>

 

增加对Microsoft浏览器的支持：

<script language= “javascript” type= “text/javascript”>

              var request = false;

              try {

                     request = new XMLHttpRequest();

              } catch (trymicrosoft) {

       try {

request = new ActiveXObject(“Msxml2.XMLHTTP”);

                     } catch (othermicrosoft) {

              try {

request = new ActiveXObject(“Microsoft.XMLHTTP”);

} catch (failed) {

       request = false;

}

}

              }

if (!request) {

       alert(“Error initializing XMLHttpRequest”);

} else {

       alert(request);

}

       </script>

 

 

打开请求：

有了要连接的URL后就可以配置请求了。可以用XMLHttpRequest对象的open()方法来完成，该方法有五个参数：

l         request-type：发送请求的类型。典型的值是GET或POST，但也可以发送HEAD请求

l         url：要连接的URL

l         asynch：如果希望使用异步连接则为true，否则为false，默认为true

l         username：如果需要身份验证，则可以在此指定用户名，该可选参数没有默认值

l         password：如果需要身份验证，则可以在此指定口令，该可选参数没有默认值

发送请求：

可以使用send()方法发送数据，也可以通过URL本身发送数据。事实上，GET请求（在典型的Ajax应用中大约占80%）中，用URL发送数据要容易得多。如果需要发送安全信息或XML，可能要考虑使用send()方法发送内容。如果不需要通过send()方法传递数据，则只要传递null作为该方法的参数即可。

指定回调方法：

l         服务器完成了请求之后会发生什么？服务器在完成通过XMLHttpRequest发送给它的请求处理之后需要某种指示说明怎么做。

l         onreadystatechange属性允许指定一个回调函数。回调允许服务器反向调用Web页面中的代码。它也给了服务器一定程度的控制权，当服务器完成请求之后，会查看XMLHttpRequest对象，特别是onreadystatechange属性。然后调用该属性指定的任何方法。之所以称为回调时因为服务器向网页发起调用，无论网页本身在做什么。

l         这就是称之为异步的原因：用户在一层上操作表单，而在另一层上服务器响应请求并触发onreadystatechange属性指定的回调方法。

 

 

HTTP就绪状态

Ajax应用程序中需要了解五种就绪状态：

l         0：请求没有发出（在调用open()之前）

l         1：请求已经建立但还没有发出（在调用open()之前）

l         2：请求已经发出正在处理之中（这里通常可以从响应得到内容头部）

l         3：请求已经处理，响应中通常有部分数据可用，但是服务器还没有完成响应

l         4：响应已经完成，可以访问服务器响应并使用它

 

HTTP状态码

我们期望的状态码是200，它表示一切顺利

如果就绪状态是4而且状态码200，就可以处理服务器的数据了，而且这些数据应该就是要求的数据（而不是错误或者其他有问题的信息）。

 

例子：

function getCustomerInfo() {

       var phone = document.getElementbyId(“phone”).value;

       var url = “/cgi-local/lookupCustomer.php?phone=” + escape(phone);

       request.open(“GET”,  url,  true);

       request.onreadystatechange = updatePage;

       request.send(null);

}

 

function updatePage() {

       if (request.readyState == 4) {

              if (request.status == 200) {

                     alert(“Server is done!”);

                     var text = response.responseText;

                     alert(text);

                     document.getElementById(“order”).value = response[0];

                     document.getElementById(“address”).innerHTML = response[1].replace(//n/g, “”);

              }

       } else {

              alert(“Error: status code is ” + request.status);

       }

}

 

<div id=“address”></div>