AJAX入门

用户11690639

发布于 2026-06-17 21:54:54

900

1. AJAX概述。

1.1什么是AJAX。

AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。 
AJAX不是指一种单一的技术，而是有机地利用了一系列相关的技术。事实上，一些基于AJAX的“派生/合成”式（derivative/composite）的技术正在出现，如“AFLAX”。 
AJAX 支持的浏览器目前包括：Mozilla、Firefox、InternetExplorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式对象，也不支持XSLT。

1.2 为什么使用AJAX？

1.2.1 传统web应用的不足

传统的web应用允许用户填写表单(form)，当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单，然後返回一个新的网页。这个做法浪费了许多带宽，因为在前後两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。 
例如：在作注册用户的时候，我们要验证用户名是否被占用，这是我们必须做一个提交，然后刷新页面，获得相应的结果。这样就会浪费大量的带宽和资源，而且使用不方便。

1.2.2 AJAX对于请求的处理

AJAX应用可以仅向服务器发送并取回必需的数据，它使用一些基于XML的web service接口，并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少，结果我们就能看到响应更快 的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了。

1.2.3AJAX的优势

1.通过异步模式，提升了用户体验。
2.优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用。
3.Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。

1.2.4AJAX能干什么？

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

　　一切皆有可能！但愿它能够激发您开始开发自己的基于Ajax的站点。然而，在开始之前，让我们介绍一个现有的Web站点，它遵循传统的提交/等待/重新显示的范例，我们还将讨论Ajax如何提升用户体验。

1.3 AJAX的工作原理

Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。
Ajax的工作原理相当于在用户和服务器之间加了—个中间层，使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约ISP的空间及带宽租用成本的目的。

2.AJAX 实例讲解

2.1类、属性和方法

（1）类
XMLHttpRequest是AJAX的核心类。
XMLHttpRequest 类首先由Internet Explorer以ActiveX对象引入，被称为XMLHTTP。 后来Mozilla﹑Netscape﹑Safari 和其他浏览器也提供了XMLHttpRequest类，不过它们创建XMLHttpRequest类的方法不同。
创建方式：
   var req;
   if(window.ActiveXObject)
     ...{
       req = new ActiveXObject("Microsoft.XMLHTTP");   ／／IE创建方式
     }else...{
       req = new XMLHttpRequest(); 
     } 


由于IE是以ActiveX对象引入的，所以我们要检测是否支持 ActiveXObject来判断用户使用的是否为IE。
（2）属性
responseText、responseXML、onreadystatechange 、readyState和status是XMLHttpRequest类的主要属性。
responseText：用于接受服务器返回的字符串。
responseXML：用于接受服务器返回的XML文件。
onreadystatechange：处理请求的方法的名字。一般用匿名方法实现。
readyState： 用于判断交互状态0 (未初始化)  1 (正在装载) 2 (装载完毕) 3 (交互中) 4 (完成)。
status：一般用来返回服务器的HTTP状态码，status为200表示“成功”，status为404代表“页面未找到”。

（3）方法
req.open('GET', URL, true); 
open()的第一个参数是HTTP请求方式—GET，POST或任何服务器所支持的您想调用的方式。 按照HTTP规范，该参数要大写；否则，某些浏览器(如Firefox)可能无法处理请求。
第二个参数是请求页面的URL。
第三个参数设置请求是否为异步模式。如果是TRUE，JavaScript函数将继续执行，而不等待服务器响应。
  req.send(null); 
发送参数如果有参数req.send("username="+user_name);用request取得。

2.2实例验证用户名是否存在。

第一步：新建一个基于JSP标准的网页。
<body>
  <html:form action="/register" onsubmit="return sub()">
   <table>
    <tr>
     <td>
      用户名
     </td>
     <td valign="top">
      <html:text property="name" onchange="nameChange()" />
     </td>
     <td valign="top">
      <div id="name1">
       <font size="2">*用户名在5-50位之间</font>
       <div>
     </td>
    </tr>
   </table>
   <html:submit value="注册" />
  </html:form>
 </body>
</html> 第二步：书写AJAX代码。 在页面的head中加入以下代码： <SCRIPT LANGUAGE="JavaScript">
  function nameChange()...{
  
   if(document.all.name.value=="")...{
    document.all.name1.innerHTML="<font size=2 color=red>！用户名不合法，不可以为空</font>";
    return false;
   }else...{
    if(document.all.name.value.length<5||document.all.name.value.length>50)...{
     document.all.name1.innerHTML="<font size=2 color=red>！用户名不合法，必须在5-50位之间</font>";
     return false;
    }else...{
     var req;
     if(window.ActiveXObject)
       ...{
         req = new ActiveXObject("Microsoft.XMLHTTP"); 
       }else...{
         req = new XMLHttpRequest(); 
       } 
       if (req) ...{
         req.onreadystatechange=function() ...{
         if (req.readyState==4 && req.status==200) ...{//判断状态，4是已发送，200已完成
           if(req.responseText==0)...{
             document.all.name1.innerHTML="<font size=2 color=blue>用户名可以正常使用!~</font>";
             return true;
           }else if(req.responseText==1)...{
             document.all.name1.innerHTML="<font size=2 color=red>！用户名已经被占用</font>";
             return false;
           }else...{
             document.all.name1.innerHTML="<font size=2 color=blue>正在查询。。~</font>";
             return false;
           }
        }
      }
      req.open('POST', 'register.do?test=1&name='+document.all.name.value);
      req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      req.send("");
      //发送参数如果有参数req.send("username="+user_name);用request取得
    }
   }
  }
 }

 第二步：在register.do 中加入相应代码。