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

时间：2018-12-31分类：Ajax作者：编程之家

示例一：利用Ajax来动态获取时间的例子。

HTML代码：

rush:js;"> <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

创建一个“一般处理程序”来处理前台请求，返回系统当前时间：

Handler.ashx

rush:js;"> <%@ 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代码：

rush: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用了事件绑定。

rush: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的话，代码更简单

rush:js;"> $(document).ready(function () { //button1绑定事件 $("#Button1").bind("click",function () { $.post("Handler.ashx",function (data) { document.getElementById("text1").value = data; }); }); });

示例二：

一、XMLHttpRequest实现获取数据

不使用jQuery实现页面不刷新获取内容的方式，我们这里采用XMLHttpRequest原生代码实现；

js代码如下：

rush: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; }