Ajax（数据的异步传输）：老技术新应用，JavaScript的翻版；通俗的讲是无刷新浏览；
1、工作流程
- 获取请求，创建对象
- 建立要连接的url
- 打开到服务器的连接
- 设置回调函数
- 发送请求
2、简单实例
jsp页面代码：
<%@ 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;
//创建XMLHttpRequest对象
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) {}
}
}
}
//发送Ajax请求
function sendAjaxRequest(url)
{
createXMLHttpRequest(); //创建XMLHttpRequest对象
XMLHttpReq.open("post",url,true);
XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
XMLHttpReq.send(null);
}
//回调函数processResponse
//取servlet构造出的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应用</h1>
账号:<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);
}
}
