jquery API --Ajax

最新推荐文章于 2025-06-26 11:34:08 发布

落叶无情也算有情

最新推荐文章于 2025-06-26 11:34:08 发布

阅读量493

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： jquery ajax json 原生ajax

本文链接：https://blog.youkuaiyun.com/JackieMing0328/article/details/79194680

jquery 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了Ajax的基本概念，强调了其异步、JavaScript和XML的特点，并探讨了jQuery中Ajax的便捷性。提到了原生Ajax常用的数据格式XML与后来广泛应用的JSON，以及JSONP作为跨域解决方案的特性。最后指出jQuery Ajax简化了参数设置，使得开发者更容易实现与服务器的数据交互。

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

Ajax

本想着按照jquery 官方API对ajax的定义来解释一下，帮助大家深入理解ajax。但官方文档看完，并没有想象中那么好理解。所以按照我个人想法介绍一下我的理解

Ajax 全称Asynchronous JavaScript and XML 其实从这个全称，我们便可以抓取到ajax的精髓，一个是异步，一个是js 还有一个是XML
ajax的优点，可以在不重新加载整个页面的情况下，与服务器交互，进行数据发送接收，渲染局部页面。

对于jquery来说，ajax用起来很是方便，传几个参数，便可实现和后台的交互。
但我们如果刚接触，ajax交互，应该从原理上理解

原生ajax

$('#send').click(function(){
    //请求的5个阶段，对应readyState的值
        //0: 未初始化，send方法未调用；
        //1: 正在发送请求，send方法已调用；
        //2: 请求发送完毕，send方法执行完毕；
        //3: 正在解析响应内容；
        //4: 响应内容解析完毕；

    var data = 'name=yang';
    var xhr = new XMLHttpRequest();        //创建一个ajax对象
    xhr.onreadystatechange = function(event){    //对ajax对象进行监听
        if(xhr.readyState == 4){    //4表示解析完毕
            if(xhr.status == 200){    //200为正常返回
                console.log(xhr)
            }
        }
    };
    xhr.open('POST','url',true);    //建立连接，参数一：发送方式，二：请求地址，三：是否异步，true为异步
    xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');    //可有可无
    xhr.send(data);        //发送
});

XML数据格式，是我们原生ajax中一直使用的数据格式，由于其是一段字符串，在前端接收到这些数据时，去渲染到页面上时，不太方便。所以在jquery中，我们有使用到json数据格式，一种键值对数据，方便我们使用。

json与jsonp

其实面试经常问道的这个问题，做多了便知道，其实这个问题很弱智，json是一种数据格式，jsonp是一种跨域方式。这类问题就像java和javascript有什么关系。
当然还有，jsonp只支持get请求

jquery Ajax

$.ajax({
    url:'/comm/test1.php',
    type:'POST', //GET
    async:true,    //或false,是否异步
    data:{
        name:'yang',age:25
    },
    timeout:5000,    //超时时间
    dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
    beforeSend:function(xhr){
        console.log(xhr)
        console.log('发送前')
    },
    success:function(data,textStatus,jqXHR){
        console.log(data)
        console.log(textStatus)
        console.log(jqXHR)
    },
    error:function(xhr,textStatus){
        console.log('错误')
        console.log(xhr)
        console.log(textStatus)
    },
    complete:function(){
        console.log('结束')
    }
})

大家在使用中会发现，jquery Ajax会很方便，什么都不用考虑，直接$.ajax()，里边直接传参便可以，jquery还为我们提供更方便的使用，有些参数是默认帮我们传好的，在高级一点的，我们可以直接使用$.get(),$.post(),$.getJSON().
在实际开发中，我们一般使用到的，需要传参的也就那么几个，像url，data，datatype，error，success；