Java Web Ajax技术

Ajax技术

Ajax(Asynchronous JavaScript and XML)是运用JavaScript和扩展语言(XML)实现浏览器与服务器通信的一种技术。

Ajax技术简介

Ajax实现浏览器与服务器异步交互技术 ，用户请求不需要刷新整个页面只需刷新局部页面，就能实现数据交互。主要设计以下几种技术。

• 使用XHTML(HTML)和CSS构建标准化的展示层
• 使用DOM进行动态显示和交互
• 使用XML和XSLT进行数据交换和操作
• 使用XMLHttpRequest异步获取数据
• 使用JavaScript将所有元素绑定。

XMLHttpRequest对象

XMLHttpRequest对象是Ajax技术的核心技术之一。这个对象需要用JavaScript来创建。

XMLHttpRequest对象的创建

不同的浏览器创建方式不同

	var xmlHttpRequest = null //声名XMLHttpRequest对象
	if(window.XMLHttpRequest){ //Mozilla,Safari,Opera,IE7等浏览器创建
		xmlHttpReqeust = new XMLHttpRequest();
	}else if(window.ActiveXObject){
				try{
					xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");//IE较新版本创建
				}catch(e){
					try{
						xmlHttpRequest = new ActiveObject("Microsoft.XMLHTTP");//IE较老版本
					}catch(e){}
				}
			}

XMLHttpRequest的方法和属性

1. open(String request-type,String url,Boolean asynch,String name,String password)：用于建立到服务器的连接。

• request-type：发送请求的类型。get或post
• url：要连接的服务器URL
• asynch：若使用异步连接则为true，否则为false。默认true。
• name:若需要身份验证，则指定用户名。
• password：若需要密码，则指定密码。
• 通常使用前三个参数

2. send(String content):向服务器发送请求。

• context:发送的内容

3. setRequestHeader(String label,String value):发送请求前设置请求头。

• label：若open()方法发送的请求类型为POST，则等于：“Content-type”。
• value：若open()方法发送的请求类型为POST，则等于：“application/x-www-form-urlencoded”)。

4. readyState属性：返回HTML的就绪状态。

• 0：请求没有建立，open()方法没有调用。
• 1：请求已经建立，open()方法已调用，但请求没有发送，send()方法没有调用。
• 2：请求已发送，send()方法已经调用，但请求正在处理中。这里可以从响应得到内容的头部。
• 3：请求已经处理，但服务器还没有响应。
• 4：响应已经完成。

5. status属性：返回服务器响应的状态码。

• 200：一些顺利。
• 404：页面不存在。
• 403/401：所访问的数据受到保护或者禁止访问。

6. onreadystatechange属性：用于指定XMLHTTPRequest对象的状态改变函数。
7. responseText和responseXML属性：XMLHTTPRequest对成功返回的信息。

• responseText:服务器返回的请求响应为文本，可将传回的信息当作字符串处理。
• responseXML:服务器返回的XML类型的响应，可将传回的信息当XML文档使用。

XMLHttpRequest对象的运行周期

1. Ajax应用从XMLHTTPRequest对象的创建开始。
2. XMLHttpRequest对象发送完成。服务器有没有响应，需通过readyState属性判断。当readyState属性发生改变时，可onreadystatechange属性指定事件处理函数，这个函数称为回调函数。
3. readyState=4&&status=200时，则表示服务器响应完成，且是正确的响应。

Ajax使用思路

1. 创建XMLHttpRequest对象
2. 指定响应处理函数
3. 发送HTTP请求
4. 处理服务器返回的信息

JavaScript创建Ajax技术

1. Java Web 根目录 WebRoot目录下新建一个JS文件夹，创建一个Ajax.js文件，并且写下如下代码。

//声名XMLHttpRequest对象
var xmlHttpRequest = null;
//创建XMLHttpRequest对象函数
function createXHR(){
	try{
		xmlHttpRequest = new XMLHttpRequest();
	}catch(e1){
		var msxmlhttp=new Array("Msxml2.XMLHTTP.6.0",
								"Msxml2.XMLHTTP.5.0",
								"Msxml2.XMLHTTP.4.0",
								"Msxml2.XMLHTTP.3.0",
								"Msxml2.XMLHTTP",
								"Microsoft.XMLHTTP");
		for(var i=0;i<msxmlhttp.length;i++){
			try{
				xmlHttpRequest = new ActiveObject(msxmlhtt[i]);
				if(xmlHttpRequest!=null){break;}
			}catch(e2){}
		}
	}
	if(xmlHttpRequest==null){
		alert("不能创建Ajax对象");
	}
}
//发送客户端的请求函数
//url:请求的服务器地址
//param:需要传递的参数
//method:请求的方式（get/post)
//handler:回调函数
function sendRequest(url,param,method,handler){
	createXHR();
	if(!xmlHttpRequest) return false;
	xmlHttpRequest.onreadystatechange=handler;
	if(method=="GET"){
//GET方式，可以直接传递参数，且不需要修改请求头。
		xmlHttpRequest.open(method,url+'?'+params,true);
		xmlHttpRequest.send(null);
	}
	if(method=="POST"){
//POST方式，需要修改请求头，且在send()方法中传递参数。
		xmlHttpRequest.open(method,url,true);
		xmlHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xmlHttpRequest.send(params);
	}
}

案例——异步表单验证用户名及其密码

index.jsp

Servlet：FormCheck.java

案例——实现级联列表

业务处理Servlet：List.java
接受传递过来的省份，返回城市列表

视图页面JSP：select.jsp
选择省份传递后台：

内嵌JS函数：

@syl 2021/06/30 15:48 晴 25° 抽烟