XMLHttpRequest对象：
在Ajax中主要是通过XMLHttpRequest对象处理发送异步请求和回应的，
如果要创建一个XMLHttpRequest对象则必须使用JavaScript，创建语句如下：
创建XMLHttpRequest对象----create_ajax.htm
<html> <head> <title></title> <script language="javascript"> var xmlHttp ;//Ajax核心对象名称 function createXMLHttp(){//创建XMLHttpRequest核心对象 if(window.XMLHttpRequest){//判断当前使用的浏览器类型 xmlHttp = new XMLHttpRequest() ;//表示使用的是FireFox内核的浏览器 } else { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") ;//表示使用的是IE内核的浏览器 } } </script> </head> <body> </body> </html>XMLHttpRequest对象的属性：
| NO. | 属性 | 描述 |
|---|---|---|
| 1 | onreadystatechange | 指定当readState状态改变时使用的操作，一般用于指定具体的回调函数 |
| 2 | readyState | 返回当前请求的状态，只读 |
| 3 | responseBody | 将回应信息正文以unsigned byte数组形式返回，只读 |
| 4 | responseStream | 以Ado Stream对象的形式返回响应信息，只读 |
| 5 | responseText | 接收以普通文本返回的数据，只读 |
| 6 | responseXML | 接收以XML文档形式回应的数据，只读 |
| 7 | status | 返回当前请求的http状态码，只读 |
| 8 | statusText | 返回当前请求的响应行状态，只读 |
readyState一共有5种取值，分别介绍如下：
2：请求已经发出正在处理之中（这里通常可以冲响应得到内容头部）
3：请求已经处理，正在接受服务器的信息，响应中通常有部分数据可用，但是服务器还没有完成响应
4：响应已完成，可以访问服务器响应并使用它
XMLHttpRequest对象的方法：
| NO. | 方法 | 描述 |
|---|---|---|
| 1 | abort() | 取消当前所发出的请求 |
| 2 | getAllResponseHeaders() | 取得所有的HTTP头信息 |
| 3 | getResponseHeader() | 取得一个指定的HTTP头信息 |
| 4 | open() | 创建一个HTTP请求，并指定请求模式，如GET请求或POST请求 |
| 5 | send() | 将创建的请求发送到服务器端，并接收回应信息 |
| 6 | setRequestHeader() | 设置一个指定请求的HTTP头信息 |
第一个Ajax程序
返回数据的页面----content.htm
使用异步处理----ajax_receive_content.htm
<span style="font-size:12px;"><html>
<head>
<title></title>
<script language="javascript">
var xmlHttp ;
function createXMLHttp(){
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest() ;
} else {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") ;
}
}
function showMsg(){
createXMLHttp() ; // 创建XMLHttp对象
xmlHttp.open("POST","content.htm") ;
// 设置操作的回调函数
xmlHttp.onreadystatechange = showMsgCallback ;
xmlHttp.send(null) ;
}
function showMsgCallback(){ // 回调操作函数
if(xmlHttp.readyState == 4){ // 调用完成
if(xmlHttp.status == 200){ // HTTP状态码操作正常
var text = xmlHttp.responseText ;
document.getElementById("msg").innerHTML = text ;
}
}
}
</script>
</head>
<body>
<input type="button" onClick="showMsg()" value="调用AJAX显示内容">
<span id="msg"></span>
</body>
</html></span>
异步验证
编写注册表单页----regist.htm
<html>
<head>
<title></title>
<script language="javascript">
var xmlHttp ;
var flag = false ;
function createXMLHttp(){
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest() ;
} else {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") ;
}
}
function checkUserid(userid){
createXMLHttp() ;
xmlHttp.open("POST","CheckServlet?userid="+userid) ;//设置一个请求，通过地址重写的方式将userid传递到JSP中
xmlHttp.onreadystatechange = checkUseridCallback ;//设置请求完成后处理的回调函数
xmlHttp.send(null) ;//发送请求，不传递任何参数
document.getElementById("msg").innerHTML = "正在验证..." ;
}
function checkUseridCallback(){//定义回调函数
if(xmlHttp.readyState == 4){//数据返回完毕
if(xmlHttp.status == 200){//HTTP操作正常
var text = xmlHttp.responseText ;//接收返回的内容
if(text == "true"){ // 用户id已经存在了
document.getElementById("msg").innerHTML = "用户ID重复，无法使用！" ;
flag = false ;
} else {
document.getElementById("msg").innerHTML = "此用户ID可以注册！" ;
flag = true ;
}
}
}
}
function checkForm(){
return flag ;
}
</script>
</head>
<body>
<form action="regist.jsp" method="post" onsubmit="return checkForm()">
用户ID：<input type="text" name="userid" onblur="checkUserid(this.value)"><span id="msg"></span><br>
姓名：<input type="text" name="name"><br>
密码：<input type="password" name="password"><br>
<input type="submit" value="注册">
<input type="reset" value="重置">
</form>
</body>
</html>
验证用户名是否存在----CheckServlet.java
package org.lxh.ajaxdemo ; import java.sql.* ; import java.io.* ; import javax.servlet.* ; import javax.servlet.http.* ; public class CheckServlet extends HttpServlet{ public static final String DBDRIVER = "org.gjt.mm.MysqL.Driver" ; public static final String DBURL = "jdbc:MysqL://localhost:3306/mldn" ; public static final String DBUSER = "root" ; public static final String DBPASS = "MysqLadmin" ; public void doGet(HttpServletRequest request,HttpServletResponse response) throws servletexception,IOException{ this.doPost(request,response) ; } public void doPost(HttpServletRequest request,IOException{ request.setCharacterEncoding("GBK") ; response.setContentType("text/html") ;//设置回应的MIME Connection conn = null ;//声明数据库连接对象 PreparedStatement pstmt = null ;//声明数据库操作 ResultSet rs = null ;//声明数据库结果集 PrintWriter out = response.getWriter() ; String userid = request.getParameter("userid") ;//接收验证userid try{ Class.forName(DBDRIVER) ; conn = DriverManager.getConnection(DBURL,DBUSER,DBPASS) ; String sql = "SELECT COUNT(userid) FROM user WHERE userid=?" ; pstmt = conn.prepareStatement(sql) ; pstmt.setString(1,userid) ; rs = pstmt.executeQuery() ; if(rs.next()){ if(rs.getInt(1)>0){ // 用户ID已经存在了 out.print("true") ; } else { out.print("false") ; } } }catch(Exception e){ e.printstacktrace() ; }finally{ try{ conn.close() ; }catch(Exception e){} } } }配置web.xml
<servlet> <servlet-name>CheckServlet</servlet-name> <servlet-class>org.lxh.ajaxdemo.CheckServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>CheckServlet</servlet-name> <url-pattern>/ajaxdemo_02/CheckServlet</url-pattern> </servlet-mapping>返回XML数据
要返回XML文件----allarea.xml
<?xml version="1.0" encoding="GBK"?> <allarea> <area> <id>1</id> <title>北京</title> </area> <area> <id>2</id> <title>天津</title> </area> <area> <id>3</id> <title>南京</title> </area> </allarea>使用Ajax解析XML，并生成下拉列表框----ajax_select.htm
<html>
<head>
<title></title>
<script language="javascript">
var xmlHttp ;
function createXMLHttp(){
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest() ;
} else {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") ;
}
}
function getCity(){
createXMLHttp() ;
xmlHttp.open("POST","allarea.xml") ;
xmlHttp.onreadystatechange = getCityCallback ;
xmlHttp.send(null) ;
}
function getCityCallback(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
var allarea = xmlHttp.responseXML.getElementsByTagName("allarea")[0].childNodes ; // 取得全部的allarea下的节点
var select = document.getElementById("city") ;
select.length = 1 ; // 每次选择一个
select.options[0].selected = true ; // 第一个为选中的状态
for(var i=0;i<allarea.length;i++){
var area = allarea[i] ;
var option = document.createElement("option") ;
var id = area.getElementsByTagName("id")[0].firstChild.nodeValue ;
var title = area.getElementsByTagName("title")[0].firstChild.nodeValue;
option.setAttribute("value",id) ;
option.appendChild(document.createTextNode(title)) ;
select.appendChild(option) ;
}
}
}
}
</script>
</head>
<body onload="getCity()">
<form action="" method="post">
请选择喜欢的城市：
<select name="city">
<option value="0"> - 请选择城市 -</option>
</select>
</form>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
