AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML)，是指一种创建交互式网页应用的网页开发技术。

传统的web应用允许用户填写表单(form)，当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单，然后返回一个新的网页。这个做法浪费了许多带宽，因为在前后两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。

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

Ajax应用程序的优势在于：

1. 通过异步模式，提升了用户体验

2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用

3. Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。

XMLHttpRequest 对象

通过使用 XMLHttpRequest对象，web开发者可以做到在页面已加载后从服务器更新页面！

Ajax属性：

1.onreadystatechange 属性

onreadystatechange 属性存有处理服务器响应的函数。下面的代码定义一个空的函数，可同时对onreadystatechange属性进行设置：

例如：

function getResult(username,password){

createXmlHttp();                                //创建XMLHttpRequest对象

xmlHttp.open("POST", "UserServlet?flag=add&username="+username+"&password="+password);

2. readyState 属性

readyState 属性存有服务器响应的状态信息。每当readyState改变时，onreadystatechange函数就会被执行。

状态描述

0

请求未初始化(在调用 open() 之前)

1

请求已提出(调用 send() 之前)

2

请求已发送(这里通常可以从响应得到内容头部)

3

请求处理中(响应中通常有部分数据可用，但是服务器还没有完成响应)

4

请求已完成(可以访问服务器响应并使用它)

其中send()方法需要包含有三个参数，第一个是发送请求所使用的(Get()和Post()方法)，第二个参数是规定服务器端脚本的Url，三个参数规定是设置对请求进行异步处理。

咱们不再这里费口舌了，来个Servlet Ajax的小例子吧：

首先 我们来配置Web.xml。在里面配置一个servlet,跟往常一样：

selectcity

com.bx.servlet.SelectCityServlet

selectcity

/selectCityServlet

现在看我们的.jsp 文件：

select city

function getResult(stateVal) {

alert(stateVal);

var url = "selectCityServlet?state="+stateVal;

if (window.XMLHttpRequest) {

req = new XMLHttpRequest();

}else if (window.ActiveXObject) {

req = new ActiveXObject("Microsoft.XMLHTTP");

}

if(req){

req.open("GET",url, true);

req.onreadystatechange = complete;

req.send(null);

}

}

function complete(){

if (req.readyState == 4) {

if (req.status == 200) {

var city = req.responseXML.getElementsByTagName("city");

var str=new Array();

for(var i=0;i

str[i]=city[i].firstChild.data;

}

buildSelect(str,document.getElementById("city"));

}

}

}

function buildSelect(str,sel) {

for(var i=0;i

sel.options[sel.options.length]=new Option(str[i],str[i]);

}

}

Select

浙江

江苏

CITY

最后我们来看看servlet文件吧：

public class SelectCityServlet extends HttpServlet {

public SelectCityServlet() {

super();

}

public void destroy() {

super.destroy();

}

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

try {

Thread.sleep(1000*3);

} catch (InterruptedException e) {

e.printStackTrace();

}

System.out.println("Hello | " + request.getParameter("state"));

response.setContentType("text/xml");

response.setCharacterEncoding("utf-8");

response.setHeader("Cache-Control", "no-cache");

String state = request.getParameter("state");

StringBuffer sb=new StringBuffer("");

if ("zj".equals(state)){

sb.append("hangzhouhuzhou");

} else if("zs".equals(state)){

sb.append("nanjingyangzhousuzhou");

} else if("hb".equals(state)){

sb.append("tangshanhandan");

}

sb.append("");

System.out.println(sb);

PrintWriter out=response.getWriter();

out.write(sb.toString());

out.close();

}

}

这里是不是挺简单的呢，首先是通过request取得state参数，然后通过state参数生成相应的xml文件，最后在讲xml中的数据从printWriter输出。。目前为止，这个例子已经结束了，是不是挺简单的呢？？

运行结果如下：

posted on 2011-01-01 12:36 龍ぜ殘剑 阅读(2440) 评论(0)  编辑  收藏