你的位置:首页 > Java教程

[Java教程]Ajax学习总结(一)


1,Ajax简介

  传统web交互模型是通过浏览器直接将请求发送给web服务器,web服务器收到请求并对请求处理后,将处理结果以回送响应的方式直接发给浏览器。在这种交互模式下,请求和响应的整个过程中,不可避免地会出现时延,因为,用户在发出一条请求后必须等待服务器响应,等待屏幕刷新,等待请求返回和生成新的页面,之后才能再次发出下一条请求。因此,这种交互给用户带来的体验是非常差的,为了改善用户体验,Ajax应运而生。

  Ajax,即异步的JavaScript和(Asynchronous JavaScript and )。Ajax通过在浏览器端引入ajax引擎对用户请求进行预处理后发送给web服务器,同时,ajax引擎还负责接收服务器响应并对响应进行相关处理再回送给浏览器,ajax引擎通过异步的方式允许用户在收到响应之前不断地发送多条请求。Ajax正是通过这种类似于缓冲器的设置,让用户产生请求——响应无延时的体验,从技术角度来说,它并非一种新的技术,而仅仅是几种原有技术的组合,Ajax通过对这些技术的组合有效地实现了web页面与web服务器的动态交互,从而很好地改善了用户体验。这些技术主要包括:

1,CSS和XHTML,用于页面布局和样式设置

2,DOM模型,用于实现各种交互和动态显示。

3,

4,javascript来绑定和调用相关函数,实现服务器响应向浏览器的回送。

  简单来说,Ajax是通过

2,对象及其属性

  

  下面简要介绍一下

     

     onreadystatechange  状态改变时所触发事件的处理程序

     responseText     用于指定以文本形式返回服务器响应信息。

     response用于指定以DOM兼容的文档形式返回服务器响应信息

            status               用于指定服务响应的http状态码,如404、500、200等。

     status Text        用于指定http状态码说明信息。

       readyState        用于设置5个状态值:

        0 (未初始化) 对象已建立,但是尚未初始化(尚未调用open方法)

        1 (初始化) 对象已建立,尚未调用send方法

           2 (发送数据) send方法已调用,但是当前的状态及http头未知

             3 (数据传送中) 已接收部分数据,因为响应及http头不全,这时通过response和responseText获取部分数据会出现错误,

           4 (完成) 数据接收完毕,此时可以通过response和responseText获取完整的响应数据。

   

    open(参数列表); 用于启动ajax引擎,并通过参数设置请求类型和URL地 址及其他请求参数

    send(参数列表); ajax引擎通过调用send方法向服务器发送http请求。

3,Ajax技术开发步骤:

  完成一个ajax应用程序的开发通常需要实现以下5个步骤:

    1.得到对象.(js对象)

    2.注册回调函数

    3.调用open函数,该函数只是用于设置请求方式 以及url,它不发送请求.

    4.调用send函数发送请求,

    5.在回调函数中处理数据。

  下面通过一个简单的例子来演示一下ajax步骤的具体实现:

  1,创建jsp页面,如图,在/webroot目录下创建一个名为ajax.jsp(文件名任取)的jsp页面。代码如下:

 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2  3 <!DOCTYPE HTML> 4 <html> 5  <head> 6   <title>ajax技术案例1--通过地址栏传递参数</title> 7    <script type="text/javascript"> 8      var = null; 9      //创建10      if(window.11        //现在的大多数浏览器包括IE7以上版本采用此方式创建12         = new 13       } else if(window.ActiveXObject) {14        //IE5,IE6版本采用以下方式创建15         = new ActiveXObject("Microsoft."); 16       }17      18      //步骤2 —— 注册回调函数,用于实现ajax引擎对服务器响应数据的接收和处理。19       = function(){20        //步骤5 —— 处理响应数据 当服务器的响应信息完整并成功返回时,ajax引擎调用以下代码向浏览器做出响应。21        if(== 4 && == 200) {22           alert(23         }24       }25      26 /*    get请求方式,参数设置27   28     //步骤3 —— 启用ajax引擎并设置请求类型和URL地址,同时通过地址栏传递请求参数29       30      31       //步骤4 —— ajax引擎根据步骤3设置的URL向服务器发送请求32       33 */34      //post请求方式,参数设置35       "POST","${pageContext.request.contextPath}/ajax1");  36       "content-type","application/x-www-form-urlencoded");  37       "name=lzhp");38    </script>39  </head> 40  <body>41   42  </body>43 </html>

  2,创建处理请求的Servlet程序,代码如下:

 1 package com.swu.ajax; 2  3 import java.io.IOException; 4 import java.io.PrintWriter; 5 import javax.servlet.ServletException; 6 import javax.servlet.http.HttpServlet; 7 import javax.servlet.http.HttpServletRequest; 8 import javax.servlet.http.HttpServletResponse; 9 10 public class Ajax1Servlet extends HttpServlet {11 12   public void doGet(HttpServletRequest request, HttpServletResponse response)13       throws ServletException, IOException {14     //接收请求参数15     String name = request.getParameter("name");16     //响应浏览器请求,17     PrintWriter out = response.getWriter();18     out.write("Hello " + name);19     out.flush();20     out.close();    21     22     //测试服务器是否收到浏览器端发送的请求。23     System.out.println(name);24   }25   26   public void doPost(HttpServletRequest request, HttpServletResponse response)27       throws ServletException, IOException {28     this.doGet(request, response);29   }30 }

  3,配置Servlet,在web.中配置servlet映射

 1 <??> 2 <web-app version="2.5"  3   ="http://java.sun.com/  4   ="http://www.w3.org/2001/  5   xsi:schemaLocation="http://java.sun.com/ 6   http://java.sun.com/> 7  <display-name></display-name> 8  <servlet> 9   <servlet-name>Ajax1Servlet</servlet-name>10   <servlet-class>com.swu.ajax.Ajax1Servlet</servlet-class>11  </servlet>12  13  <servlet-mapping>14   <servlet-name>Ajax1Servlet</servlet-name>15   <url-pattern>/ajax1</url-pattern>16  </servlet-mapping>17 </web-app>

  4,测试程序,将应用程序部署到tomcat服务器,在浏览器地址栏输入如下URL地址: http://localhost:8080/ajax//ajax1.jsp,如图所示:

    

    注意,地址栏输入的URL必须为 http://localhost:8080/ajax//ajax1.jsp ,不能写成http://localhost:8080/ajax//ajax1,原因是此处用户实际上首先需要访问ajax1.jsp页面,然后ajax引擎再根据ajax1.jsp页面中http://localhost:8080/ajax//ajax1请求。如下图:

    

  5,结果如下图所示:

    

  以上仅对Ajax及其实现原理做了简单介绍,并通过一个简单的例子演示了Ajax技术的具体实现步骤,更为详细深入的内容请期待后续博文分享。