ajax请求,及返回的数据

1.传统方法的缺点: 传统的web交互是浏览器发送请求服务器,服务器返回数据响应,但是就连很小的交互,也需要来回请求,浪费带宽重新读取整个页面.

ajax则解决的这一个问题,可以创建快速动态网页,用少量数据交换,实现异步更新

实现原生ajax步骤:
    //创建异步对象
    var xhr = new XMLHttprequest();
    //设置方式
    xhr.open('post','http://www.xxx.com');
    //发送请求
    xhr.send(data);
    //绑定状态改变事件
    xhr.onreadychange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            //数据返回来
            console.log(this.responseText);
        }
    }
封装ajax步骤:
    function ajax(method,url,data,callback){
    //如果类型是get
    if(method=='get'){
        url = url + '?' + data;
        data = null;
    }
    //到这里类型为Post
    var xhr = new XMLHttprequest();
    xhr.open(method,url);
    xhr.send(data);
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.statu == 200){
            callback(this.responseText);
        }
    }
}
jquery 运用ajax步骤:
    $.ajax({
        url:'http://www.xxx.com',
        dataType:'jason' //jsonp,html
        data:{
            name:'xxx',
            age:18,
            gender:'man'
        },
        success:function(data){
            console.log(data);
        }

    })

ajax获取的返回数据类型:最基础的有两种:XMLhttprequest对象的
(1)responseText 返回的是字符串类型的响应数据
(2)responseXml 返回的是XML形式的响应数据

除了以上两种,text,html,script,xml,json等也是ajax返回的数据类型

猜你喜欢

转载自blog.csdn.net/qq_39594951/article/details/81277021