一、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代码:
<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有字节限制;