昨天我們用JQuery.Ajax講解了JQuery如何通過Ajax實現非同步通訊，為了更好的編織知識網，今天我們用一個Demo示範如何用javascript實現原生Ajax的非同步通訊。
原生Ajax實現非同步通訊分為以下5步：
1.建立XMLHttpRequest對象；
2.註冊回調方法；
3.設定和伺服器端互動的參數
4.設定向伺服器端發送的資料，啟動和伺服器端的互動；
5.寫回調方法
有了這5步的思想指導，下面我們開始設計實現過程。
首先我們建立一個html頁面，用於和使用者互動，代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <script type="text/javascript"> function submit() { //1.建立XMLHttpRequest對象 var xmlhttp; if (window.XMLHttpRequest) { //IE7,IE8,FireFox,Mozillar,Safari,Opera xmlhttp = new XMLHttpRequest(); if (xmlhttp.overrideMineType) { xmlhttp.overrideMineType("text/xml"); } } else if (window.ActiveXObject) { //IE6,IE5 var activexName = ['MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Micro soft.XMLHTTP']; for (var i = 0; i < activexName.length; i++) { try { xmlhttp = new ActiveXObject(activexName[i]); break; } catch (e) { } } } if (xmlhttp == undefined || xmlhttp == null) { alert("當前瀏覽器不支援建立XMLHttpRequest對象，請更換瀏覽器"); return; } //2.註冊回調方法 xmlhttp.onreadystatechange = callback; //獲得文字框輸入的內容 var userName = document.getElementById("UserName").value; //3.設定和伺服器端互動的參數 xmlhttp.open("GET", "Ajax.aspx?name=" + userName, true); //Get方式 //xmlhttp.open('POST', 'Ajax.aspx', true); //Post方式 //4.設定向伺服器端發送的資料，啟動和伺服器端的互動 xmlhttp.send(null); //Get提交 //xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); //Post提交 //xmlhttp.send('name='+userName); //5.寫回調方法 function callback() { //判斷和伺服器的互動是否完成，伺服器是否正確返回了資料 //表示和伺服器端的互動已經完成 if (xmlhttp.readyState == 4) { //表示正確的返回了資料 if (xmlhttp.status == 200) { //純文版資料的接收方法 var message = xmlhttp.responseText; //把返回的資料動態添加到div中 var div = document.getElementById("message"); div.innerHTML = message; } } } }</script></head><body> <input type="text" id="UserName"> <input type="button" onclick="submit()" value="校正使用者名稱" /> <br /> <div id="message"></body></html> 在實現的第三、四步，設定和伺服器的提交方式分為Get方式和Post方式。Get方式向伺服器提交時，參數會顯示在連結網址中，儲存量小，安全性低。Post方式將資訊打包後進行提交，儲存量大，安全性高。所以，一般我們採用Post方式進行提交。
接著，Ajax.aspx作為伺服器，處理html提交的請求，代碼如下：
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;namespace Demo{ public partial class Ajax : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { string userName = Request["name"].ToString().Trim(); if (userName == null || userName.Length == 0) { Response.Write("使用者名稱不可為空"); } else { if (userName.Equals("quwenzhe")) { Response.Write("使用者名稱[" + userName + "]已經存在"); } else { Response.Write("可以使用使用者名稱[" + userName + "]註冊"); } } } }} Demo示範如下：
通過我們可以發現，整個互動過程更新的只是Web頁面事先標記的div，其他內容並沒有重新整理。在傳統的Web請求中，提交的是表單，返回的結果顯示在跳轉頁面。而使用Ajax的Web頁面，提交的是資料，返回結果顯示在當前頁面，實現頁面局部重新整理。所以，Ajax的出現，減少了互動所需的網路流量，增加了使用者的體驗度。
這個Demo是用javascript實現的原生Ajax互動，可以協助我們進一步理解Ajax的非同步通訊，希望我的講解能協助大家進步。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
