首頁 > 開發者 > Ajax

ajax XMLHttpRequest入門與即時檢測使用者名稱是否註冊

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

1.建立 XMLHttpRequest 對象
現在的瀏覽器有很多種，建立 XMLHttpRequest 的方法也不相同，所以為了相容各種瀏覽器，在建立 XMLHttpRequest 時也應該考慮到各種瀏覽器的情況。目前主流的瀏覽器在Windows下有IE、Firefox及Opera，所以我們寫的代碼要盡量相容這幾個瀏覽器。在參考了一些資料後，我用下面的方法來建立 XMLHttpRequest 對象：

 代碼如下 複製代碼


// 先定義一個變數，並賦初值為 false，方便後面判斷對象是否建立成功
var xmlObj = false;
// 使用 try 來捕獲建立失敗，再換個方法來建立
try {
    // 在 Mozilla 中使用這種方式來建立 XMLHttpRequest 對象
    xmlObj=new XMLHttpRequest;
}
catch(e) {
    try {
        // 如果不成功，那麼嘗試在較新 IE 裡的方式
        xmlObj=new ActiveXObject("MSXML2.XMLHTTP");
    }
    catch(e2) {
        try {
            // 失敗則嘗試使用較老版本 IE 裡的方式
            xmlObj=new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(e3) {
            // 還是失敗，那麼就認為建立失敗……
            xmlObj=false;
        }
    }
}
// 如果建立 XMLHttpRequest 對象失敗，那麼提醒訪問者該頁面可能無法正確訪問
if (!xmlObj) {
    alert("XMLHttpRequest init Failed!");
}

 

2.使用 XMLHttpRequest 來擷取 XML 文檔

 

在用 XMLHttpRequest 來擷取 XML 需要注意這個文檔必需和自己在同一個域中，我的理解是同一個網域名稱之下，或者同一目錄之中，如果不是就會出現“拒絕訪問”的錯誤。在本地高度時，也必需運行一個 Web 服務器，而不能直接在瀏覽器裡開啟這個網頁。

 代碼如下 複製代碼

// 使用 open 方法來開啟一個請求，這個方法有3個參數，分別是請求方式，請求檔案的URL及同步方式(?不是很清楚具體叫什麼來的:)
// 請求方式可以是 GET，POST，HEAD中的一種，因為我要擷取檔案，所以用 GET
// 請求檔案的URL，直接用相對路徑即可
// 同步方式，表示請求發出後是等待回應(false)還是繼續執行下面的代碼(true)，即所謂非同步了。AJAX的第一個A就是表示非同步了，所以這裡用 true
xmlObj.open ("GET", "sample.xml", true);
// 因為使用非同步方式所以要在 XMLHttpRequest 對象的狀態改變時做相應的處理
xmlObj.onreadystatechange=function() {
    // 如果 XMLHttpRequest 的狀態為4，應該是ready來的，那麼繼續處理
    if(xmlObj.readyState==4) {
        // 需要判斷返回狀態是否為200 OK，有些情況如檔案不存在，就為返回404
        if(xmlObj.status==200) {
            // 一切OK，調用處理過程
            DoMyXML();
        }
    }
}
// 發送請求，因為是GET，所以send的內容為null
xmlObj.send(null);

 

3.用ASP來建立XML文檔

為了動態顯示的需要，就要用到動態網頁了，我用的是ASP。

 代碼如下 複製代碼

<%
' 修改頭標識指明這是一個XML文檔
Response.ContentType="text/xml"
' ......
strXML="<?xml versin=""1.0"" encoding=""utf-8""?>"
' 這裡就按XML的要求來輸出資料庫裡的內容了
strXML=strXML&"....."
' ......
Response.Write(strXML)
%>

 

4.處理XML文檔

在擷取了XML文檔之後，就要從中擷取需要的東西了，假如我從服務擷取了下面的XML文檔：

 代碼如下 複製代碼

<?xml version="1.0" encoding="gb2312"?>
<root>
    <item>
        <title>AJAX Study</title>
        <content>Study AJAX</content>
    </item>
</root>

我要的是title及content的內容，那麼可以像下面這樣做：

 代碼如下 複製代碼

function DoMyXML() {
    var xmlDoc,items,title,content;
    // 先從XMLHttpRequest對象中得到XML文檔
    xmlDoc=xmlObj.responseXML;
    // 再得到items
    items=xmlDoc.getElementsByTagName("item");
    // 最後根據TagName來擷取想要的內容
    // 如果XML文檔裡有多個item，可以用數組的下標來表示第幾個
    title=items[0].getElementsByTagName("title")[0].firstChild.data;
    content=items[0].getElementsByTagName("content")[0].firstChild.data;
}

 

好了，現在已經得到我想要的東西，可以把它們顯示出來了。

5.輸出處理結果

先假定有一個如下的HTML文檔用來顯示想要輸出的內容：

 代碼如下 複製代碼

<html>
<head>
<title>AJAX Study</title>
</head>
<body>
<div id="mydisplay"></div>
</body>
</html>

這裡定義了一個ID為mydisplay的DIV容器用來顯示輸出內容，好了，再轉到JS：

 代碼如下 複製代碼

//...接DoMyXML;
//content=items[0].....;
var strHTML;
// 先組織好要顯示的內容
strHTML="Item title: " + title + "<br />Item content: " + content;
// 擷取目標容器，再設定它的innerHTML為要顯示的內容
document.getElementById("mydisplay").innerHTML=strHTML;

下面我們來看個AJAX應用之註冊使用者即時檢測執行個體

執行個體1

首先是定義XMLHttp對象

 

 代碼如下 複製代碼
var xmlHttp = false;
try {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e2) {
    xmlHttp = false;
  }
}
if (!xmlHttp && typeof XMLHttpRequest != "undefined") {
  xmlHttp = new XMLHttpRequest();
}


關於這部分內容的說明 請看
接著是自訂函數

 代碼如下 複製代碼


function callServer() {
  var u_name = document.getElementById("u_name").value;
  if ((u_name == null) || (u_name == "")) return;
  var url = "cu.asp?name=" + escape(u_name);
  xmlHttp.open("GET", url, true);
  xmlHttp.onreadystatechange = updatePage;
  xmlHttp.send(null); 
}

 

該函數的主要功能就是非同步獲得cu.asp的內容，在此前將先提取當前頁表單元素“u_name”即使用者名稱文字框zhogn 的值，通過cu.asp其後的參數及賦值而得到了不同的結果（true or false）。

那麼這裡要說的即是cu.asp，他的主要功能就是接受URL參數name的值做內容顯示，該內容最終被t1.htm非同步擷取。

 代碼如下 複製代碼

<!--cu.asp的源碼樣本-->

<!--#include file="conn.asp"-->
<%
name=request.querystring("name")
Set rs = Server.CreateObject ("ADODB.Recordset")
sql = "Select * from u_ser where u_name=""&name&"""
rs.Open sql,conn,1,1
if rs.eof and rs.bof then
    response.write("true")
else
    response.write("false")
end if
rs.close
set rs=nothing
call CloseDatabase
%>


如何將非同步擷取的資訊顯示在當前頁呢

 代碼如下 複製代碼

function updatePage() {
  if (xmlHttp.readyState < 4) {
    test1.innerHTML="loading...";
  }
  if (xmlHttp.readyState == 4) {
    var response = xmlHttp.responseText;
    test1.innerHTML=response;
  }
}

這樣就實現了檢測使用者名稱是否註冊了，這樣ajax註冊看來是不是很簡單呢

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
ajax manual ajax payload w3s ajax ajax websocket ajax datagrid ajax settimeout ajax controls
相關文章
ajax入門指南（二）
ajax使用_雜類
jQuery ajax 檔案下載_ajax
AJAX各種實現方式比較_ajax
AJAX入門--- XMLHttpRequest對象的屬性和方法
解決spring-security session逾時 Ajax 請求沒有重新導向的問題

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More