Ajax(异步JavaScript和XML)。它不是一种新的编程语言，而是一种使用现有标准的新方法。这是一种与服务器交换数据并更新一些网页而不重新加载整个页面的艺术。所以，让我们走进AJax的世界。

基本语法

在学习Ajax之前，我们要明确自己的要求，即实现与服务器的异步交互，在不刷新页面的情况下更新页面信息。使用Ajax实际上非常简单，我们只需要遵循某些步骤。创建一个Ajax对象(原需要判断当前浏览器的类型)，设置一个回调函数(完成与服务器交互后触发的函数)，打开请求，发送。(根据不同的请求方法，代码编写略有不同。)客户端获取反馈数据并更新页面

获取Ajax对象

不同的浏览器对Ajax的支持不同，所以我们应该区别对待。

设置回调函数

设置回调函数的目的是在Ajax完成与服务器的交互后，将获取的数据信息添加到页面中。

通常，我们指定onreadystatechange函数作为回调处理程序。

下面是与Ajax和服务器之间的交互相关的状态信息，供我们在编码过程中参考。readystate

关于加载状态有几个常用的值：0:请求未初始化1:服务器连接已建立2:请求已接收：请求处理4:请求已完成且响应就绪。状态

加载结果的状态信息为：200:“正常”

404:“找不到此页面”

开放式互动

当我们谈论互动时，我们会想到双方。也就是说，我们的ajax客户机和服务器之间的交互。因此，我们需要指定所请求的数据在服务器上的位置

打开(方法、url、异步)

网址的使用会根据不同的方法而有所不同，这一点我们必须清楚。至于异步参数，一般来说，对于数据量较小的请求可以使用false，但是对于异步加载，建议使用true，以免给服务器带来过大的压力。

获取模式

就这样，指定url在服务器上的位置很简单。这里红色部分的理解非常重要。我们必须指定url作为请求在服务器上的位置，一般采用绝对路径。

//对于servlet，指定注释上的位置，即xmlhttp.open ('get '，'/test/servlet/ajaxservlet？userinput=' str.value，true)；xmlhttp . send()；开机自检模式

当使用POST方法时，我们需要额外的处理。以下示例：

xmlhttp.open('POST '，' ajax_test.asp '，true)；xmlhttp . setrequestheader(' Content-type '，' application/x-www-form-URL encoded ')；//将send方法中要传输的参数信息指定为xmlhttp . send(' fname=billname=gates ')；客户端更新页面

对于Ajax，顾名思义。Xml用于传输数据。但目前，这不再是唯一的形式。那么我们如何将获取的数据更新到网页上呢？有以下两种方式。如果来自服务器的响应不是XML，请使用responseText属性。document.getElementById('myDiv ')。innerHTML=xmlhttp . responsetext；

如果来自服务器的响应是XML，并且需要作为XML对象进行解析，请使用responseXML属性：

xmlDoc=xmlhttp.responseXMLtxt=x=xmldoc . getelementsbytagname(' ARTIST ')；for(I=0；九.长度；i ) { txt=txt x[i]。子节点[0]。node value ' br/'；} document . getelementbyid(' MyDiv ')。innerHTML=txt示例体验

了解这些基本语法后，我们可以简单地将它们应用到实际开发中。为了更好地完成这个实验，我首先制作了一个简单的JavaWeb来处理我们的Ajax请求。

使用Servlet模式

AjaxServlet.java

包装一；导入Java。io。ioexception导入Java。io。版画作家；导入javax。servlet。servletexception导入javax。servlet。注释。webservlet导入javax。servlet。http。HttpServlet导入javax。servlet。http。HttpServletrequest导入javax。servlet。http。HttpServletResponse/** * Servlet实现类AJaxservlet */@ WebServlet(“/AJaxservlet”)公共类AJaxservlet扩展了HttpServlet {私有静态最终长系列版本id=1L；/* * * @参见httpersvlet # httpersvlet()*/public AJaxservlet(){ super()；//TODO自动生成的构造函数存根}/* * * @请参见httpersvlet # Doget(httpersvletrequest请求，HttpServletResponse *响应)*/受保护的void Doget(HttpServletrequest请求，HttpServletResponse响应)引发ServletException，IOException { //TODO自动生成的方法存根//response.getWriter().追加('在：处送达')。追加(请求。getcontextpath())；字符串用户输入=请求。GetParameter('用户输入')；System.out.println('客户端连接!');System.out.println('请求信息为：' '用户输入)；PrintWriter out=响应。getwriter()；if(用户输入。equals(')| |用户输入。长度()6){响应。setcontenttype(' text/html；字符集=UTF-8 '；回应。setcharacter encoding(' UTF-8 ')；回应。setheader(' Content-Type '，' text/html；charset=utf-8 ')；出去。写(' H3输入字符串的长度必须大于6!/H3 ')；} else { response。SetContentType(' text/html；字符集=UTF-8 '；回应。setcharacter encoding(' UTF-8 ')；回应。setheader(' Content-Type '，' text/html；charset=utf-8 ')；出去。println(' H3正确！/H3 ')；}出去。close()；}/* * * @参见httpersvlet # DoPost(httpersvletrequest请求，HttpServletResponse *响应)*/受保护的void doPost(httpersvletrequest请求，httpersvletresponse响应)抛出ServletException，IOException { //TODO自动生成的方法存根doGet(请求，响应);}}web.xml

？可扩展标记语言版本='1.0 '编码='UTF-8 '？web-app xmlns : xsi=' http://www。w3。org/2001/XMLSchema-实例' xmlns=' http://Java。星期日com/XML/ns/javaee ' xsi :架构位置=' http://Java。星期日com/XML/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd' ID=' web app _ ID '版本=' 3.0 '显示名称测试/显示名称欢迎welcome-fileindex.html/welcome-filewelcome-fileindex.htm/welcome-filewelcome-fileindex.jsp/welcome-filewelcome-filedefault.html/welcome-filewelcome-filedefault.htm/welcome-filewelcome-filedefault.jsp/welcome-file/欢迎

！DOCTYPE html html hearteta charset=' UTF-8 '标题AJax测试/标题/标题dydiv h2AJax测试/H2输入类型=“文本”名称='userinput '占位符='用户输入，Ajax方式获得数据onb lur=' GetResult(this)' br span id=' Ajax _ result '/span脚本GetResult=function(str){ var http XML；if(0==str。价值。长度){文档。getelementbyid(' Ajax _ result ').innerHTML=' Nothing}如果(窗口. XMLHttpRequest){ xmlhttp=new XMLHttpRequest()；} else { xmlhttp=新ActiveX对象(' Microsoft .XMLHTTP’)；} xmlhttp。onreadystatechange=function(){ if(4==xmlhttp。readystate 200==xmlhttp。状态){文档。getelementbyid(' Ajax _ result ').innerHTML=xmlhttp。responsetext} } xmlhttp.open('GET '，'/Test/servlet/AjaxServlet？userinput=' str.value，true)；xmlhttp。send()；} /script/div/body/html实验结果•长度小于6时：

•长度大于等于6:

使用JSP方式

receiveParams.jsp

"%@"页面内容类型=' text/html；charset=UTF-8 "语言="Java"% %//接收参数字符串用户输入=请求。GetParameter('用户输入')；//控制台输出表单数据看看系统。出去。println('用户输入='用户输入')；//检查密码的合法性if(用户输入==null | |用户输入。trim().length()==0) { out.println('代码不能为空或空');} else if (userinput！=空用户输入。等于(' admin '){ out。println('代码不能是admin’)；} else { out。println(' OK ')；} %ajax.html

！DOCTYPE html html hearteta charset=' UTF-8 '标题AJax测试/标题/标题dydiv h2AJax测试/H2输入类型=“文本”名称='userinput '占位符='用户输入，Ajax方式获得数据onb lur=' GetResult(this)' br span id=' Ajax _ result '/span脚本GetResult=function(str){ var http XML；if(0==str。价值。长度){文档。getelementbyid(' Ajax _ result ').innerHTML=' Nothing}如果(窗口. XMLHttpRequest){ xmlhttp=new XMLHttpRequest()；} else { xmlhttp=新ActiveX对象(' Microsoft .XMLHTTP’)；} xmlhttp。onreadystatechange=function(){ if(4==xmlhttp。readystate 200==xmlhttp。状态){文档。getelementbyid(' Ajax _ result ').innerHTML=xmlhttp。responsetext} } //xmlhttp.open('GET '，'/Test/servlet/AjaxServlet？userinput=' str.value，true)；打开(' GET '，' receiveParams.jsp？userinput=' str.value，true)；xmlhttp。send()；} /script/div/body/html效果一致。

JQuery中的埃阿斯

前面介绍的是原生的埃阿斯实现方式，我们需要做的工作还是很多的，而JQuery帮助我们完成了平台无关性的工作，我们只需要专注于业务逻辑的开发即可。直接用jquery的。邮政或者。得到或者。创建交互式、快速动态网页应用的网页开发技术方法，更方便更简单，js代码如下：•.邮政方式

$.帖子('。/newProject '，{新项目名称： project _ name }，函数（数据，状态){ //alert('data: '数据状态： '状态);if(status==' success '){ var nodes=data。getelementsbytagname(' project ')；//警报(节点[0]。getAttribute(' name ')；for(var I=0；我节点。长度；i ){ $('#project_items ').追加('选项值='' (i 1) ' '节点[i].getAttribute(' name ')'/option ')；} } })•.创建交互式、快速动态网页应用的网页开发技术方式

$(function(){ //按钮单击时执行$(' # TestJax ').单击(函数(){ //Ajax调用处理$.ajax({ type: 'POST '，url: 'test.php '，data: 'name=garfieldage=18 '，success : function(data){ $(' # myDiv ').html('h2 '数据/H2 ')；} });});});•.得到方式

$(文档)。ready(function(){ $('#bt ')).单击(函数(){ $).get('mytest/demo/antzone.txt '，函数（数据，状态){ alert(' data : ' data ' n status : ' status)；}) })})总结

今天的演示对于实际开发的过程中，服务器端的用户输入数据验证，或者即时更新页面而又减少网络流量是非常的有必要的。而且用处也很广泛，还能有效的提升用户体验。

这次的案例，就当是抛砖引玉，给你的应用也添加上异步加载吧。