ajax笔记

长平狐 发布于 2012/11/12 11:43
阅读 86
收藏 0

  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页面,如下所示:


[html]  view plain copy print ?
  1. <%@ page language="java"contentType="text/html; charset=utf-8"  
  2.     pageEncoding="utf-8"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4. <html>  
  5. <head>  
  6. <meta http-equiv="Content-Type"content="text/html; charset=utf-8">  
  7. <title>注册</title>  
  8. <script type="text/javascript">  
  9.     var request;  
  10.     var message=new Object();  
  11.     var account=new String();  
  12.     createRequest();  
  13.     function accountCheck(){  
  14.         account =document.getElementById("account").value;  
  15.        if(account==""){  
  16.            alert("请输入账户名!");  
  17.            return;  
  18.        }  
  19.        request.onreadystatechange=callBackData;  
  20.        request.open("post","AjaxDemo?account="+account,true);  
  21.        request.send(null);  
  22.     }  
  23.      
  24.     function callBackData(){  
  25.        message=request.responseText;  
  26.        //alert(message);  
  27.        document.all("myDiv").innerHTML=message;  
  28.         
  29.     }  
  30.     //根据不同浏览器创建XMLHttpRequest对象  
  31.     function createRequest() {  
  32.       try {  
  33.         request = new XMLHttpRequest();  
  34.       } catch (trymicrosoft) {  
  35.         try {  
  36.           request = new ActiveXObject("Msxml2.XMLHTTP");  
  37.         } catch (othermicrosoft) {  
  38.           try {  
  39.             request = new ActiveXObject("Microsoft.XMLHTTP");  
  40.           } catch (failed) {  
  41.             request = false;  
  42.           }  
  43.         }  
  44.       }  
  45.       if (!request)  
  46.         alert("XMLHttpRequest对象创建失败!");  
  47.     }  
  48.            
  49. </script>  
  50. <style type="text/css">  
  51.        table.demo{border-collapse: collapse;margin-top: 50px;margin-left: 220px;}  
  52.        table.demo th,td {padding: 0; border: 1px solid #000;}  
  53.     </style>  
  54. </head>  
  55. <body>  
  56.     <form action="" method="post">  
  57.     <table class="demo" style="width: 420px;height: 200px;">  
  58.        <tr>  
  59.            <td colspan=3 align=center>新用户注册</td>  
  60.        </tr>  
  61.        <tr>  
  62.            <td style="width:90px; ">用户帐号:</td>  
  63.            <td style="width:170px; "><input type="text"id="account" name="account"onblur="accountCheck();"><font color=red>*</font></td>  
  64.            <td style="width:150px; "><div id="myDiv"></div></td>  
  65.        </tr>  
  66.        <tr>  
  67.            <td>用户密码:</td>  
  68.            <td><input type="password"id="password1" name="password1"></td>  
  69.            <td></td>  
  70.        </tr>  
  71.        <tr>  
  72.            <td>重复密码:</td>  
  73.            <td><input type="password"id="password2" name="password2"></td>  
  74.            <td></td>  
  75.        </tr>  
  76.        <tr>  
  77.            <td colspan=3 align=center><input type="submit"value="注册"></td>  
  78.        </tr>  
  79.     </table>  
  80.     </form>  
  81. </body>  
  82. </html>  


 

      新建一个servlet类AjaxDemo.java,代码如下所示:


[java]  view plain copy print ?
  1. package com.ldfsoft.servlet;  
  2.    
  3. import java.io.IOException;  
  4. import java.io.PrintWriter;  
  5.    
  6. import javax.servlet.ServletException;  
  7. import javax.servlet.http.HttpServlet;  
  8. import javax.servlet.http.HttpServletRequest;  
  9. import javax.servlet.http.HttpServletResponse;  
  10.    
  11. /** 
  12.  * Servlet implementation class AjaxDemo 
  13.  */  
  14. public class AjaxDemo extends HttpServlet {  
  15.     private static final long serialVersionUID = 1L;  
  16.         
  17.     /** 
  18.      * @see HttpServlet#HttpServlet() 
  19.      */  
  20.     public AjaxDemo() {  
  21.         super();  
  22.         // TODO Auto-generated constructor stub  
  23.     }  
  24.    
  25.     /** 
  26.      * @seeHttpServlet#service(HttpServletRequest request, HttpServletResponse response) 
  27.      */  
  28.     protected void service(HttpServletRequest request, HttpServletResponseresponse) throws ServletException, IOException {  
  29.        // TODO Auto-generatedmethod stub  
  30.        request.setCharacterEncoding("utf-8");  
  31.        String account=request.getParameter("account");  
  32.        response.setContentType("text/html;charset=utf-8");  
  33.        //System.out.println("count:"+account);  
  34.        PrintWriter out=response.getWriter();  
  35.        if(account.equals("admin")){  
  36.            out.print("该用户已存在!");  
  37.        }else{  
  38.            out.print("该用户名可以使用!");  
  39.        }  
  40.     }  
  41.      
  42. }  


 

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


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




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




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


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


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


原文链接:http://blog.csdn.net/csh624366188/article/details/7639422
加载中
返回顶部
顶部