寫在前面的話:
用了很久的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)