ajax用法示例.docx

资源描述

ajax用法示例.docx

《ajax用法示例.docx》由会员分享，可在线阅读，更多相关《ajax用法示例.docx（20页珍藏版）》请在冰豆网上搜索。

ajax用法示例.docx

ajax用法示例

示例1：

异步发送GET请求数据，以文本形式接收响应数据

ajax1.jsp文件

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>

varxhr;//核心对象

functioncheck（）{

varusername=document.getElementById（"username"）.value;

//用encodeURIComponent函数进行编码，可传递中文

varurl="CheckUsernameServlet?

username="+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"）;//禁止缓存

xhr.setRequestHeader（"Cache-Control","no-cache"）;//禁止缓存

xhr.send（null）;//发送请求

}

//处理请求

functionprocess（）{

if（xhr.readyState==4）{

if（xhr.status==200）

alert（"请求成功，数据="+xhr.responseText）;

else

alert（"请求失败，状态码="+xhr.status）;

}

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（"Cache-Control","no-cache,must-revalidate"）;//禁止缓存

PrintWriterout=response.getWriter（）;

Stringusername=request.getParameter（"username"）;

username=newString（username.getBytes（"iso-8859-1"）,"utf-8"）;

System.out.println（username）;

if（username.equals（"admin"））

out.print（"true"）;

else

out.print（"false"）;

out.close（）;

}

publicvoiddoPost（HttpServletRequestrequest,HttpServletResponseresponse）

throwsServletException,IOException{

this.doGet（request,response）;

}

截屏：

示例2：

异步发送请求，以xml形式接收数据

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>

异步发送请求，以xml形式接收数据

-->

varxhr;//核心对象

//发送请求

functioncheck（）{

varusername=document.getElementById（"username"）.value;

varurl="CheckUsernameServlet?

username="+encodeURIComponent（username）;

//根据浏览器创建对象

if（window.ActiveXObject）{

xhr=newActiveXObject（"Microsoft.XMLHttp"）;

}elseif（window.XMLHttpRequest）{

xhr=newXMLHttpRequest（）;

}

xhr.onreadystatechange=process;//注册监听

xhr.open（"GET",url,true）;//设置请求方式和请求地址

xhr.setRequestHeader（"cache-control","no-cache"）;

xhr.send（null）;//发送请求

}

//事件处理

functionprocess（）{

if（xhr.readyState==4）{

if（xhr.status==200）{

//返回xml对象

varxml=xhr.responseXML;

//childNodes[0]表示元素节点中的文本节点

alert（"请求成功，数据="+xml.getElementsByTagName（"msg"）[0].childNodes[0].nodeValue）;

}else{

alert（"请求失败，状态码="+xhr.status）;

}

截屏：

示例3：

异步发送POST请求数据

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>

varxhr;//核心对象

functioncheck（）{

varusername=document.getElementById（"username"）.value;

varurl="CheckUsernameServlet";

//根据浏览器创建对象

if（window.ActiveXObject）{

xhr=newActiveXObject（"Microsoft.XMLHttp"）;

}elseif（window.XMLHttpRequest）{

xhr=newXMLHttpRequest（）;

}

xhr.onreadystatechange=process;//注册监听

xhr.open（"POST",url,true）;//设置请求方式和请求地址

xhr.setRequestHeader（"If-Modified-Since","0"）;//禁止缓存

xhr.setRequestHeader（"Cache-Control","no-cache"）;//禁止缓存xhr.setRequestHeader（"Content-Type","application/x-www-form-urlencoded"）;

xhr.send（"username="+username）;//发送请求

}

//处理请求

functionprocess（）{

if（xhr.readyState==4）{

if（xhr.status==200）

alert（"请求成功，数据="+xhr.responseText）;

else

alert（"请求失败，状态码="+xhr.status）;

}

示例4：

解析XML数据

ajax6.xml文件

xmlversion="1.0"encoding="utf-8"?

保安部

康乐部

办公室

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>

--窗口打开时，自动读取解析部门数据xml文件，并放到

截屏：

示例5：

解析xml，读取xml文件中节点的属性值

ajax7.xml文件

xmlversion="1.0"encoding="utf-8"?

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>

--当选择部门时，自动读取xml文件中每个节点的属性值，并放到

示例6：

联动菜单，员工列表随着部门列表变化

deptXmlList.jsp文件：

返回部门xml数据

<%@pagelanguage="java"contentType="text/xml"pageEncoding="UTF-8"%>

<%@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（）;

xmlversion="1.0"encoding="utf-8"?

<%while（rs.next（））{%>

<%=rs.getString（"department_id"）%>

<%=rs.getString（"department_name"）%>

<%}%>

<%conn.close（）;%>

empXmlList.jsp文件：

返回指定部门的员工xml数据

<%@pagelanguage="java"contentType="text/xml"pageEncoding="UTF-8"%>

<%@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*fromemployeeswheredepartment_id=?

PreparedStatementpstmt=conn.prepareStatement（sql）;

pstmt.setInt（1,Integer.parseInt（request.getParameter（"deptno"）））;//设置部门条件

ResultSetrs=pstmt.executeQuery（）;

xmlversion="1.0"encoding="utf-8"?

<%while（rs.next（））{%>

<%=rs.getString（"employee_id"）%>

<%=rs.getString（"first_name"）+"."+rs.getString（"last_name"）%>

<%}%>

<%conn.close（）;%>

menu.jsp文件：

联动菜单

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>

--当选择部门时，级联员工菜单-->

自动载入列表数据

//载入部门列表

functionshowDeptno（）{

展开阅读全文