AJAX之XMLHttpRequest对象
AJAX,使用XHTML和CSS的基于标准的表示技术,使用DOM进行动态显示和交互,使用XML和XSLT进行数据交换和处理,使用XMLHttpRequest进行异步数据检索,使用Javascript将以上技术融合在一起.由于以上技术,AJAX可以实现异步交互,局部刷新页面的优点,带来更好的用户体验.
其中,AJAX的核心技术是javascript对象 XMLHttpRequest ,它是一种支持异步请求的技术,使得javascript可以在不重载页面的情况下,与web服务器交换数据,解决了异步交互的问题.
使用XMLHttpRequest有五个步骤.
1.创建XMLHttpRequest对象(不同的浏览器,XMLHttpRequest创建不同)(new)
2.注册回调方法(onreadystatechange)
3.设置和服务器交互的相应参数(open)
4.设置向服务器端发送的数据,启动和服务器端的交互(send)
5.判断和服务器端的交互是否完成,并且判断服务器端返回的数据是否正确(readyState,Status)
页面端代码如下,文件名随意,类型为html;虽然文件的类型是html,但由于大部分内容是javascript,所以源码格式选了javascript
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
//声明一个XMLHttpRequest的对象
var xmlhttp;
function submit() {
//1.创建XMLHttpRequest对象(不同的浏览器,XMLHttpRequest创建不同)
if (window.XMLHttpRequest) {
//如果浏览器是IE7,IE8,Firefox,Mozillar,Safari,Opera,则使用该方法创建,直接new
xmlhttp = new XMLHttpRequest();
if (xmlhttp.overrideMimeType) {
//解决Header出现问题,如果不是text/xml格式,则修改
xmlhttp.overrideMimeType("text/xml");
}
} else if (window.ActiveXObject) {
//如果是IE6,IE5.5,IE5浏览器,则使用此方法
//声明一个数组,存放两个不同版本的XMLHttpRequest
var activexName = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
//遍历上面的数组,并使用数组中的不同版本的XMLHttpRequest创建XMLHttpRequest对象
for (var i = 0; i < activexName.length; i++) {
try {
//这儿用的是ActiveXObject创建
xmlhttp = new ActiveXObject(activexName[i]);
break;
} catch (e) {
}
}
}
//判断xmlhttp是否真的创建成功
if (xmlhttp === undefined || xmlhttp === null) {
//创建失败,提示
alert("当前浏览器不支持创建XMLHttpRequest对象,请更换浏览器");
return false;
}
//2.注册回调方法
//callback是个方法,但是这里写成是变量名,指向该方法
//只要就绪状态改变,就会触发callback事件
//这个放在open3和send4之间,也很好
xmlhttp.onreadystatechange = callback;
//一个固定用法,获取文本框中的用户输入的内容,通过唯一的id
var userName = document.getElementById("UserName").value;
/* GET方式交互
//3.设置和服务器交互的相应参数,true表示是异步交互
//open()方法有5个参数,常用的是三个参数,第一个参数表示交互方法,"GET"or"POST",第二个是url,第三个是表示是否异步交互
//将参数提交到AJAX.java的服务器端上,并传入参数name=userName;
xmlhttp.open("GET","AJAX?name="+userName,true);
//4.设置向服务器端发送的数据,启动和服务器端的交互
//由于数据在url中已经设置,所以这里send发送数据为null;使用get方法传送,send常为null;若数据需要保密,则可在send中设置
xmlhttp.send(null); */
//POST方式交互
//3.设置和服务器交互的相应参数,true表示异步交互
//采用POST交互方式,将参数提交到AJAX.java的服务器端上,并使用异步交互
xmlhttp.open("POST", "AJAX?", true);
//4.设置向服务器端发送的数据,启动和服务器端的交互
//POST,需要设置请求头信息
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//send中需要设置发送的数据
xmlhttp.send("name=" + userName);
}
//注册的回调方法的具体操作
function callback() {
//5.判断和服务器端的交互是否完成,并且判断服务器端返回的数据是否正确
if (xmlhttp.readyState === 4) {
//4,表示和服务器端的交互已经完成,
if (xmlhttp.status === 200) {
//表示服务器的相应代码是200,正确返回了数据
//可用纯文本数据的接收方式
var message = xmlhttp.responseText;
//还可用XML数据对应的DOM对象的接收方式
//但是使用前提,服务器端需要设置ContentType为text/xml;
//var domXML=xmlhttp.responseXML;
//向div标签中填充文本内容的方法
var div = document.getElementById("message");
div.innerHTML = message;
alert(xmlhttp.responseXML.documentElement);
}
}
}
</script>
</head>
<body>
<!-- 文本框和按钮-->
<input type="text" id="UserName"/>
<input type="button" value="校验用户名" onclick="submit();"/>
<br/>
<div id="message"></div>
</body>
</html>
服务端代码如下,文件名为AJAX.java,是servlet文件,只贴出有用的代码;
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//服务器端
response.setContentType("text/xml;charset=UTF-8");
PrintWriter out = response.getWriter();
try {
//接收页面传入的参数,name
String old=request.getParameter("name");
//判断是否为空
if(old==null){
out.println("用户名不能为空");
}else{
//不为空,转换编码
String name=new String(old.getBytes("ISO8859-1"),"gb2312");
System.out.println(name);
//如果名字是liuyanling,则提示已存在
if(name.equals("liuyanling")){
out.println("用户名["+ name + "]已经存在,请使用其他用户名");
}else{
out.println("用户名["+name+"]尚未存在,可以使用该用户名注册");
}
}
} finally {
out.close();
}
}
详细介绍下,上面出现的XMLHttpRequest的属性和方法.
方法:
首先是open()方法:用于建立服务器的新请求,指定和服务器交互的HTTP方法,URL地址以及其他请求信息;
xmlhttp.open("GET","AJAX?name="+userName,true);
xmlhttp.open("POST", "AJAX?", true);
open(String method,String url,Boolean asynch,String username,String password);
其中,method,表示Http请求方法;支持所有的HTTP的方法,一般使用"GET","POST";
url表示请求的服务器地址;
asynch表示是否采用异步方式,true表示异步,false表示同步,默认为true,但是还是必须写明true/false;
username,password,可以不指定,分别为用户名和密码,提供http认证机制需要的用户名和密码;
2.send()方法,向服务器发送请求,如果采用异步方式,该方法会立即返回
xmlhttp.send(null);
xmlhttp.send("name=" + userName);
send(content)
其中,content可以不指定或指定为null表示不发送数据,其内容可以是DOM对象,输入流或是字符串;
3.setRequestHeader(String header,String value)方法,设置HTTP请求中的指定头部Header的值为value,该方法需在open方法之后调用.
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
设置content-type的值为application/x-www-form-urlencoded,这个可参考这个进行理解,http://tij.iteye.com/blog/434621
以下方法,代码中未出现过;
它的返回值是一个字符串,包含所有头信息,其中每一个键名和键值用冒号分开,每一组键之间用CR和LF(回车加换行符)来分隔;
5.getResponseHeaders(String header),返回HTTP响应头中指定的键名header对应的值;
6.abort(),停止当前请求,对应的XMLHttpRequest对象会复位到未初始化的状态0;
xmlhttp.abort(); //立即停止当前的请求
属性:
1.readyState,表示XMLHttpRequest对象的状态
0=未初始化.对应已创建,但未调用open (new<?<open)
1=open方法成功调用以后,但是send方法未调用; (open<?<send)
2=send方法已经调用,但尚未开始接收数据; (send<?<开始接收数据)
3=正在接收数据.http响应头信息已经接收,但响应数据尚未接收完成.(接收完头<?<接收完数据)
4=完成.响应数据接收完成. (OK)
2.onreadystatechange,请求状态改变的事件触发器(readyState变化时会调用这个属性上注册的javascript函数)
xmlhttp.onreadystatechange = callback;
function callback() {
}
3.responseBody:将回应信息正文以unsigned byte 数组形式返回，属性只读。
responseText:以字符串的形式返回服务器响应信息，属性只读。
responseXML:将响应信息格式化为XML Document对象返回，属性只读。
4.status,返回当前的http状态码.如200,表示成功;
http状态码分为5大类,
100-199 用于指定客户端应相应的某些动作。
200-299 用于表示请求成功。
300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。
400-499 用于指出客户端的错误。
500-599 用于支持服务器错误。