本机Ajax异步通信
? ?? ?昨天我們用JQuery.Ajax解釋JQuery樣通過Ajax實現異步通信。為了更好的編織知識網，今天我們用一個Demo演示怎樣用javascript實現原生Ajax的異步通信。
? ?原生Ajax實現異步通信分為下面5步：
? ?1.創建XMLHttpRequest對象。
? ?2.注冊回調方法。
? ?3.設置和server端交互的參數
? ?4.設置向server端發送的數據，啟動和server端的交互；
? ?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,Operaxmlhttp = new XMLHttpRequest();if (xmlhttp.overrideMineType) {xmlhttp.overrideMineType("text/xml");}} else if (window.ActiveXObject) {//IE6,IE5var 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.設置和server端交互的參數xmlhttp.open("GET", "Ajax.aspx?name=" + userName, true); //Get方式 //xmlhttp.open('POST', 'Ajax.aspx', true); //Post方式 //4.設置向server端發送的數據，啟動和server端的交互 xmlhttp.send(null); //Get提交 //xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); //Post提交 //xmlhttp.send('name='+userName); //5.寫回調方法 function callback() { //推斷和server的交互是否完畢。server是否正確返回了數據 //表示和server端的交互已經完畢 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" οnclick="submit()" value="校驗username" /> <br /> <div id="message"> </body> </html>
? ? 在實現的第三、四步，設置和server的提交方式分為Get方式和Post方式。Get方式向server提交時，參數會顯示在鏈接網址中，存儲量小。安全性低。Post方式將信息打包后進行提交。存儲量大，安全性高。所以，一般我們採用Post方式進行提交。? ? 接著，Ajax.aspx作為server，處理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("username不能為空");}else{if (userName.Equals("quwenzhe")){Response.Write("username[" + userName + "]已經存在");}else{Response.Write("能夠使用username[" + userName + "]注冊");}}}} }? ? ??Demo演示效果圖例如以下： ?? ??? ? ? ? ? ?
? ? 通過上圖我們能夠發現，整個交互過程更新的僅僅是Web頁面事先標記的div，其它內容并沒有刷新。在傳統的Web請求中，提交的是表單，返回的結果顯示在跳轉頁面。
而使用Ajax的Web頁面，提交的是數據。返回結果顯示在當前頁面，實現頁面局部刷新。所以，Ajax的出現，降低了交互所需的網絡流量，添加了用戶的體驗度。
? 這個Demo是用javascript實現的原生Ajax交互，能幫助我們進一步了解不夠Ajax異步通信，我希望我的解釋可以幫助你進步。
版權聲明：本文博主原創文章。博客，未經同意不得轉載。
總結
以上是生活随笔為你收集整理的本机Ajax异步通信的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 开源和闭源
- 下一篇： sed与awk命令小结