通过XMLHttpRequest和jQuery实现ajax的几种方式

示例一：利用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

<%@ WebHandler Language="C#" Class="Handler" %>using System;using System.Web;using System.Linq;using System.Collections.Generic;using System.Text;public class Handler : IHttpHandler {public void ProcessRequest （HttpContext context） {context.Response.ContentType = "text/plain";context.Response.Write（ShowTime（））;}public bool IsReusable {get {return false;}}public static string ShowTime（）{return DateTime.Now.ToString（）; }}

js代码：

function btnclick（） {var httprequest = null;// 初始化XMLHttpRequest对象if （window.XMLHttpRequest） {// Firefox等现代浏览器中的XMLHttpRequest对象创建httprequest = new XMLHttpRequest（）;}else if （window.ActiveXObject） {// IE中的XMLHttpRequest对象创建httprequest = new ActiveXObject（"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（）;var request = new XMLHttpRequest（）;//4、准备发送请求的数据urlvar 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 属性值为200if（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>

其中type类型有get和post两种；
post 可以传输的数据量比较大，get有字节限制；