ajax笔记

来源：互联网发布：在线直播软件编辑：程序博客网时间：2024/05/17 06:54

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 plaincopyprint?
<%@ 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，代码如下所示：

[java] view plaincopyprint?
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上则会提示出现错误但是不影响结果，后续本人会解决这个问题。

0 0