通过XMLHttpRequest和jQuery实现ajax的几种方式
示例一：利用Ajax来动态获取时间的例子。
HTML代码：
<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"%> <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <headrunat="server"> <title></title> <scripttype="text/javascript"src="Scripts/jquery-1.7.1.js"></script> <scripttype="text/javascript"src="Scripts/jwy.js"></script> </head> <body> <formid="form1"runat="server"> <div> <inputtype="text"name="textbox"id="text1"/> <inputtype="button"name="button"id="Button1"value="显示时间"onclick="btnclick()"/> </div> </form> </body> </html>
创建一个“一般处理程序”来处理前台请求，返回系统当前时间：
Handler.ashx
<%@WebHandlerLanguage="C#"Class="Handler"%>
usingSystem;
usingSystem.Web;
usingSystem.Linq;
usingSystem.Collections.Generic;
usingSystem.Text;
publicclassHandler:IHttpHandler{
publicvoidProcessRequest(HttpContextcontext){
context.Response.ContentType="text/plain";
context.Response.Write(ShowTime());
}
publicboolIsReusable{
get{
returnfalse;
}
}
publicstaticstringShowTime()
{
returnDateTime.Now.ToString();
}
}
js代码：
functionbtnclick(){
varhttprequest=null;
//初始化XMLHttpRequest对象
if(window.XMLHttpRequest){
//Firefox等现代浏览器中的XMLHttpRequest对象创建
httprequest=newXMLHttpRequest();
}
elseif(window.ActiveXObject){
//IE中的XMLHttpRequest对象创建
httprequest=newActiveXObject("Microsoft.XMLHTTP");
}
if(!httprequest){
alert("创建httprequest对象出现异常！");
}
httprequest.open("POST","Handler.ashx",true);
//httprequest向handler发送post请求，最后参数是设定是否为异步请求,true为异步，false为同步
httprequest.onreadystatechange=function(){
//指定onreadystatechange事件句柄对应的函数
if(httprequest.readyState==4){
//4代表服务器返回完成
if(httprequest.status==200){
//200代表成功了
document.getElementById("text1").value=httprequest.responseText;
//responsetext表示服务器返回的文本,还有一种方式是responseXML是为了获取服务器返回的xml
}
else{
alert("AJAX服务器返回错误！");
}
}
}
httprequest.send();
//在这里才真正的向服务器端发送请求
}
我们用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();
varrequest=newXMLHttpRequest();
//4、准备发送请求的数据url
varurl=this.href;
varmethod="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节点的额默认行为
returnfalse;
}
插入HTML代码：
<ahref="hello.txt">点击获取文本内容</a>
二、jQuery实现ajax获取信息
这个例子是动态的从后台获取数据来改变下拉按钮的内容；
js代码如下：
functionbindCarteam0(){
//通过URL请求数据
varURL=<select:linkpage="/xiaoshouwl.do?method=getCarteamList"/>;
$.ajax({
url:URL,
type:'GET',
dataType:"json",
success:function(html){
varstr="<optionvalue='-1'>全部</option>";
for(vari=0;i<html.length;i++){
str+="<optionvalue='"+html[i].id+"'>"+html[i].name+"</option>";
}
$("#carteam_code").empty().html(str);
}
});
}
HTML代码如下：
<select:selectproperty="carteam_code"styleId="carteam_code"style="width:150px"> <select:optionvalue="-1">全部</select:option> </select:select>
其中type类型有get和post两种；
post可以传输的数据量比较大，get有字节限制；