ajax请求，及返回的数据

最新推荐文章于 2025-07-14 20:11:55 发布

最新推荐文章于 2025-07-14 20:11:55 发布 · 4.1k 阅读

本文详细介绍了Ajax技术的工作原理及其应用场景，对比了传统Web交互方式的不足之处，并提供了原生Ajax、封装Ajax及使用jQuery实现Ajax的具体步骤。此外还阐述了Ajax返回的不同数据类型。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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返回的数据类型