你的位置:首页 > Java教程

[Java教程]通过XMLHttpRequest和jQuery两种方式实现ajax(即无刷新页面获取数据)


一、

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

//1.获取a节点,并为其添加Oncilck响应函数
document.getElementsByTagName("a")[0].onclick = function(){
   //3、创建一个  var request = new //4、准备发送请求的数据url  var url = this.href;  var method = "GET";    //5、调用  request.open(method,url);  //6、调用  request.send(null);  //7、为  request.onreadystatechange = function(){        //8、判断响应是否完成:    if(request.readyState == 4){
//9、在判断响应是否可用: 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有字节限制;