ajax笔记
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页面，如下所示：
- <%@pagelanguage="java"contentType="text/html;charset=utf-8"
- pageEncoding="utf-8"%>
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
- <title>注册</title>
- <scripttype="text/javascript">
- varrequest;
- varmessage=newObject();
- varaccount=newString();
- createRequest();
- functionaccountCheck(){
- account=document.getElementById("account").value;
- if(account==""){
- alert("请输入账户名！");
- return;
- }
- request.onreadystatechange=callBackData;
- request.open("post","AjaxDemo?account="+account,true);
- request.send(null);
- }
- functioncallBackData(){
- message=request.responseText;
- //alert(message);
- document.all("myDiv").innerHTML=message;
- }
- //根据不同浏览器创建XMLHttpRequest对象
- functioncreateRequest(){
- try{
- request=newXMLHttpRequest();
- }catch(trymicrosoft){
- try{
- request=newActiveXObject("Msxml2.XMLHTTP");
- }catch(othermicrosoft){
- try{
- request=newActiveXObject("Microsoft.XMLHTTP");
- }catch(failed){
- request=false;
- }
- }
- }
- if(!request)
- alert("XMLHttpRequest对象创建失败!");
- }
- </script>
- <styletype="text/css">
- table.demo{border-collapse:collapse;margin-top:50px;margin-left:220px;}
- table.demoth,td{padding:0;border:1pxsolid#000;}
- </style>
- </head>
- <body>
- <formaction=""method="post">
- <tableclass="demo"style="width:420px;height:200px;">
- <tr>
- <tdcolspan=3align=center>新用户注册</td>
- </tr>
- <tr>
- <tdstyle="width:90px;">用户帐号：</td>
- <tdstyle="width:170px;"><inputtype="text"id="account"name="account"onblur="accountCheck();"><fontcolor=red>*</font></td>
- <tdstyle="width:150px;"><divid="myDiv"></div></td>
- </tr>
- <tr>
- <td>用户密码:</td>
- <td><inputtype="password"id="password1"name="password1"></td>
- <td></td>
- </tr>
- <tr>
- <td>重复密码:</td>
- <td><inputtype="password"id="password2"name="password2"></td>
- <td></td>
- </tr>
- <tr>
- <tdcolspan=3align=center><inputtype="submit"value="注册"></td>
- </tr>
- </table>
- </form>
- </body>
- </html>
新建一个servlet类AjaxDemo.java，代码如下所示：
- packagecom.ldfsoft.servlet;
- importjava.io.IOException;
- importjava.io.PrintWriter;
- importjavax.servlet.ServletException;
- importjavax.servlet.http.HttpServlet;
- importjavax.servlet.http.HttpServletRequest;
- importjavax.servlet.http.HttpServletResponse;
- /**
- *ServletimplementationclassAjaxDemo
- */
- publicclassAjaxDemoextendsHttpServlet{
- privatestaticfinallongserialVersionUID=1L;
- /**
- *@seeHttpServlet#HttpServlet()
- */
- publicAjaxDemo(){
- super();
- //TODOAuto-generatedconstructorstub
- }
- /**
- *@seeHttpServlet#service(HttpServletRequestrequest,HttpServletResponseresponse)
- */
- protectedvoidservice(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{
- //TODOAuto-generatedmethodstub
- request.setCharacterEncoding("utf-8");
- Stringaccount=request.getParameter("account");
- response.setContentType("text/html;charset=utf-8");
- //System.out.println("count:"+account);
- PrintWriterout=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，谢谢~