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>