AJAX大家已經都知道了，是為了實現異步通訊，提高用戶體驗度，而將很多舊知識（XML,DOM,JavaScript,HTML,Jquery,Css……）重新融合的一個新的知識框架。而，XMLHttpRequest對象則是其中的重重之中,本篇文章主要給大家介紹通過XMLHttpRequest和jQuery實現ajax的幾種方式
HTML代碼：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript" src="Scripts/jwy.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" name="textbox" id="text1" />
<input type="button" name="button" id="Button1" value="顯示時間" onclick="btnclick()" />
</div>
</form>
</body>
</html>
創建一個“一般處理程序”來處理前台請求，返回系統當前時間：
Handler.ashx
js代碼：
我們用jquery來前台js代碼會變得十分簡潔：
基於jquery編寫的js代碼：
注意：HTML代碼要把button的onclick事件去掉，因為我們直接在js用了事件綁定。
$(document).ready(function () {
//button1綁定事件
$("#Button1").bind("click", function () {
$.ajax({
url: "Handler.ashx",
type: "POST",
success: function (data) {
//$("#text1").val(data);
document.getElementById("text1").value = data;
}
});
});
});
不得不說jquery“簡約而不簡單”……
jquery中的$.ajax集合了get、post方法，默認的是get。
如果直接用POST的話，代碼更簡單
$(document).ready(function () {
//button1綁定事件
$("#Button1").bind("click", function () {
$.post("Handler.ashx", function (data) {
document.getElementById("text1").value = data;
});
});
});
示例二：
一、XMLHttpRequest實現獲取數據
不使用jQuery實現頁面不刷新獲取內容的方式，我們這里采用XMLHttpRequest原生代碼實現；
js代碼如下：
//1.獲取a節點，並為其添加Oncilck響應函數
document.getElementsByTagName("a")[0].onclick = function(){
//3、創建一個XMLHttpRequest();
var request = new XMLHttpRequest();
//4、准備發送請求的數據url
var url = this.href;
var method = "GET";
//5、調用XMLHttpRequest對象的open方法
request.open(method,url);
//6、調用XMLHttpRequest對象的send方法
request.send(null);
//7、為XMLHttpRequest對象添加onreadystatechange 響應函數
request.onreadystatechange = function(){
//8、判斷響應是否完成：XMLHttpRequest 對象的readystate的屬性值為4的時候
if(request.readyState == 4){
//9、在判斷響應是否可用：XMLHttpRequest 對象status 屬性值為200
if(request.status == 200){
//10、響應結果
alert(request.responseText);
}
}
}
//2、取消a節點的額默認行為
return false;
}
插入HTML代碼：
<a href = "hello.txt">點擊獲取文本內容</a>
二、jQuery實現ajax獲取信息
這個例子是動態的從后台獲取數據來改變下拉按鈕的內容；
js代碼如下：
function bindCarteam0(){
//通過URL請求數據
var URL = <select:link page="/xiaoshouwl.do?method=getCarteamList"/>;
$.ajax({
url:URL,
type:'GET',
dataType: "json",
success:function(html){
var str="<option value='-1'>全部</option>";
for(var i=0;i<html.length;i++){
str+="<option value='"+html[i].id+"'>"+html[i].name+"</option>";
}
$("#carteam_code").empty().html(str);
}
});
}
HTML代碼如下：
<select:select property="carteam_code" styleId="carteam_code" style="width:150px">
<select:option value="-1">全部</select:option>
</select:select>