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

2024-04-27 15:00:54

字体：大中小

来源：转载

供稿：网友

一、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>