JavaScript中的ajax（二）

1、Ajax概念
Ajax是(Asynchronous JavaScript And XML)是異步的JavaScript和xml。也就是異步請求更新技術。Ajax是一種對現有技術的一種新的應用，不是一門新語言。它是用JavaScript編寫。與xml的關係就是能夠讀取和返回xml文件。

2、Ajax中的對象和方法說明

Ajax的核心對象就是xmlHttpRequest

XMLHttpRequest用於在後臺與服務器交換數據。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。

   1：方法

　xmlHttpRequst對象利用send()和open()方法與服務器進行交互。

　open(method,url,async)

• method：請求的類型；GET 或 POST
• url：文件在服務器上的位置
• async：true（異步）或 false（同步）

　send(string)

• string：僅用於 POST 請求

若是是post請求，必須使用 setRequestHeader() 來添加 HTTP 頭。而後在 send() 方法中設置發送的數據：

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

　　2 、屬性
　　readyState
　　　　0: 請求未初始化
　　　　1: 服務器鏈接已創建
　　　　2: 請求已接收
　　　　3: 請求處理中
　　　　4: 請求已完成，且響應已就緒
　　State
　　　　200: "OK"
　　　　404: 未找到頁面
　　responseText
　　　　得到字符串形式的響應數據。
　　responseXML
　　　　得到 XML 形式的響應數據。
　　onreadystatechange
　　　　存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。

3、Ajax運行原理

ajax經過xmlhttpRequest對象執行操做，其中xmlhttpRequest對象是在瀏覽器中內置的一個對象
其運行原理就至關於建立了一個請求代理，經過代理去完成與服務器的交互，交互的過程當中客戶不須要等待，還能夠進行其它的工做，交互完成之後，代理再將交互的結果返回給客戶頁面。
第一步:建立xmlHttpRequest對象，每一個瀏覽器的建立不是都相同。

var xmlhttp;
if (window.XMLHttpRequest)
  {//  IE7+, Firefox, Chrome, Opera, Safari建立方式
  xmlhttp=new XMLHttpRequest();
  }
else
  {//  IE6, IE5 建立方式
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

　　一般狀況下爲了兼容全部瀏覽器，每一個都要寫上。
第二步：設置open（）方法和setRequestHeader()方法參數。
　　將請求方式，請求目的地址，和請求類型設置到open方法中，若是是post請求，則須要設置setRequestHeader()參數
第三步：發送執行
　　利用send方法，與服務器真正的交互執行
第四步：得到執行結果
　　首先判斷執行是否完成，而後經過js操做dom元素，將返回的responseText返回到頁面

xmlhttp.onreadystatechange=function()
  {
    //判斷是否發送成功，是否找到請求頁面等
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    //操做頁面元素
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

 

4、Ajax示例(失去焦點時驗證用戶是否存在)

利用ajax在焦點離開的時候判斷註冊的用戶是否存在

var xmlHttp;          //聲明xmlHttp對象
                      //實例化xmlHttpRequest對象
function createXMLHttpRequest() {
                      //表示當前瀏覽器不是ie,如Google,firefox
    if(window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
}
                      //input失去焦點事件onblur（），調用這個js方法驗證
function validate(field) {
    if (trim(field.value).length != 0) {
                     //建立XMLHttpRequest
        createXMLHttpRequest();
                    //每次請求的url地址不一樣，利用時間產生不一樣url地址，能夠防止緩衝形成問題
        var url = "user_validate.jsp?userId=" + trim(field.value) + "×tamp=" + new Date().getTime();
        xmlHttp.open("GET", url, true);
                    //方法地址，處理完成後自動調用，回調
        xmlHttp.onreadystatechange=function() {       //匿名函數
            if(xmlHttp.readyState == 4) {             //Ajax引擎初始化成功
                if (xmlHttp.status == 200) {          //http協議成功
                    document.getElementById("userIdSpan").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>";
                }else {
                    alert("請求失敗，錯誤碼=" + xmlHttp.status);
                }
            }
        };
                  //將參數發送到Ajax引擎
        xmlHttp.send(null);
    }else {
        document.getElementById("userIdSpan").innerHTML = "";
    }
}

HTML：

<td width="78%">
    <input name="userId" type="text" class="text1" id="userId"
        size="10" maxlength="10" onkeypress="userIdOnKeyPress()" value="<%=userId %>" onblur="validate(this)"><span id="userIdSpan"></span>
</td>

後臺：jsp文件：     ？？

<%@ page language="java" contentType="text/html; charset=GB18030"
    pageEncoding="GB18030"%>
<%@ page import="com.bjpowernode.drp.sysmgr.manager.*" %>    
<%    

    //能夠採用清除緩存的方法，以下
    //response.setContentType("text/xml");
    //response.setHeader("Cache-Control", "no-store"); //HTTP1.1    
    //response.setHeader("Pragma", "no-cache"); //HTTP1.0
    //response.setDateHeader("Expires", 0); 

    //out.println("Hello");
    //Thread.currentThread().sleep(3000);
    String userId = request.getParameter("userId");
    if (UserManager.getInstance().findUserById(userId) != null) {
        out.println("用戶代碼已經存在");
    }

%

 

 

原文連接：http://blog.csdn.net/lsh6688/article/details/7279971