jQuery之ajax/jsonp/全局钩子函数

最新推荐文章于 2024-09-05 22:36:22 发布

一十四画生

最新推荐文章于 2024-09-05 22:36:22 发布

阅读量545

点赞数

文章标签： ajax javascript jquery html5 es6

本文链接：https://blog.csdn.net/weixin_44395929/article/details/104665301

版权

本文详细介绍了jQuery中的ajax用法，包括原生js与jQuery的对比，接着探讨了jQuery实现的jsonp跨域请求，并解析了jQuery的ajax全局钩子函数，帮助读者更好地理解和运用jQuery进行数据交互。

摘要由CSDN通过智能技术生成

//今天学习jQuery最后一部分(当然了,jQuery远远不止这些,我现在能做的仅仅是把一些常用的学会了)

一、jQuery之ajax

//我们先来看看原生js如何发送一个ajax请求的

 var xhr = new XMLHttpRequest();
 xhr.open('GET', url, true)
 xhr.onreadystatechange = function () {
 //readyStatus == 4说明请求已经完成
 if(xhr.readyState == 4 && xhr.status ==200) {
     //从服务器获得数据
       fn.call(this, xhr.responseText);
                    }
        };
                //发送数据
  xhr.send();

//是不是感觉有点长,难记???那就来看看jQuery的

$.ajax({
            url: '', // => 请求地址(必填)
            type: '', // => 请求方式(GET, POST, ...) 默认是 GET
            data: '', // => 携带到后端的参数
            dataType: '', // => 期望后端返回的数据类型, 默认不解析
            async: true, // => 是否异步, 默认是 true
            success: function () {}, // => 成功的回调
            error: function () {}, // => 失败的回调
            timeout: 数字, // 单位是 ms, 超时时间(超过你写的时间没有响应, 那么就算失败)
            cache: true, // 是否缓存, 默认是 true
            context: 上下文, // 改变回调函数里面的 this 指向
          })
   //这里我们只需要按照自己的需求填写 几个参数就可以实现一个请求,是不是特别简单

二、 jQuery 之 jsonp

//jsonp是利用script标签里src属性来实现一些跨域请求,jQuery也提供了一个

 $.ajax({
      url: 'http://127.0.0.1/server/jsonp.php',
      dataType: 'jsonp', // 表示我要发送一个 jsonp 请求
      jsonp: 'cb', // 表示参数里面的 cb 属性时我准备好的函数名
      cache: true, // 表示缓存本次请求
      success: function (res) {
        console.log(res)
      }
    })
    //看着是不是感觉和ajax中的json特别像,本质上是没有联系的, json是数据格式,而jsonp是一个非官方跨域方法

三、 jQuery 之 ajax 全局钩子函数

// 这些全局函数都是挂在 ajax 身上的, 这个 ajax 的每一个动作都和全局函数有关系
jQuery 的 ajax 全局钩子函数

	      1. ajaxStart()
            => 会在同一个作用域下多个 ajax 的时候, 第一个 ajax 之前开始的时候触发
            => 如果有多个 ajax 他只触发一次
          2. ajaxSend()
            => 每一个 ajax 再发送出去之前, 都会触发一下
            => xhr.send() 之前触发
          3. ajaxSuccess()
            => 每一个 ajax 再成功的时候触发
            => 只要有一个 ajax 成功了就会触发
          4. ajaxError()
            => 每一个 ajax 再失败的时候触发
            => 只要有一个 ajax 失败了就会触发
          5. ajaxComplete()
            => 每一个 ajax 完成的时候触发
            => 只要有一个 ajax 完成了, 不管成功还是失败, 都会触发
          6. ajaxStop()
            => 会在同一个作用域内多个 ajax 的时候, 最后一个 ajax 完成以后触发
            => 如果有多个 ajax 它只触发一次
       // 作用: 通常用来做 loading 效果