一、XMLHttpRequest 对象的方法与属性
方 法 | 描 述 |
abort() | 停止当前请求 |
getAllResponseHeaders() | 把HTTP请求的所有响应首部作为键/值对返回 |
getResponseHeader("header") | 返回指定首部的串值 |
open("method", "url") | 建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数 |
send(content) | 向服务器发送请求 |
setRequestHeader("header", "value") | 把指定首部设置为所提供的值。在设置任何首部之前必须先调用open() |
属 性 | 描 述 |
onreadystatechange | 每个状态改变时都会触发这个事件处理器,通常会调用一个JavaScript函数 |
readyState | 请求的状态。有5个可取值:0 = 未初始化,1 = 正在加载,2 = 已加载,3 = 交互中,4 = 完成 |
responseText | 服务器的响应,表示为一个串 |
responseXML | 服务器的响应,表示为XML。这个对象可以解析为一个DOM对象 |
status | 服务器的HTTP状态码(200对应OK,404对应Not Found(未找到),等等) |
statusText | HTTP状态码的相应文本(OK或Not Found(未找到)等等) |
js/xmlHttpRequest.js
function createXmlHttpRequest() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("您的浏览器不支持AJAX!"); return false; } } } return xmlHttp; }
浏览器有两种内核,IE内核和firefox内核;因此需要根据当前用户浏览器进行判断;
XMLHttpRequest有一些常用属性:
(1)readyState:请求的状态;(4 表示已经响应完毕)
(2)onreadystatechange:readyState改变时调用,通常用于回调函数的返回值;
(3)responseText:返回纯文本对象;
(4)responseXML:返回XML数据的对象;
(5)status:返回当前HTTP的状态(200为正常)
XMLHttpRequest的常用函数:
(1)open("GET/POST","url");: 创建请求,指定是post还是get,并且指定发送的目的地URL;
(2)send(param);:发送请求,通常param=null;
知识回顾:
(1)document.getElementById("name").innerHTML可以设定此控件的值;
(2)onblur事件表示失去焦点时调用;
jsp文件:
<head>
<script type="text/javascript" src="js/xmlHttpRequest.js"></script>
</head>
<body>
<script type="text/javascript">
function userNameCheck()
{
var username = document.all.username.value; //获得text的值
var request = createXmlHttpRequest();//创建request 对象
request.open("post","UserAction?username="+username);//建立到服务器的新请求
request.send();//向服务器发送请求
request.onreadystatechange=function()//指定当readyState属性改变时的事件处理句柄
{
if (request.readyState==4)//提取当前HTTP的就绪状态,状态4表示:响应已完成,可以访问服务器响应并使用它
if (request.status==200)//HTTP状态,我们期望的状态码是 200,它表示一切顺利。
//如果就绪状态是 4 而且状态码是 200,就可以处理服务器的数据了,而且这些数据应该就是要求的数据
{
var value = request.responseText;//服务器返回响应文本
if (value=="true")
{
document.all.unc.innerHTML="该用户名已存在";
}
else
{
document.all.unc.innerHTML="OK";
}
}
}
}
</script>
用户姓名: <input type="text" name="username" οnblur="userNameCheck()"/><font color="red" size="-1" id="unc"></font>
</body>
</html>
public class UserAction extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { String username=request.getParameter("username");
if(username.equals("chenlh"))
response.getWriter().print("true");
else
response.getWriter().print("false"); }}