一、Ajax简介Ajax被认为是(异步JavaScript和XML)的缩写。允许浏览器在不刷新当前页面的情况下与服务器通信的技术称为Ajaxeg:百度搜索、实时地图等。在Ajax模型中，数据在客户端和服务器端之间独立传输，服务器端无需刷新整个页面即可更新数据；

二、Ajax的工作原理图

第三，Ajax发送和接收对应的方法1。发送请求对应的方法1)。onreadyStatechange事件处理函数：该函数由服务器而不是用户触发。每次readystate属性更改时，onreadystatechange事件都会被触发。2)、open(方法、url、异步)open()的：xmlhttprequest对象允许程序调用服务器用Ajax发送请求。方法请求类型可以是“GET”或“POST”，url是路径字符串，sysnchronized表示请求是否应该异步传输。3) send(data):data是一个字符串，也将被传递给服务器。如果选择了“获取”请求，则数据为

2.接收相应的方法1)。readyState:表示Ajax的当前状态，用数值表示。0表示初始化，1表示加载，2表示加载完成，3表示服务器正在发送响应，4表示发送响应。当请求结束时，每个浏览器将readyState值设置为4；2) status:与javaweb相同，404未找到页面，403禁止访问，500有内部服务器错误，200正常，304未修改。在XMLHttpRequest对象中，服务器发送的状态代码保存在status属性中，可以确保服务器是否发送了成功的响应。responseText:包含服务器发送的数据，一般为HTML、XML或纯文本。当readyState值为4且状态为200时，可以使用responseText属性，Ajax请求已经结束。如果服务器返回XML，数据将存储在responseXML中。

四、代码演示(模仿百度搜索框)

1.创建javaweb项目(项目目录结构如下)

2、SearchServlet.java

package cn . Jon . Ajax；导入Java . io . ioexception；导入Java . util . list；导入javax . servlet . servletexception；导入javax . servlet . http . HttpServlet；导入javax . servlet . http . HttpServletrequest；导入javax . servlet . http . HttpServletResponse；导入net . SF . JSON . jsonarray；导入cn . Jon . Ajax . data . datautils；公共类SearchServlet扩展了HttpServlet { private static final long serial version id=1L；public void doget (http servlet请求请求，http servlet响应响应)抛出servlet异常，ioexception {//将请求和响应的输出格式设置为utf-8 request . setcharacter encoding(' utf-8 ')；response . setcharacterencoding(' utf-8 ')；String关键字=request.getParameter('关键字')；if(关键字！=null){ DataUtils dataResource=new DataUtils()；list string list=dataresource . find datalist(关键字)；//system . out . println(JSonarray . FromObject)(列表)。toString())；response.getWriter()。write(JSONArray.fromObject)(列表)。toString())；} } public void doPost(httpersvletrequest请求，HttpServletResponse响应)抛出ServletException，IOException { doGet(请求，响应)；}} 3.DataUtils.java，读取资源文件下的数据

包裹cn。约拿Ajax。数据；导入Java。io。bufferedeer导入Java。io。ioexception导入Java。io。InputStream导入Java。io。InputStreamReader导入Java。乌提尔。ArrayList导入Java。乌提尔。列表；公共类数据实用程序{私有静态列表字符串dataList=new ArrayList字符串()；公共静态最终字符串URL='/test。txt '；静态{ ReadReSource(URL)；//DataList。添加(' aa ')；//DataList。添加(' Ajax ')；//DataList。添加(' afinal ')；//DataList。添加(' bb ')；}//public static void readResource(String URL){ InputStream is=null；InputStreamReader ISR=NullBufferedreader br=null字符串行=null尝试{ is=Datautils。上课。GetClassLoader().getResourceAsStream(URL)；ISR=新的InputStreamReader(is)；br=新的Buffere阅读器；line=br。readline()；while (null！=line) { if(！排队。isempty()){ DataList。添加(行)；} line=br。readline()；}//while } catch(IOexception e){ e . print stack trace()；}最后{ if (null！=br){ 0尝试{ br。close()；} catch (IOException e) { } } if (null！=ISR){ 0尝试{ ISR。close()；} catch (IOException e) { } } if (null！=is){ try { is。close()；} catch(IOException e){ } } } } public ListString FindDataList(String str){ ListString data=new arrayListString()；for(String SData :数据列表){ if(SData。包含(str)){数据。添加(SData)；} }//用于返回数据；} } 4、index.jsp，页面显示

“% @”页面语言=“Java”导入=“Java”。乌提尔。* "页面编码=' UTF-8 ' % html标题链接rel='样式表href='css/my.css '脚本类型=' text/JAVAScript ' src=' http : js/my。js /脚本/head body div id=' my div ' img alt=' Baidu ' src=' http : img/Baidu。巴布亚新几内亚！-输入框-input type=' text ' size=' 50 ' id=' keyword ' onkeyup=' getmore MINUS()' ' oncolor=' keywordyright()' onfocus=' getmore MINUS()'/input id=' button ' type=' button ' value='百度一下width='50px'/！-下面是内容展示区域-div id=' popDiv '表id=' content-table ' bgcolor=' # FFFAFA '边框=' 0 '单元格间距=' 0 '单元格填充=' 0 ' t正文id=' content _ table _ body '！-动态查询出来的数据显示在这里-/t body/table/div/div/body/html 5、my.js、ajax的核心部分

var xmlHttp//1.函数get more contents()，获取用户输入内容的相关信息{//首先，获取用户输入var content=document . getelementbyid('关键字')；如果(content.value==''){ //当输入框为空时，清除前面的数据clearContent()；返回；}//alert(content . value)；//2.然后将用户输入发送到服务器，因为我们使用ajax异步发送数据，所以我们使用xmlHttp对象//xmlHttp=来获取xmlHttp对象；xmlHttp=createXMLHttp()；//alert(XMlhttp)；//3.要向服务器发送数据，首先要定义服务器的地址，var url='search？关键字=' escape(content . value)；//true表示JavaScript脚本将在send()方法之后继续执行，而无需等待服务器的响应。xmlHttp.open('GET '，url，true)；//xmlHttp绑定回调方法，当xmlHttp状态发生变化时将调用回调方法。//xmlHttp状态：0-4，我们只关心4(完成)，所以完成后调用回调函数是有意义的。xmlHttp.onreadystatechange=回调；//参数已经在url中，这里不需要添加参数xmlhttp . send(null)；}//get xmlHttp对象函数createXMLHttp(){ //var xmlHttp适用于大多数浏览器；if(窗口。XMLHttpRequest){ xmlHttp=new XMLHttpRequest()；}//如果(window . ActiveX object){ xmlhttp=new ActiveX object(' Microsoft . xmlhttp ')，请考虑浏览器兼容性；//如果浏览器有ActiveXObject对象，但没有参数if(！xmlHttp){ xmlHttp=new ActiveX object(' Msxml 2。XMLHTTP’)；} }返回xmlHttp}//回调函数回调函数(){ //4表示if (xmlhttp。readystate==4)完成{//200表示服务器响应成功，404表示找不到资源，500表示服务器内部错误if(xmlHttp.status==200){ //交互成功，以文本格式获取对应数据。var result=XMlhttp . response text；//通过解析var JSON=eval((“result”))获得的数据；//获取这些数据后，可以动态显示数据。在输入框下方显示数据。//alert(JSON)；setContent(JSON)；} } }//设置关联数据的显示，参数表示从服务器传来的关联数据函数clearContent(contents){//清除前清除数据()；//设置位置setlocalition()；//首先，获取关联数据的长度，以确定生成了多少tr/tr var size=contents . length；//设置内容为(var I=0；一、尺寸；I){ var NextNode=contents[I]；//表示JSON data var tr=document . create element(' tr ')的ith元素；var TD=document . create element(' TD ')；TD . SetAttribute(' bord '，' 0 ')；td.setAttribute('gbcolor '，' # FFFAFA ')；//为td绑定两种样式(鼠标进入和鼠标移出时的事件)。道明。onmouseover=function () {this。类名=' mouseover};TD . onmouseout=function(){ this . class name=' Mouseout '；};Td.onclick=function(){ //这个方法实现的是，当用鼠标点击一个相关数据时，相关数据会自动填充到输入框中。

};td.onmousedown=function(){ //当鼠标点击一个关联数据时，自动在输入框添加数据document.getElementById('关键字')。value=this . innertext }；//鼠标悬浮于关联数据上时，自动添加到输入框中/* TD。onmouseover=function(){ this。类名=' Mouseoverif(td.innerText！=null) document.getElementById('关键字')。value=this.innerText} *///创建一个文本节点var text=文档。createtextnode(下一个节点)；td.appendChild(文本);tr。appendchild文件。getelementbyid(' content _ table _ body ').appendChild(tr)；} } //清空之前的数据函数clearContent(){ var contentTableBody=document。getelementbyid(' content _ table _ body ')；var size=contenttablebody。子节点。长度；//删除时，从下往上删for(var I=size-1；I=0；i - ){ //指定删除第我个子节点contenttablebody。移除子项(contenttablebody。子节点[I])；} //清除关联数据的外边框var PopDiv=文档。GetElementByID(' PopDiv ')。风格。边框=“无”；} //当输入框失去焦点时，清空之前的数据函数KeyWordBlur(){ ClearContent()；} //设置显示关联信息的位置函数setlocalition(){//关联信息的显示位置要和输入框一致var内容=文档。getelementbyid('关键字');可变宽度=content.offsetWidth//输入框的长度var left=content[' offsetLeft ']；//到左边框的距离var top=内容[' offset top ']内容。偏移心；//到顶部的距离（加上输入框本身的高度) //获得显示数据的div var PopDiv=文档。GetElementByID(' PopDiv ')；波普维。风格。边框='灰色1px实心'；波普维。风格。left=left ' px波普维。风格。top=top“px”；波普维。风格。width=width ' px文件。getelementbyid(' content-table ')。风格。width=width ' px} 6、my.css，控件的样式

# mydiv { position: absolute左侧：50%；top : 50%；边距-left :-200 px；边距-top :-120 px；} # button { background-color : # 5566 ee；} .mouse over { background : # 708090；color: # fffafa} .mouse out { background : # fffafa；color: # 000000}注：此代码来源于海量开放在线课程Net的学习，并由本人进行了改进。希望有兴趣的人可以一起交流学习。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。