Ajax（數(shù)據(jù)的異步傳輸）：老技術(shù)新應(yīng)用，JavaScript的翻版；通俗的講是無刷新瀏覽；
1、工作流程
- 獲取請(qǐng)求，創(chuàng)建對(duì)象
- 建立要連接的url
- 打開到服務(wù)器的連接
- 設(shè)置回調(diào)函數(shù)
- 發(fā)送請(qǐng)求
2、簡(jiǎn)單實(shí)例
jsp頁(yè)面代碼：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here11</title>
</head>
<script type="text/javascript">
var XMLHttpReq,pid;
//創(chuàng)建XMLHttpRequest對(duì)象
function createXMLHttpRequest()
{
if(window.XMLHttpRequest)
{ //Mozilla瀏覽器
XMLHttpReq = new XMLHttpRequest();
}else if(window.ActiveXObject){
//IE瀏覽器
try
{
XMLHttpReq=newActiveXObject("Msxm12.XMLHTTP" );
}catch(e)
{
try
{
XMLHttpReq=newActiveXObject("Microsoft.XMLHTTP" );
}catch(e) {}
}
}
}
//發(fā)送Ajax請(qǐng)求
function sendAjaxRequest(url)
{
createXMLHttpRequest(); //創(chuàng)建XMLHttpRequest對(duì)象
XMLHttpReq.open("post",url,true);
XMLHttpReq.onreadystatechange = processResponse;//指定響應(yīng)函數(shù)
XMLHttpReq.send(null);
}
//回調(diào)函數(shù)processResponse
//取servlet構(gòu)造出的XML文件的值
function processResponse()
{
if(XMLHttpReq.readyState == 4)
{
if(XMLHttpReq.status == 200)
{
var res=XMLHttpReq.responseXML.getElementsByTagName("res123")[0].firstChild.data;
var id=XMLHttpReq.responseXML.getElementsByTagName("id")[0].firstChild.data;
var name=XMLHttpReq.responseXML.getElementsByTagName("name")[0].firstChild.data;
var age=XMLHttpReq.responseXML.getElementsByTagName("age")[0].firstChild.data;
msg.innerHTML =res+"<br>id="+id+"<br>name="+name+"<br>age="+age;
}
}
}
function a(){
var name=document.getElementById("userName").value;
var url="MyServlet?name="+name;
sendAjaxRequest(url);
}
</script>
<body>
<h1 align="center">Ajax應(yīng)用</h1>
賬號(hào):<input type="text" name="userName" id="userName" onblur="a()"/><br><br>
密碼:<input type="password" name="pwd"/><br><br>
<input type="button" name="sub" value="提交"/>
<hr>
<div id="msg">提示信息</div>
<form action="" name="form1">
</form>
</body>
</html>
servlet代碼如下：
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class MyServlet
*/
@WebServlet("/MyServlet")
public class MyServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("....MyServlet....doGet......");
this.doPost(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("....MyServlet....doPost......");
String userName=request.getParameter("name");
response.setContentType("text/xml;charset=UTF-8");
PrintWriter out = response.getWriter();
out.println("<response123>");
out.println("<id>100</id>");
out.println("<name>張三</name>");
out.println("<age>18</age>");
out.println("<res123>"+userName+"，你好abc123</res123>");
out.println("</response123>");
out.close();
System.out.println("over");
System.out.println("userName="+userName);
}
}
