ajax用法示例Word格式文档下载.docx
《ajax用法示例Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《ajax用法示例Word格式文档下载.docx（20页珍藏版）》请在冰点文库上搜索。
+encodeURIComponent（username）;
//根据浏览器创建对象
if（window.ActiveXObject）{
xhr=newActiveXObject（"
Microsoft.XMLHttp"
）;
}elseif（window.XMLHttpRequest）{
xhr=newXMLHttpRequest（）;
}
xhr.onreadystatechange=process;
//注册监听
xhr.open（"
GET"
url,true）;
//设置请求方式和请求地址
xhr.setRequestHeader（"
If-Modified-Since"
"
0"
//禁止缓存
Cache-Control"
no-cache"
//禁止缓存
xhr.send（null）;
//发送请求
}
//处理请求
functionprocess（）{
if（xhr.readyState==4）{
if（xhr.status==200）
alert（"
请求成功，数据="
+xhr.responseText）;
else
请求失败，状态码="
+xhr.status）;
/script>
/head>
body>
formaction="
"
<
inputtype="
text"
name="
id="
/>
button"
value="
验证"
onclick="
check（）"
/form>
/body>
/html>
CheckUsernameServlet.java
importjava.io.*;
importjavax.servlet.*;
importjavax.servlet.http.*;
publicclassCheckUsernameServletextendsHttpServlet{
publicvoiddoGet（HttpServletRequestrequest,HttpServletResponseresponse）
throwsServletException,IOException{
request.setCharacterEncoding（"
utf-8"
response.setContentType（"
text/xml;
charset=utf-8"
//是text/xml!
!
response.setHeader（"
"
no-cache,must-revalidate"
//禁止缓存
PrintWriterout=response.getWriter（）;
Stringusername=request.getParameter（"
username=newString（username.getBytes（"
iso-8859-1"
）,"
System.out.println（username）;
if（username.equals（"
admin"
））
out.print（"
msg>
true<
/msg>
else
false<
out.close（）;
}
publicvoiddoPost（HttpServletRequestrequest,HttpServletResponseresponse）
this.doGet（request,response）;
}
截屏：
示例2：
异步发送请求，以xml形式接收数据
--
-->
//核心对象
//发送请求
}elseif（window.XMLHttpRequest）{
cache-control"
//事件处理
if（xhr.status==200）{
//返回xml对象
varxml=xhr.responseXML;
//childNodes[0]表示元素节点中的文本节点
+xml.getElementsByTagName（"
msg"
）[0].childNodes[0].nodeValue）;
}else{
}
示例3：
异步发送POST请求数据
CheckUsernameServlet"
;
POST"
//禁止缓存xhr.setRequestHeader（"
Content-Type"
application/x-www-form-urlencoded"
xhr.send（"
+username）;
示例4：
解析XML数据
ajax6.xml文件
?
xmlversion="
1.0"
encoding="
root>
dept>
deptno>
10<
/deptno>
dname>
保安部<
/dname>
/dept>
20<
康乐部<
30<
办公室<
/root>
--窗口打开时，自动读取解析部门数据xml文件，并放到<
select>
中-->
自动载入列表数据<
//创建XHR对象
varxhr=null;
//载入列表
functionshowDeptno（）{
//根据浏览器情况创建xhr对象
if（window.ActiveXObject）{
xhr=newActiveXObject（"
}elseif（window.XMLHttpRequest）{
xhr=newXMLHttpRequest（）;
xhr.onreadystatechange=showDeptnoProcess;
//注册监听
varurl="
ajax6.xml"
//URL
xhr.open（"
//设置URL
xhr.send（null）;
//处理异步请求
functionshowDeptnoProcess（）{
if（xhr.readyState==4）{
if（xhr.status==200）{
//获得xml数据
varxml=xhr.responseXML;
//获得节点集合
varnodes=xml.getElementsByTagName（"
dept"
//获得列表框对象
vardept=document.getElementById（"
deptno"
//遍历节点
for（vari=0;
i<
nodes.length;
i++）{
//创建一个option的DOM对象
varop=document.createElement（"
option"
op.setAttribute（"
value"
nodes[i].childNodes[0].childNodes[0].nodeValue）;
op.innerHTML=nodes[i].childNodes[1].childNodes[0].nodeValue;
//加入到列表框中
dept.appendChild（op）;
}
window.onload=showDeptno;
//当窗口打开时执行
selectname="
onchange="
alert（this.value）"
optionvalue="
请选择部门<
/option>
/select>
示例5：
解析xml，读取xml文件中节点的属性值
ajax7.xml文件
deptdeptno="
10"
dname="
保安部"
/>
20"
康乐部"
30"
办公室"
--当选择部门时，自动读取xml文件中每个节点的属性值，并放到<
ajax7.xml"
//采用DHTML增加option
varop=newOption（nodes[i].getAttribute（"
dname"
）,
nodes[i].getAttribute（"
））;
dept.options[i+1]=op;
}
示例6：
联动菜单，员工列表随着部门列表变化
deptXmlList.jsp文件：
返回部门xml数据
contentType="
text/xml"
%@pageimport="
java.sql.*"
%>
%
Class.forName（"
oracle.jdbc.driver.OracleDriver"
Stringurl="
jdbc:
oracle:
thin:
@localhost:
1521:
orcl"
Stringuser="
scott"
Stringpassword="
tiger"
Connectionconn=DriverManager.getConnection（url,user,password）;
Stringsql="
select*fromdepartments"
PreparedStatementpstmt=conn.prepareStatement（sql）;
ResultSetrs=pstmt.executeQuery（）;
%while（rs.next（））{%>
%=rs.getString（"
department_id"
）%>
department_name"
%}%>
%conn.close（）;
empXmlList.jsp文件：
返回指定部门的员工xml数据
select*fromemployeeswheredepartment_id=?
pstmt.setInt（1,Integer.parseInt（request.getParameter（"
）））;
//设置部门条件
emp>
empno>
employee_id"
/empno>
ename>
first_name"
）+"
."
+rs.getString（"
last_name"
/ename>
/emp>
menu.jsp文件：
联动菜单
--当选择部门时，级联员工菜单-->
//载入部门列表
functionshowDeptno（）{
x
升级会员 