关于AJAX异步处理的简单介绍及原创JSP应用实例

AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。它有机地包含了以下几种技术：
Ajax（Asynchronous JavaScript + XML）的定义
基于web标准（standards-based presentation）XHTML+CSS的表示；
使用 DOM（Document Object Model）进行动态显示及交互；
使用 XML 和 XSLT 进行数据交换及相关操作；
使用 XMLHttpRequest 进行异步数据查询、检索；
使用 JavaScript 将所有的东西绑定在一起。
类似于DHTML或LAMP，AJAX不是指一种单一的技术，而是有机地利用了一系列相关的技术。事实上，一些基于AJAX的“派生/合成”式（derivative/composite）的技术正在出现，如“AFLAX”。
AJAX的应用使用支持以上技术的web浏览器作为运行平台。这些浏览器目前包括：Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式对象，也不支持XSLT。[1]
与传统的web应用比较
传统的web应用允许用户填写表单(form)，当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单，然后返回一个新的网页。这个做法浪费了许多带宽，因为在前后两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。
与此不同，AJAX应用可以仅向服务器发送并取回必需的数据，它使用SOAP或其它一些基于XML的web service接口，并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少，结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了。

以下为原创，转载请注明出处。

 AJAX JSP应用实例
作者：Sidac

这个实例对AJAX的应用进行了简单的演示，并有效地封装了几个非常的方法。

其中通过JSP页面的原创的URLEscape()函数和JavaScript里的unescape()函数，有效地解决了AJAX乱码问题。

如果你是个AJAX的初学者，通过这个实例，你可以感受到AJAX的魅力，而且不会迷失到复杂的AJAX处理过程中。

而作为一个掌握AJAX技术的程序员来说，这个实例也可以为你提供一个新的思路。

这个实例为了简单，并没有出现通过AJAX返回的XML结果，及对XML结果的处理，如果你能够把这段代码研究明白的话，可以说你已经掌握了AJAX的精髓，那么关于XML结果的返回与处理，就可以慢慢研究，当然如果你对XML、DOM有所研究的话，那么应用起来就更不会有难度。

这个实例稍加扩展，就完全做为JSON（AJAX的一个分支）处理的基础类，如果有兴趣的话，建议深入研究下。

共三个文件：

 

AJAX封装脚本

ajax.js

//通过AJAX技术异步提取数据的script
//作者：Sidac
//E-mail: sidac@sohu.com
function Ajax() {
 var XMLHttpReq = false; //XMLHttpRequest 对象
 var completeEvent = "";
 
 //主方法，根据传递过来的目标链接、运行方法异步提取数据，并在结束后调用指定方法
 //url　要打开的目标链接（运行对象）
 //method　运行方法，一般用"get"和"post"
 //onComplete　得到数据后，调用并将数据传递过去的方法（function）
 this.Request = function(url, method, onComplete){
  completeEvent = onComplete; //记录提取完成后调用的方法

   XMLHttpReq = Try.these(
   function() {return new XMLHttpRequest()},
   function() {return new ActiveXObject('Msxml2.XMLHTTP')},
   function() {return new ActiveXObject('Microsoft.XMLHTTP')}
  ) || false; //创建XMLHttpReqeust对象
  XMLHttpReq.open(method, url, true); //打开URL
  XMLHttpReq.onreadystatechange = this.proce; //设定状态变化时的处理方法
  XMLHttpReq.send(null); //发送运行请求
  };
 
 this.proce = function(){ //状态变化时的处理方法，用于接收返回数据
  if(XMLHttpReq.readyState == 4){ //运行完成
   var result = ""; //运行结果
   if(XMLHttpReq.status == 200){ //返回正确
       result = XMLHttpReq.responseText.replace(//r/n/g, ""); //接收返回数据，去除其中的回车
   }else{ //返回错误
    result = "{name: 'ErrorResult', members: [name: 'error', value: '返回结果不正确']};";
   }
   eval(completeEvent + "(/"" + result + "/")"); //动态调用方法
   }
  };
 
  //提取自　Prototype.js
 /*  Prototype JavaScript framework, version 1.5.0_rc0
  *  (c) 2005 Sam Stephenson <sam@conio.net>
  *
  *  Prototype is freely distributable under the terms of an MIT-style license.
  *  For details, see the Prototype web site: http://prototype.conio.net/
  *
 /*--------------------------------------------------------------------------*/
 var Try = {
  these: function() {
   var returnValue;

   for (var i = 0; i < arguments.length; i++) {
    var lambda = arguments[i];
    try {
     returnValue = lambda();
     break;
    } catch (e) {}
   }

   return returnValue;
  }
 };
};

 

AJAX处理页面

ajax.jsp

<%@page contentType="text/html; charset=GBK"%>
<%!
 /**
  * 将字符串转换为javascript escape编码
  * @param str 源字符串
  * @return 转换结果
  * 作者：Sidac
  * E-mail: sidac@sohu.com
  */
 public static String URLEscape(String str){
  String unCodeChars = "*+-./0123456789@ABCDEFGHIJKLMNOPQRSTUVWXYZ_abcdefghijklmnopqrstuvwxyz";
  StringBuilder srcString = new StringBuilder(str);
  StringBuilder result = new StringBuilder("");
  for(int i = 0; i < srcString.length(); i ++){
   String subChar = srcString.substring(i, i + 1);
   int charCode = subChar.codePointAt(0);
   if(charCode > 255 || charCode < 0){
    result.append("%u").append(Integer.toHexString(charCode));
   }else if(unCodeChars.indexOf(subChar) == 0){
    result.append("%").append(Integer.toHexString(charCode));
   }else{
    result.append(subChar);
   }
  }
  
  return result.toString();
 }
%>
<%
 //设置输出的信息的格式及字符集
 response.setContentType("text/xml;charset=gbk");
 response.setHeader("Cache-Control", "no-cache");
 
 //设置接收的信息的字符集并接收参数
 request.setCharacterEncoding("GBK");

 String parm = request.getParameter("parm");
 try {//动态运行，并输出结果
  String result = "";
  if(parm.equals("Tom")){
   result = "男";
  }else{
   result = "女";
  }
  
  out.println(URLEscape(result));
 } catch (Exception e) {//运行错误则输出错误信息
  e.printStackTrace();
 }
%>

 

测试页面：

test.html

<html>
<head>
 <title>AJAX Test</title>
 <script>
  //页面AJAX事件响应及返回结果处理
  //作者：Sidac
  //E-mail:sidac@sohu.com
  
  //AJAX事件响应
  function getPersonSex(name){
   var parm = name; //配置参数
   var url = "ajax.jsp?parm=" + name; //AJAX响应处理页面（也可定向到Servlet）
   var completeEvent = "ajaxResult"; //返回结果时调用的结果处理方法
   new Ajax().Request(url, "post", completeEvent); //发送AJAX请求

   document.form1.state.value = "发出AJAX请求";
  }
  
  //AJAX返回结果处理
  function ajaxResult(result){
   try{
    if(result != ""){ //有返回结果
     result = unescape(result); //进行编码转换，以避免乱码
     
     document.form1.sex.value = result;
     document.form1.state.value = "已处理AJAX返回";
     return;
    }
   }catch(e){
    throw e;
   }
   document.form1.state.value = "AJAX返回错误";
  }
 </script>
 <script src='ajax.js'></script>
</head>
<body>
<form name="form1">
请选择一位人员：
<select name="name" οnchange='getPersonSex(this.value);'>
<option value="Tom" selected>汤姆</option>
<option value="Cate">凯特</option>
</select>
<br><br><br>
您选择的人员性别是：
<input type="text" name="sex" readonly>
<br><br><br>
AJAX处理状态：
<input type="text" name="state" readonly>
</form>
</body>
</html>