一、Ajax简介
Ajax被认为是（Asynchronous JavaScript and XML）的缩写，允许浏览器与服务器通信而无需刷新当前的页面的技术都被叫做Ajax
eg：百度搜索、实时地图、etc，在Ajax模型中，数据在客户端与服务器之间独立传输，服务器用不刷新整个页面便可更新数据；
二、Ajax的工作原理图
三、Ajax发送和接收相应的方法
1、发送请求相应的方法
1）、onreadystatechange事件处理函数：该函数由服务器触发而不是用户，每次readyState属性的改变都会触发onreadystatechange事件
2）、open(method,url,asynchronized):XMLHttpRequest对象的open()允许程序用一个Ajax调用服务器发送请求,method请求类型可以为“GET” or “POST”，url为路径字符串，sysnchronized表示请求是否要异步传输
3）、send(data):data为将也传递给服务器的字符串，若选用的为“GET”请求，data为null即可.
2、接收相应的方法
1）、readyState:表示Ajax的当前状态，用数值表示，0表示初始化，1表示正在加载，2表示已加载完，3表示服务器正在发送响应，4表示响应发送完毕，当请求结束的时候，每个浏览器都会把readyState的值设为4；
2）、status:和javaweb中一样，404没有找到页面，403禁止访问，500内部服务器出错，200一切正常，304没有被修改，XMLHttpRequest对象中，服务器发送的状态码都保存在status属性里，通过这个值，可以确保服务器是否已发送了一个成功的响应；
3）、responseText:包含了从服务器发送的数据，一般为HTML，XML或者普通文本，当readyState的值为4且status为200时，responseText属性才可以用，表面Ajax请求已经结束，如果服务器返回的是XML，则数据将存储在responseXML中.
四、代码演示（仿百度搜索框）
1、创建javaweb工程（工程目录结构如下）
2、SearchServlet.java
package cn.jon.ajax; import java.io.IOException; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONArray; import cn.jon.ajax.data.DataUtils; public class SearchServlet extends HttpServlet { private static final long serialVersionUID = 1L; public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //设置请求和响应的输出格式为utf-8 request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); String keyword=request.getParameter("keyword"); if(keyword!=null) { DataUtils dataResource=new DataUtils(); List<String> list=dataResource.findDataList(keyword); //System.out.println(JSONArray.fromObject(list).toString()); response.getWriter().write(JSONArray.fromObject(list).toString()); } } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request,response); } } 3、DataUtils.java,读取资源文件下的数据
package cn.jon.ajax.data; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStream; import java.io.InputStreamReader; import java.util.ArrayList; import java.util.List; public class DataUtils { private static List<String> dataList=new ArrayList<String>(); public static final String URL="/test.txt"; static { readResource(URL); // dataList.add("aa"); // dataList.add("ajax"); // dataList.add("afinal"); // dataList.add("bb"); }// public static void readResource(String url) { InputStream is=null; InputStreamReader isr=null; BufferedReader br=null; String line=null; try { is=DataUtils.class.getClassLoader().getResourceAsStream(url); isr=new InputStreamReader(is); br=new BufferedReader(isr); line=br.readLine(); while (null!=line) { if (!line.isEmpty()) { dataList.add(line); } line=br.readLine(); }//while } catch (IOException e) { e.printStackTrace(); }finally { if (null!=br) { try { br.close(); } catch (IOException e) { } } if (null!=isr) { try { isr.close(); } catch (IOException e) { } } if (null!=is) { try { is.close(); } catch (IOException e) { } } } } public List<String> findDataList(String str) { List<String> data=new ArrayList<String>(); for(String sData:dataList) { if (sData.contains(str)) { data.add(sData); } }//for return data; } } 4、index.jsp，页面显示
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <html> <head> <link rel="stylesheet" href="css/my.css"> <script type="text/javascript" src="js/my.js"> </script> </head> <body> <div id="mydiv"> <img alt="baidu" src="img/baidu.png" > <!-- 输入框 --> <input type="text" size="50" id="keyword" onkeyup="getMoreContents()" onblur="keywordBlur()" onfocus="getMoreContents()"/> <input id="button" type="button" value="百度一下" width="50px"/> <!-- 下面是内容展示区域 --> <div id="popDiv"> <table id="content-table" bgcolor="#FFFAFA" border="0" cellspacing="0" cellpadding="0"> <tbody id="content_table_body"> <!-- 动态查询出来的数据显示在这里 --> </tbody> </table> </div> </div> </body> </html>
5、my.js,ajax的核心部分
var xmlHttp; //1.获得用户输入内容的关联信息的函数 function getMoreContents(){ //首先获得用户输入 var content = document.getElementById("keyword"); if(content.value == ""){ //当输入框为空时，清空之前的数据 clearContent(); return; } //alert(content.value); //2.然后要给服务器发送用户输入的内容,因为我们采用的是ajax异步发送数据，所以我们要使用xmlHttp对象 //xmlHttp = 获得xmlHttp对象; xmlHttp = createXMLHttp(); //alert(xmlHttp); //3.要给服务器发送数据,首先定义一个服务器的地址， var url = "search?keyword="+escape(content.value); //true表示JavaScript脚本会在send()方法之后继续执行，而不会等待来自服务器的响应。 xmlHttp.open("GET",url,true); //xmlHttp绑定回调方法，这个回调方法会在xmlHttp状态改变的时候会被调用 //xmlHttp的状态：0-4，我们只关心4(complete)这个状态，所以说当完成之后，再调用回调函数才有意义。 xmlHttp.onreadystatechange = callback; //参数已经在url中了，不用在此处添加参数 xmlHttp.send(null); } //获得xmlHttp对象 function createXMLHttp(){ //对于大多数浏览器都适用的 var xmlHttp; if(window.XMLHttpRequest){ xmlHttp = new XMLHttpRequest(); } //要考虑浏览器的兼容性 if(window.ActiveXObject){ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //如果浏览器有ActiveXObject对象，但没有Microsoft.XMLHTTP的参数 if(!xmlHttp){ xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } } return xmlHttp; } //回调函数 function callback(){ //4表示完成 if(xmlHttp.readyState == 4){ //200代表服务器响应成功，404代表资源未找到，500代表服务器内部错误 if(xmlHttp.status == 200){ //交互成功，获得相应的数据，是文本格式。 var result = xmlHttp.responseText; //解析获得的数据 var json = eval("("+result+")"); //获得这些数据之后，就可以动态的显示数据了。把这些数据展示到输入框下面。 //alert(json); setContent(json); } } } //设置关联数据的展示，参数代表服务器传递过来的关联数据 function setContent(contents){ //清空之前的数据 clearContent(); //设置位置 setLocaltion(); //首先获得关联数据的长度，以此来确定生成多少个<tr></tr> var size = contents.length; //设置内容 for(var i =0;i < size;i++){ var nextNode = contents[i];//代表json数据的第i个元素 var tr = document.createElement("tr"); var td = document.createElement("td"); td.setAttribute("borde","0"); td.setAttribute("gbcolor","#FFFAFA"); //为td绑定两个样式（鼠标进入和鼠标移出时事件） td.onmouseover = function(){ this.className = 'mouseOver'; }; td.onmouseout = function(){ this.className = 'mouseOut'; }; td.onclick = function(){ //这个方法实现的是，当用鼠标点击一个关联数据时，关联数据自动填充到输入框中。 }; td.onmousedown = function(){ //当鼠标点击一个关联数据时，自动在输入框添加数据 document.getElementById("keyword").value =this.innerText; }; //鼠标悬浮于关联数据上时，自动添加到输入框中 /* td.onmouseover = function(){ this.className = 'mouseOver'; if(td.innerText != null) document.getElementById("keyword").value =this.innerText; } */ //创建一个文本节点 var text = document.createTextNode(nextNode); td.appendChild(text); tr.appendChild(td); document.getElementById("content_table_body").appendChild(tr); } } //清空之前的数据 function clearContent(){ var contentTableBody = document.getElementById("content_table_body"); var size = contentTableBody.childNodes.length; //删除时，从下往上删 for(var i = size-1;i>=0;i--){ //指定删除第i个子节点 contentTableBody.removeChild(contentTableBody.childNodes[i]); } //清除关联数据的外边框 var popDiv = document.getElementById("popDiv").style.border="none"; } //当输入框失去焦点时，清空之前的数据 function keywordBlur(){ clearContent(); } //设置显示关联信息的位置 function setLocaltion(){ //关联信息的显示位置要和输入框一致 var content = document.getElementById("keyword"); var width = content.offsetWidth;//输入框的长度 var left = content["offsetLeft"];//到左边框的距离 var top = content["offsetTop"]+content.offsetHeight;//到顶部的距离(加上输入框本身的高度) //获得显示数据的div var popDiv = document.getElementById("popDiv"); popDiv.style.border = "gray 1px solid"; popDiv.style.left = left+"px"; popDiv.style.top = top+"px"; popDiv.style.width = width+"px"; document.getElementById("content-table").style.width = width+"px"; } 6、my.css,控件的样式
#mydiv { position: absolute; left: 50%; top: 50%; margin-left: -200px; margin-top: -120px; } #button { background-color: #5566ee; } .mouseOver { background: #708090; color: #fffafa; } .mouseOut { background: #fffafa; color: #000000; } 注：该代码来自慕课网的学习，自己进行了改进，希望有兴趣的一起交流和学习.
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。
新闻热点
疑难解答
