寫在前面的話:
用了很久的Asp.Net Ajax,也看了段時間的jquery中ajax的應用,但到頭來,居然想不起xmlHttpRequest的該如何使用了.
以前記的也不怎麼清楚,這次就重新完整的學習一遍吧,也為了自己以後能找個完整的地方來複習.
什麼是Ajax
Ajax的全稱是Asynchronous Javascript And XML.AJax由HTML,Javascript,DHTML和DOM組成.
HTML用於建立Web表單
Javascript代碼用於運行Ajax應用程式的核心代碼,用於和伺服器引用程式進行通訊
DHTML用於動態更新表單
DOM用於處理HTML結構和伺服器返回的XML
時至今日,Js中可以處理的資料包括了字串,JSON,XML資料.
優點
通過XMLHttpRequest對象來和伺服器進行通訊;在與伺服器進行非同步資料轉送時,傳輸的資料更少;更好的使用者體驗.
執行個體
get.htm頁面HTML代碼如下:
<body> <label for="txt_username"> 姓名:</label> <input type="text" id="txt_username" /> <br /> <label for="txt_age"> 年齡:</label> <input type="text" id="txt_age" /> <br /> <input type="button" value="GET" id="btn" onclick="btn_click();" /> <div id="result"> </div></body>
js代碼如下:
<script type="text/javascript"> function btn_click() { //建立XMLHttpRequest對象 var xmlHttp = new XMLHttpRequest(); //擷取值 var username = document.getElementById("txt_username").value; var age = document.getElementById("txt_age").value; //配置XMLHttpRequest對象 xmlHttp.open("get", "Get.aspx?username=" + username + "&age=" + age); //設定回呼函數 xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { document.getElementById("result").innerHTML = xmlHttp.responseText; } } //發送請求 xmlHttp.send(null); }</script>
建立Get.aspx頁,Get.aspx.cs代碼如下:
protected void Page_Load(object sender, EventArgs e){ Response.Clear(); string username = Request.QueryString["username"]; string age = Request.QueryString["age"]; Response.Write("姓名:'" + username + "'<br/>年齡:" + age + "<br/>時間:'" + DateTime.Now.ToString() + "'"); Response.End();}
結果:
輸入姓名和年齡,點擊Get按鈕,就會從伺服器擷取到資料.
小結:
今天暫時寫一個完整的例子來顯示Ajax的調用過程,此例中存在許多問題:
- 如何建立在大部分瀏覽器中都能啟動並執行XMLHttpRequest對象.
- 使用get請求時存在緩衝問題
- 中文亂碼問題
針對這些已經出現的問題,我們在隨後的例子中會一一解決.
對於其他的疑問,比方說:
- 如何使用post傳遞資料
- post和get有什麼區別
- 如何使用傳輸和使用json資料
- 如何傳輸和使用xml資料(畢竟,Ajax最後的一個字母x指的是XML)
對於這些疑問,我們在隨後的文章裡也會一一解決的.
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
