Ajax在页面代码中通过js代码来实现。
Ajax的特点是异步传输，局部刷新。
Ajax构建有三个步骤：创建对象，发送请求，回调函数
1.创建对象需要判断浏览器类型，这里判断是否是IE浏览器，若不是，则创建通用浏览器。
2.创建好对象之后，我们调用创建好的对象，将页面中的元素name传送给相应的servlet进行处理。再创建回调函数。
xmlHttpRequest.open("get",url,true);这三个参数代表传值方式“get”，接收传值的url地址，是否是异步处理true。
3.因为是异步处理，所以等待servlet处理好之后，调用回调函数将结果传回来。
(xmlHttpRequest.readyState == 4&&xmlHttpRequest.status == 200 4和200表示的是servlet处理好了。可以传回来结果了。
下面是范例代码。
<script type="text/javascript">
//创建对象
var xmlHttpRequest;
function createXML(){
if(window.ActiveXObject){
return new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
return new XMLHttpRequest();
}
}
//发送请求
function send2(){
xmlHttpRequest=createXML();
var name= document.getElementById("name").value;
var url="CheckServlet?name="+name;
xmlHttpRequest.onreadystatechange = haoLeJiaoWo;
xmlHttpRequest.open("get",url,true);
xmlHttpRequest.send(null);
}
//回调函数
function haoLeJiaoWo(){
if(xmlHttpRequest.readyState == 4&&xmlHttpRequest.status == 200 ){
var str=xmlHttpRequest.responseText;
document.getElementById("div1").innerHTML=str;
}
}
</script>
下面我们用Ajax技术，创建一个像百度搜索一样的自动联想下拉菜单。
项目结构：
其中只用到了search.jsp和SearchServlet.java
1.首先看一下jsp前台处理页面：search.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
left:10px;
top:38px;
width:166px;
border: 1px solid #000000;
z-index:1;
}
.outcss{
background-color: white;
padding: 1px 2px 1px 4px;
}
.overcss{
background-color: gray;
padding: 1px 2px 1px 4px;
}
-->
</style>
</head>
<script type="text/javascript">
//创建对象
var xmlHttpRequest;
function createXML(){
if(window.ActiveXObject){
return new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
return new XMLHttpRequest();
}
}
//发送请求
function send2(){
xmlHttpRequest=createXML();
var name= document.getElementById("name").value;
var url="SearchServlet?name="+name;
xmlHttpRequest.onreadystatechange = haoLeJiaoWo;
xmlHttpRequest.open("post",url,true);
xmlHttpRequest.send(null);
}
//回调函数
function haoLeJiaoWo(){
if(xmlHttpRequest.readyState == 4&&xmlHttpRequest.status == 200 ){
var str=xmlHttpRequest.responseText;
var div1=document.getElementById("Layer1");
var arr=str.split("-");
var divStr="";
for(var i=0;i<arr.length;i++){
divStr+="<div class='outcss'>"+arr[i]+"</div>";
}
div1.innerHTML=divStr;
}
}
</script>
<body>
<div id="Layer1"></div>
<form id="form1" name="from" method="post" action="SearchServlet">
<label>
<input type="text" id="name" name="name" onkeyup="send2()"/>
<input type="submit" name="Submit" value="百度一下" />
</label>
</form>
</body>
</html>
2.我们看一下处理请求的SearchServlet.java：
我仅在SearchServlet.java中的doGet方法中写了代码，doPost方法中写doGet(request, response);
看一下doGet方法中的代码：
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
String str = request.getParameter("name");
PrintWriter out = response.getWriter();
Connection conn = null;
Statement stmt = null;
ResultSet rs = null;
List strList = new ArrayList();
try {
if (str != null & str.length() > 0) {
Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");
String url = "jdbc:sqlserver://127.0.0.1:1433;database=yun4";
conn = DriverManager.getConnection(url, "sa", "123456");
stmt = conn.createStatement();
rs = stmt
.executeQuery("select title from news where title like '"
+ str + "%'");
while (rs.next()) {
strList.add(rs.getString("title"));
}
StringBuffer sbu = new StringBuffer();
int size = strList.size();
for (int i = 0; i < size; i++) {
sbu.append((String) strList.get(i) + "-");
}
String s = sbu.toString();
if (s != null && s != "") {
s = s.substring(0, s.length() - 1);
}
out.print(s);
out.flush();
}
} catch (Exception e) {
e.printStackTrace();
}
}
这样，我们就完成了百度搜索自动联想div的效果。