Ajax（一）

来源：互联网发布：俄罗斯航空发动机知乎编辑：程序博客网时间：2024/06/05 11:29

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的效果。

0 0