Ajax技术应用简析
作者：王爱民
来源：《电脑知识与技术》2010年第20期
        摘要：Ajax即异步的JavaScript与XML，它是JavaScript、XML、CSS、DOM等多种已有技术的组合，可以实现客户端的异步请求操作，提供更好的服务响应。为实现网站用户注册功能，介绍了Ajax使用的技术、工作流程、重构及开发过程中的注意问题。
        关键词：Ajax；对象；工作流程；重构
        中图分类号：TP311文献标识码：A文章编号：1009-3044(2010)20-5517-03
        Explatination of Ajax Technology Application
        WANG Ai-min
        (Department of Computer Engineering, Xinjiang Polytechnical College, Urumqi 830091, China)
        Abstract: Ajax means Asynchronous JavaScript and XML. It is the combination of JavaScript 、XML、CSS、DOM and etc. To implement function of user login on Web, the technology 、working flow、recreation and notices in Ajax development are explored.
        Key words: Ajax; object; working flow; recreation
        Ajax即异步的JavaScript与XML，它是JavaScript、XML、CSS、DOM等多种已有技术的组合，可以实现客户端的异步请求操作，提供更好的服务响应。
        在Ajax应用中，页面中用户的操作将通过Ajax引擎与服务器端进行通信，然后将返回结果提交给客户端页面的Ajax引擎，再由Ajax引擎来决定将这些数据插入到页面的指定位置，这样每个用户的行为会变成对Ajax引擎的一次JavaScript调用，实现了不刷新整个页面的情况下对部分数据进行更新，降低了网络流量，减轻了服务器和带宽的负担，节约空间和成本，可以调用XML等外部数据，进一步促进页面显示和数据的分离，它是一种基于标准化的并被广泛支持的技术，不需要下载插件或小程序。
        1 Ajax使用的技术
        Ajax使用的最核心的技术是XMLHttpRequest，它是一个具有应用程序接口的JavaScript对象，能够使用HTTP协议连接一个服务器，目前许多浏览器都支持它。通过XMLHttpRequest对象，Ajax可以像桌面应用程序一样只同服务器进行数据层面的交换，而不是每次都刷新页面。
        JavaScript是一种在Web页面中添加动态脚本代码的解释性程序语言，利用它能执行许多复杂的任务，其核心已经嵌入到目前主流的Web浏览器中，Ajax利用JavaScript将DOM、XHTML、XML及CSS等技术综合起来并控制其行为。
        2 Ajax的工作流程
        2.1 发送请求
        Ajax可以通过XMLHttpRequest对象实现采用异步方式在后台发送请求。通常情况下，Ajax发送请求有两种，一种是发送GET请求，另一种是发送POST请求。但是无论发送哪种请求，都需要经过以下4步骤。
        1）初始化XMLHttpRequest对象。为了提高程序的兼容性，需要创建一个跨浏览器的X
MLHttpRequest对象，并且判断XMLHttpRequest对象的实例是否成功，如果不成功，则给予提示。
        2）为XMLHttpRequest对象指定一个回调函数，对于返回结果进行处理。具体代码如下：
        3）创建一个与服务器的连接。在创建时，需要指定发送请求的方式（即GET或POST），以及设置是否采用异步方式发送请求。
        4）向服务器发送请求。利用XMLHttpRequest对象的send（）方法可以实现向服务器发送请求，该方法需要传递一个参数，如果发送的是GET请求，可以将该参数设置为null发送ajax请求的步骤；如果发送的是POST请求，可以通过该参数指定要发送的请求参数。
        2.2 处理服务器响应
        当向服务器发出请求后需要处理服务器响应。条件不同时，服务器对不同的请求有不同的响应结果。XMLHttpRequest对象提供了两个用来访问服务器响应的属性：一个是responseText属性，返回字符串响应；另一个是responseXML属性，返回XML响应。
        2.2.1 处理字符串响应
        字符串响应通常应用在响应不是特别复杂的情况下。如，将响应显示在提示对话框中，或者响应只是显示成功或失败的字符串。将响应显示到提示对话框中的回调函数的具体代码如下：
        Function getResult(){
        if(adyState==4){
        if(http_request.states==200)
        alert(sponseText);
        }else{
        alert(”您所请求的页面有错误！”);}}}
        如果需要将响应结果显示到页面的指定位置，也可以先在页面的合适位置添加一个
或标记，设置该标记的id属性，如：div_result,然后在回调函数中应用以下代码显示响应结果。
        ElementById(“div_result”).innerHTML=sponseText;
        2.2.2 处理XML响应
        如果在服务器端需要生成特别复杂的响应，那么就需要应用XML响应。应用XMLHttpRequest对象的responseXML属性，可以生成一个XML文档，而且当前浏览器已经提供了很好的解析XML文档对象的方法。以下代码可以实现在回调函数中遍历保存留言信息的XML文档并显示在页面中。
       
        function getResult(){
        if(adyState==4){
        if(http_request.states==200){
        var xmldoc=sponseXML;
        var msgs=””;
        for(i=0;i
        var board= ElementsByTagName(”board”).item(i);
        msgs=Attribute(“name”)+”的留言：”+board. getElementsByTagName(‘msg’)[0].firstChild.data+”
        ”;}
        ElementById(“msg”).innerHTML=msgs;}
        else
        {alert(“您所请求的页面有错误！”);}}}
       
       
        被遍历的XML文档结构如下：
       
       
       
       
        你现在好吗？
       
       
        天天向上
       
       
        3 Ajax重构
        Ajax的实现主要依赖于XMLHttpRequest对象，在调用它进行异步数据传输时，该对象的实例在处理完事件后会被销毁，若不对该对象进行封装处理，在下次需要调用它时则需重新构建，且每次调用都需要写大段代码，使用非常不便。目前很多开源的Ajax框架都提供了对XMLHttpRequest对象的封装方案，但是如果用这些框架需要加载很多额外的资源，这势必会造成服务器资源浪费。而Javascript脚本语言支持OO编码风格，通过它可以将Ajax所必须的功能封装在对象中。实现Ajax重构的步骤如下：
        1) 创建一个单独的JS文件，名称为AjaxRequest.js,在该文件中编写重构Ajax所需的代码。
        2) 在需要应用Ajax的页面中应用以下的语句及步骤(1)中创建的JS文件。
       
        3) 在应用Ajax的页面中编写错误处理函数、实例化Ajax对象的方法和回调函数。
        4) 在页面中添加设置系部的下拉列表和设置班级的下拉列表，并在系部下拉列表的onChange事件中，调用getClass()方法获取系部对应的班级。
        5) 编写获取居住地的Servlet实现类AbodeServlet，在该Servlet中的doGet()方法中编写编写代码用于根据传递的action参数执行不同的处理方法。
        6) 在AbodeServlet中编写getDepartment()方法。在该方法中，从保存系部信息的Map集合中获取全部的系部信息，并将获取的系部信息连接为一个以逗号分隔的字符串输出到页面上。getDepartment()方法的具体代码略。
        7) 在AbodeServlet中编写getclass()方法。在该方法中，从保存系部信息的Map集合中获取全部的班级信息，并将获取的班级信息连接为一个以逗号分隔的字符串输出到页面上。getclass()方法的具体代码略。
        8) 为了在页面载入后显示默认的系部，需要在页面的onLoad事件中调用获取系部的方法getDepartment()。具体实现如下：
        Load=function(){
        getDepartment();}
        4 几个注意问题
        4.1 浏览器兼容性问题
        Ajax使用了大量的Javascript和Ajax引擎，这些内容需要浏览器提供足够的支持。目前对此提供支持的浏览器有IE5.0及以上版本、Mozilla1.0、NetScape7及以上版本，但是Mozilla提供XMLHttpRequest对象的方式不一样。因此，使用Ajax的程序必须测试针对各个浏览器的兼容性。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。