Ajax学习笔记(1)----小试Ajax

来源：互联网发布：apache kafka源码剖析编辑：程序博客网时间：2024/05/20 10:56

Ajax 是 Asynchronous JavaScript and XML（以及 DHTML 等）的缩写，即“异步JavaScript和xml”。这个短语是Adaptive Path 的 Jesse James Garrett 发明的。其实ajax技术出现的比较早，但是并没有广泛应用，直到google将其应用google maps 和 Gmail中ajax才被迅速应用。

Ajax能让应用程序以异步的方式连接到服务器，等待服务器处理后获取返回值，从而实现无刷新页面就可以与后台通讯的方式。从一定意义上说，这种做法减少了处理过程的响应时间。

Ajax最核心的是XMLHttpRequest对象，它有以下几个重要的方法或属性：

●open()：建立到服务器的新请求。

●send()：向服务器发送请求。

●abort()：退出当前请求。

●readyState：提供当前 HTML 的就绪状态。

●responseText：服务器返回的请求响应文本。

其中XMLHttpRequest 对象的 open() 方法有以下五个参数：

●request-type：发送请求的类型。典型的值是 GET 或 POST，但也可以发送 HEAD 请求。

●url：要连接的 URL。

●asynch：如果希望使用异步连接则为true，否则为 false。该参数是可选的，默认为 true。

●username：如果需要身份验证，则可以在此指定用户名。该可选参数没有默认值。

●password：如果需要身份验证，则可以在此指定口令。该可选参数没有默认值。

通常使用其中的前三个参数。事实上，即使需要异步连接，也应该指定第三个参数为 “true”。这是默认值，但坚持明确指定请求是异步的还是同步的更容易理解。

好了，就介绍这么多了，下面做一个注册的小例子，感受一个这个“异步”到底是怎样的！

新建一个register.jsp页面，如下所示：

<%@ page language="java"contentType="text/html; charset=utf-8"    pageEncoding="utf-8"%><!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type"content="text/html; charset=utf-8"><title>注册</title><script type="text/javascript">    var request;    var message=new Object();    var account=new String();    createRequest();    function accountCheck(){        account =document.getElementById("account").value;       if(account==""){           alert("请输入账户名！");           return;       }       request.onreadystatechange=callBackData;       request.open("post","AjaxDemo?account="+account,true);       request.send(null);    }       function callBackData(){       message=request.responseText;       //alert(message);       document.all("myDiv").innerHTML=message;          }    //根据不同浏览器创建XMLHttpRequest对象    function createRequest() {      try {        request = new XMLHttpRequest();      } catch (trymicrosoft) {        try {          request = new ActiveXObject("Msxml2.XMLHTTP");        } catch (othermicrosoft) {          try {            request = new ActiveXObject("Microsoft.XMLHTTP");          } catch (failed) {            request = false;          }        }      }      if (!request)        alert("XMLHttpRequest对象创建失败!");    }         </script><style type="text/css">       table.demo{border-collapse: collapse;margin-top: 50px;margin-left: 220px;}       table.demo th,td {padding: 0; border: 1px solid #000;}    </style></head><body>    <form action="" method="post">    <table class="demo" style="width: 420px;height: 200px;">       <tr>           <td colspan=3 align=center>新用户注册</td>       </tr>       <tr>           <td style="width:90px; ">用户帐号：</td>           <td style="width:170px; "><input type="text"id="account" name="account"onblur="accountCheck();"><font color=red>*</font></td>           <td style="width:150px; "><div id="myDiv"></div></td>       </tr>       <tr>           <td>用户密码:</td>           <td><input type="password"id="password1" name="password1"></td>           <td></td>       </tr>       <tr>           <td>重复密码:</td>           <td><input type="password"id="password2" name="password2"></td>           <td></td>       </tr>       <tr>           <td colspan=3 align=center><input type="submit"value="注册"></td>       </tr>    </table>    </form></body></html>

新建一个servlet类AjaxDemo.java，代码如下所示：

package com.ldfsoft.servlet; import java.io.IOException;import java.io.PrintWriter; import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse; /** * Servlet implementation class AjaxDemo */public class AjaxDemo extends HttpServlet {    private static final long serialVersionUID = 1L;          /**     * @see HttpServlet#HttpServlet()     */    public AjaxDemo() {        super();        // TODO Auto-generated constructor stub    }     /**     * @seeHttpServlet#service(HttpServletRequest request, HttpServletResponse response)     */    protected void service(HttpServletRequest request, HttpServletResponseresponse) throws ServletException, IOException {       // TODO Auto-generatedmethod stub       request.setCharacterEncoding("utf-8");       String account=request.getParameter("account");       response.setContentType("text/html;charset=utf-8");       //System.out.println("count:"+account);       PrintWriter out=response.getWriter();       if(account.equals("admin")){           out.print("该用户已存在！");       }else{           out.print("该用户名可以使用！");       }    }   }

这段代码的意思是如果输入的用户是admin，则提示“该用户已存在”，否则提示“该用户名可以使用”。

运行此页面，输入“admin”时则如下提示：

输入其他的则提示你“该用户可以使用”：

在这个过程你并没有感受到页面刷新，但是确确实实与服务器端交互了，没错，这就是Ajax的强大之处。今天就学习到这了。

注意：此文中创建的XMLHttpRequest对象在chrome浏览器和360浏览器中测试通过，但是在IE9上则会提示出现错误但是不影响结果，后续本人会解决这个问题。

这是本人学习的结果，允许转载，欢迎交流，但转载务必给出本文章的链接地址：http://blog.csdn.net/youqishini/article/details/7583658，谢谢~