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

一、XMLHttpRequest实现获取数据

不使用jQuery实现页面不刷新获取内容的方式,我们这里采用XMLHttpRequest原生代码实现;js代码如下:

通过XMLHttpRequest和jQuery两种方式实现ajax
//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;
}
通过XMLHttpRequest和jQuery两种方式实现ajax

插入HTML代码:

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

二、jQuery实现ajax获取信息

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

js代码如下:

通过XMLHttpRequest和jQuery两种方式实现ajax
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);
}
});
}
通过XMLHttpRequest和jQuery两种方式实现ajax

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有字节限制;

上一篇:ubuntu 12.04上安装OpenERP 7的一次记录


下一篇:iptables只允许指定ip访问本机的指定端口