通过XMLHttpRequest和jQuery两种方式实现ajax

一、xmlHttPRequest实现获取数据不使用jQuery实现页面不刷新获取内容的方式，我们这里采用xmlhttpRequest原生代码实现；js代码如下：

//1.获取a节点，并为其添加Oncilck响应函数

document.getElementsByTagName("a")[0].onclick =function(){

//3、创建一个XMLHttpRequest();varrequest =newXMLHttpRequest();//4、准备发送请求的数据urlvarurl =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 属性值为200if(request.status == 200){

//10、响应结果alert(request.responseText);

}

}

}//2、取消a节点的额默认行为returnfalse;

}

插入HTML代码：

<ahref= "hello.txt">点击获取文本内容</a>

二、jQuery实现Ajax获取信息这个例子是动态的从后台获取数据来改变下拉按钮的内容；

js代码如下：

functionbindCarteam0(){//通过URL请求数据varURL = <select:link page="/xiaoshouwl.do?method=getCarteamList"/>;$.ajax({

url:URL,

type:'GET',

dataType:"json",

success:function(html){varstr="<option value='-1'>全部</option>";for(vari=0;i<html.length;i++){

str+="<option value='"+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有字节限制；