xmlhttp和ajax的区别,通过XMLHttpRequest和jQuery实现ajax的几种方式

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

HTML代码：

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

Handler.ashx

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、准备发送请求的数据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代码：

点击获取文本内容

二、jQuery实现ajax获取信息

这个例子是动态的从后台获取数据来改变下拉按钮的内容；

js代码如下：

function bindCarteam0(){

//通过URL请求数据

var URL = ;

$.ajax({

url:URL,

type:'GET',

dataType: "json",

success:function(html){

var str="全部";

for(var i=0;i

str+=""+html[i].name+"";

}

$("#carteam_code").empty().html(str);

}

});

}

HTML代码如下：

全部

其中type类型有get和post两种；

post 可以传输的数据量比较大，get有字节限制；