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

最新推荐文章于 2023-10-17 16:24:50 发布

weixin_30257433

最新推荐文章于 2023-10-17 16:24:50 发布

阅读量341

点赞数 1

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/BrokenIce/p/7101619.html

版权

一、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有字节限制；

转载于:https://www.cnblogs.com/BrokenIce/p/7101619.html