Ajax 學習筆記
什麽是 AJAX ？
AJAX = 異步 JavaScript 和 XML。
AJAX 是一種用於創建快速動態網頁的技術。
通過在後臺與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
傳統的網頁（不使用 AJAX）如果需要更新內容，必需重載整個網頁面。
有很多使用 AJAX 的應用程序案例：新浪微博、Google 地圖、開心網等等。
ajax代碼講解（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>lkyAjax</title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#tj").click(function () {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest(); //創建XMLHttpRequest對象；
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () { //onreadystatechage函數，每當readyState屬性改變時改變時就會調用該函數。
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { //readyState=0時：請求未初始化；=1時：服務器連接已建立；
//=2時：請求已接受；=3時：請求處理中；=4時：請求已完成，且響應已就緒；
//status=400時ok；=404時未找到頁面；
$("#showName").val(xmlhttp.responseText); //responseText獲得字符串形式的響應數據。。還有一種響應形式responseXML返回的是xml
}
}
xmlhttp.open("GET", "0000.ashx?actionS=Ajax", false); //如果傳入參數為中文必須使用encodeURI（“中國”）不然會出現亂碼。。
//opwn(method,url,async);method為：get或post；url為處理頁面的url；async為true或false：true代表異步執行；false代表同步執行；
xmlhttp.send(); //send（string）將請求發向服務器、、string僅限於post請求；
});
});
//Jqurey簡化後
$(function () {
$("#JAtj").click(function () {
htmlvar = $.ajax({ url: "0000.ashx?actionS=Jquery", async: true });
// $("#Text1").val(htmlvar.responseText);
$("#myDiv").load("0000.ashx?actionS=Jqueryd&&d=" + Math.random());
});
});
</script>
</head>
<body>
<div id="myDiv"></div>
<input type="text" id="showName"/>
<input type="text" id="Text1"/>
<input type="submit" value=" 點我下 " id="tj"/>
<input type="submit" value=" JqueryAjax盡情點吧 " id="JAtj"/>
</body>
</html>
note：
1.與 POST 相比，GET 更簡單也更快，並且在大部分情況下都能用。
然而，在以下情況中，請使用 POST 請求：
- 無法使用緩存文件（更新服務器上的文件或數據庫）
- 向服務器發送大量數據（POST 沒有數據量限制）
- 發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠
2.不推薦使用 async=false，但是對於一些小型的請求，也是可以的。
請記住，JavaScript 會等到服務器響應就緒才繼續執行。如果服務器繁忙或緩慢，應用程序會掛起或停止。
註釋：當您使用 async=false 時，請不要編寫 onreadystatechange 函數 - 把代碼放到 send() 語句後面即可：
xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
一般處理程序頁面文件
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace Ajax大練兵
{
/// <summary>
/// _0000 的摘要說明
/// </summary>
public class _0000 : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string name = context.Request["actionS"]; //獲取參數值
context.Response.Write("我叫：" + name); //處理後寫入頁面
context.Response.End();
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
jQuery Ajax 操作函數
jQuery 庫擁有完整的 Ajax 兼容套件。其中的函數和方法允許我們在不刷新瀏覽器的情況下從服務器加載數據。
| 函數 | 描述 |
|---|---|
| jQuery.ajax() | 執行異步 HTTP (Ajax) 請求。 |
| .ajaxComplete() | 當 Ajax 請求完成時註冊要調用的處理程序。這是一個 Ajax 事件。 |
| .ajaxError() | 當 Ajax 請求完成且出現錯誤時註冊要調用的處理程序。這是一個 Ajax 事件。 |
| .ajaxSend() | 在 Ajax 請求發送之前顯示一條消息。 |
| jQuery.ajaxSetup() | 設置將來的 Ajax 請求的默認值。 |
| .ajaxStart() | 當首個 Ajax 請求完成開始時註冊要調用的處理程序。這是一個 Ajax 事件。 |
| .ajaxStop() | 當所有 Ajax 請求完成時註冊要調用的處理程序。這是一個 Ajax 事件。 |
| .ajaxSuccess() | 當 Ajax 請求成功完成時顯示一條消息。 |
| jQuery.get() | 使用 HTTP GET 請求從服務器加載數據。 |
| jQuery.getJSON() | 使用 HTTP GET 請求從服務器加載 JSON 編碼數據。 |
| jQuery.getScript() | 使用 HTTP GET 請求從服務器加載 JavaScript 文件，然後執行該文件。 |
| .load() | 從服務器加載數據，然後把返回到 HTML 放入匹配元素。 |
| jQuery.param() | 創建數組或對象的序列化表示，適合在 URL 查詢字符串或 Ajax 請求中使用。 |
| jQuery.post() | 使用 HTTP POST 請求從服務器加載數據。 |
| .serialize() | 將表單內容序列化為字符串。 |
| .serializeArray() | 序列化表單元素，返回 JSON 數據結構數據。 |
Ajax 學習筆記