一、什么是XMLHttpRequest
XMLHttpRequest可以提供不重新加载页面的情况下更新网页,在页面加载后在客户端向服务器请求数据,在页面加载后在服务器端接受数据,在后台向客户端发送数据。XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步返回 Web 服务器的响应,并且能以文本或者一个 DOM 文档形式返回内容。尽管名为 XMLHttpRequest,它并不限于和 XML 文档一起使用:它可以接收任何形式的文本文档。XMLHttpRequest 对象是名为 AJAX 的 Web 应用程序架构的一项关键功能。
二、XMLHttpRequest的创建
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
1、创建用作xmlhttprequest对象的xmlhttp变量,值设为空
xmlhttp=null;
if (window.XMLHttpRequest)
{2、创建适合firefox、opera、safari的xmlhttprequest对象
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{3、创建适合IE5或IE6的xmlhttprequest对象
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null)
{
4、设置回调函数
xmlhttp.onreadystatechange=state_Change;
5、初始化http请求参数
xmlhttp.open("GET",url,true);
6.发送http请求参数
xmlhttp.send(null);
}
else
{
alert("Your browser does not support XMLHTTP.");
}
}
//回调函数
function state_Change()
{
if (xmlhttp.readyState==4)
{// 4 = "loaded"
if (xmlhttp.status==200)
{// 200 = OK
// ...our code here...
}
else
{
alert("Problem retrieving XML data");
}
}
}
</script>
三、实例:
说明:用户输入用户名后,会在页面中显示信息,不用重新加载页面
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<input type="text" id="name"/>
<input type="button" name="submit" value="验证用户名是否已经存在" οnclick="submit()">
<div id="message"></div>
<script type="text/javascript">
var xmlhttp;
function submit(){
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
if(xmlhttp.overrideMineType){
xmlhttp.overrideMineType("text/xml");
}
}else if (window.AciveXObject){
var MSXML=['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTP.3.0','MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
for(var n=0;n<MSXML.length;n++){
try{
xmlhttp = new ActiveXObject(MSXML[n]);
break;
}catch(e){}
}
}else{
alert("不能建立XMLHttpRequest对象");
return false;
}
var name=document.getElementById("name").value;
if(name == null || name == ""){
alert("用户名不能为空");
}
xmlhttp.open("GET","AJAX?name=" + name,true);
xmlhttp.onreadystatechange=callback;
xmlhttp.send(null);
}
//回调函数
function callback(){
//http响应已完成接收
if(xmlhttp.readyState == 4){
//由服务器返回信息成功
if(xmlhttp.status == 200){
var messageNode=document.getElementById("message");
messageNode.innerHTML=xmlhttp.responseText;
}
}
}
</script>
</body>
</html>
服务器端代码:
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
try {
String old=request.getParameter("name");
if(old==null){
out.println("用户名不能为空");
}else{
//String name=new String(old.getBytes("ISO8859-1"),"gb2312");
String name=URLDecoder.decode(old,"utf-8");
System.out.println(name);
if(name.equals("zhangxiao")){
out.println("用户名[" + name + "]已经存在,请使用其他用户名");
}else{
out.println("用户名[" + name + "]尚未存在,可以使用该用户名");
}
}
}finally{
out.close();
}
}
运行结果:
1、输入用户名
2.点击按钮
四、属性说明
1、readyState
HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时,这个属性的值从 0 开始,直到接收到完整的 HTTP 响应,这个值增加到 4。它的状态改变就会触发onreadystatechange函数。
表中给出了它的5个属性:
状态 | 名称 | 描述 |
0 | Uninitialized | 初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置 |
1 | Open | open() 方法已调用,但是 send() 方法未调用。请求还没有被发送。 |
2 | Send | Send() 方法已调用,HTTP 请求已发送到 Web 服务器。未接收到响应 |
3 | Receiving | 所有响应头部都已经接收到。响应体开始接收但未完成 |
4 | Loaded | HTTP 响应已经完全接收 |
2、responseText
从服务器接收到的文本
3、responseXML
从服务器接收到的xml
4、state
由服务器返回的 HTTP 状态代码,如 200 表示成功,而 404 表示 "Not Found" 错误