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. r eadyState 属性
readyState 属性存有服务器响应的状态信息。每当 readyState 改变时, onreadystatechange 函数就会被执行。
状态 描述
0 请求未初始化(在调用 open() 之前)
1 请求已提出(调用 send() 之前)
2 请求已发送(这里通常可以从响应得到内容头部)
3 请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应)
4 请求已完成(可以访问服务器响应并使用它)
其中send()方法需要包含有三个参数,第一个是发送请求所使用的(Get()和Post()方法),第二个参数是规定服务器端脚本的Url,三个参数规定是设置对请求进行异步处理。
咱们不再这里费口舌了,来个Servlet Ajax的小例子吧:
首先 我们来配置Web.xml。在里面配置一个servlet,跟往常一样:
<servlet>
<servlet-name>selectcity</servlet-name>
<servlet-class>com.bx.servlet.SelectCityServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>selectcity</servlet-name>
<url-pattern>/selectCityServlet</url-pattern>
</servlet-mapping>
现在看我们的.jsp 文件:
<html>
<head>
<title>select city</title>
</head>
<script type="text/javascript">
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<city.length;i++){
str[i]=city[i].firstChild.data;
}
buildSelect(str,document.getElementById("city"));
}
}
}
function buildSelect(str,sel) {
for(var i=0;i<str.length;i++) {
sel.options[sel.options.length]=new Option(str[i],str[i]);
}
}
</script>
<body>
<select name="state" onChange="getResult(this.value)">
<option value="">Select</option>
<option value="zj">浙江</option>
<option value="zs">江苏</option>
</select>
<select id="city">
<option value="">CITY</option>
</select>
</body>
</html>
最后我们来看看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("<state>");
if ("zj".equals(state)){
sb.append("<city>hangzhou</city><city>huzhou</city>");
} else if("zs".equals(state)){
sb.append("<city>nanjing</city><city>yangzhou</city><city>suzhou</city>");
} else if("hb".equals(state)){
sb.append("<city>tangshan</city><city>handan</city>");
}
sb.append("</state>");
System.out.println(sb);
PrintWriter out=response.getWriter();
out.write(sb.toString());
out.close();
}
}
这里是不是挺简单的呢,首先是通过request取得state参数,然后通过state参数生成相应的xml文件,最后在讲xml中的数据从printWriter输出。。目前为止,这个例子已经结束了,是不是挺简单的呢??