jQuery 发送一个 get 请求
+ jQuery 提供了一个函数, 叫做 $.get()
+ 引入 jQuery 以后, 回提供两个变量
1. $
2. jQuery
=> 这两个都是函数数据类型
+ 把这个函数当作一个对象, 向他的身上添加了一些成员
=> 我们管这种方法叫做 jQuery 的全局方法
=> 不需要依赖选择器, 不需要元素集合
=> 直接调用就行
专门用来发送 get 请求
+ 语法: $.get(地址, 传递给后端的数据, 回调函数, 期望返回的数据类型)
=> 地址: 请求地址 (你可以自主拼接参数, 不推荐)
=> 数据: 给后端的数据, 可以写 'key=value&key=value', 可以写 { ... }
=> 回调: 请求成功的回调, 请求成功以后会触发
=> 期望返回的数据类型: 是不是执行解析响应体的操作
-> 'string' 不解析
-> 'json' 会执行一步 JSON.parse()
jQuery 发送一个 post 请求
+ jQuery 提供了一个全局方法叫做 $.post()
+ 专门用来发送 post 请求
发送 post 请求
=> 语法: $.post(地址, 携带给后端的数据, 回调函数, 期望后端返回的数据类型)
=> 四个参数的意义和 $.get() 一模一样
jQuery 发送 ajax 请求的综合方法
+ 可以由你来配置, 决定发送 get 还是 post 请求
+ 叫做 $.ajax()
=> 我们所有的请求都可以使用他来发送
使用
=> 语法: $.ajax(options)
=> options: 就是本次请求的配置信息, 是一个对象数据类型
配置信息里面可以填写的内容
1. url: 请求地址, 必填
2. async: 是否异步, 默认是异步(true), 可以选填非异步(false)
3. type / method: 表示请求方式, 默认是 GET, 可以选填其他请求方式
-> 大小写无所谓
4. data: 传递给后端的参数
-> 可以是查询字符串的形式
-> 可以是对象的形式
5. dataType: 期望后端返回的数据类型, 是否进行 JSON.parse() 解析
6. success: 接收一个函数数据类型, 表示成功的回调
7. error: 接收一个函数数据类型, 表示失败的回调
-> 不光是请求失败会走失败的回调
-> 当你解析失败的时候, 会走失败的回调
8. timeout: 设置一个超时时间
-> 从发送请求开始计时, 到达超时时间还没有接收到响应
-> 会直接取消本次请求, 到失败的回调函数
9. cache: 是否缓存
-> 对于 ajax 请求默认缓存的(true), 可以选填(false)
-> 如果你选择缓存, 那么不会有最后一个时间戳参数
-> 如果你选择不缓存, 那么 jQuery 会在本次请求的末尾添加一个时间戳作为参数
-> 对于 jsonp 请求默认不缓存(false), 可以选填(true)
-> 当你发送 jsonp 请求的时候, 会默认带有一个时间戳参数
10. context: 上下文
-> 指定回调函数的 this 指向
-> jQuery 默认回调函数的 this 指向 jQuery 封装的 xhr 对象
-> context 传递的是谁, 回调函数的 this 就指向谁
缓存:
=> GET 请求会自主缓存, 为什么会缓存 ?
=> 因为你两次发送同一个请求, 浏览器就有可能会缓存下来
-> 怎么证明两次是一个请求
-> 请求地址一模一样, 就表示是同一个请求
=> 不想你进行缓存
-> 让每一次的请求地址不一样
-> 每次请求的时候, 再最后携带一个没有用的参数, 值设置成时间戳
-> 每次请求的地址就不一样
jQuery 发送 ajax 请求
+ jQuery 对于 ajax 的封装
+ 除了回调函数的形式接收结果
+ 还封装了 promise 的形式接收结果
+ 一个 $.ajax() 方法
=> 你可以选择书写回调函数的形式
=> 也可以选择 promise 的形式
+ 注意: 选择一种方式使用, 不要都是用
跨域请求
+ 非同源地址
+ 解决方案
1. jsonp
+ 前端利用 script 标签和 src 属性绕开同源策略
+ 和 ajax 没有关系, 实际上不是在发送 ajax 请求
+ 实际上是在请求一个 js 文件
2. 代理
+ 由一个同源的代理服务端转发请求
+ 对于前端来说, 依旧是正常发送请求
+ 只不过把地址书写成代理地址
+ 依旧是直接使用 $.ajax() 方法来发送
+ 只不过 url 位置书写 代理标识符
3. cors
+ 服务端允许指定客户端发送请求
+ 和前端没有关系
+ 前端正常发送请求
+ 使用 $.ajax()
jQuery 发送 jsonp 请求
+ 使用一个叫做 $.ajax() 的方法
+ 因为 jQuery 封装 ajax 函数的时候做了一个判断
=> 根据你 dataType 传递的值来判断
=> if (dataType === 'jsonp') {
// 走一套动态创建 script 标签
// 动态添加 src 属性
// 动态插入到 body
// 动他的删除 script
} else {
// 按照 ajax 的一套流程封装
}
+ 只要把 dataType 书写成 'jsonp'
=> 就会发送 jsonp 请求
+ 注意: 发送 jsonp 请求会默认不缓存(自动添加一个 _=时间戳)
jQuery 发送 jsonp 请求专用的配置项
1. jsonp: 表示携带函数名的那个 key
2. jsonpCallback: 表示你自主定义的函数名
=> 默认值是 jquery 自己组装的 jQuery-版本号随机数_时间戳
jQuery 的全局钩子函数
+ 也叫做全局 ajax 函数
+ 出现在 ajax 的不同阶段
+ 再一个 ajax 的整个周期中, 会在不同的位置执行的函数
+ 我们管这种再一个事情的生命周期上各个不同时期触发的函数叫做 钩子函数
=> 不是自主触发的函数, 而是钩挂再其他的事情上
=> 由其他的事情发生过程中来触发我
1. ajaxStart()
=> 表再同一个作用域下多个 ajax 请求的时候
=> 第一个 ajax 请求之前
2. ajaxSend()
=> 表示再每一个请求发送之前触发
=> 只要有一个请求要执行 send 方法了, 就会先出发钩子函数
3. ajaxSuccess()
=> 表示再每一个请求成功之后触发
=> 只要有一个请求成功了, 就会触发一次
4. ajaxError()
=> 表示再每一个请求失败之后触发
=> 只要有一个请求失败了, 就会触发一次
=> 根据 jQuery 判定的失败
5. ajaxComplete()
=> 表示再每一个请求完成之后触发
=> 只要有一个请求完成了, 不管成功还是失败, 只要完成了就会触发
6. ajaxStop()
=> 表示再同一个作用域下最后一个 ajax 结束以后触发
=> 当你有多个请求的时候, 会在最后一个结束以后触发这个钩子
jQuery 的多库并存
+ jquery 自己是一个库
+ 还有很多其他的 库
+ 当你出现第二个库一起使用的时候
=> 如果两个库都向外暴露了 $ 或者 jQuery 的变量名
=> 就会出现变量名冲突
+ 两个库只有一个能正常使用
=> 谁写在后面就是谁
+ jQuery 给我们提供了一个多库并存的机制
使用
1. 要求你把 jQuery 引入再最后面
=> 先暂时把变量民的所有权交给 jQuery
2. 执行一个方法, jQuery 把变量名的所有权交出去
=> 表示我不再占用这个名字了
2-1. noConflict()
-> 交出 $ 的控制权
2-2. noConflict(true)
-> 交出 $ 和 jQuery 的控制权
2-3. const 变量 = $.noConflict(true)
-> 你的变量是什么
-> 自己定义一个控制权
深浅拷贝
+ 三个词(描述对象和对象之间的关系)
1. 赋值
=> 把一个对象的地址赋值给另一个变量
=> 两个变量操作同一个空间
2. 浅拷贝
=> 把对象里面的每一个成员, 复制一份一模一样的内容
=> 放到另一个对象里面
=> 当你有某一个对象成员是复杂数据类型的时候
=> 这个成员依旧是一样的
=> 只是操作对象里面一层可以没有关系, 如果再深层次就会出现问题
3. 深拷贝
=> 对象空间里面不管多少层, 都是相对独立, 没有关系
=> for in 遍历赋值
=> 只要碰到某一个是复杂数据类型 对象 或者 数组
=> 再次进入到这个数据类型里面进行二次遍历
=> 方案1: 利用递归思想实现深拷贝
-> 把第一遍遍历放在一个函数里面
-> 如果遍历的时候, 发现有一个数据是 数组 或者 对象
-> 从新调用函数
=> 方案2: json
-> 不管多复杂的数据类型, 转换成 json 以后就是字符串
-> 字符串的赋值时基本数据类型
-> 赋值以后再转换回来
jQuery 里面的深浅拷贝
+ jQuery 里面提供了一个进行深浅拷贝的方法
+ $.extend()
=> 语法:
1. $.extend(对象1, 对象2, 对象3, ...)
-> 把从第二个参数开始的每一个对象的数据拷贝到第一个对象中
-> 是一个浅拷贝
2. $.extend(true, 对象1, 对象2, 对象3, ...)
-> 把从第三个参数开始的每一个对象的数据拷贝到第二个对象中
-> 是一个深拷贝
=> 注意:
-> 如果你要进行拷贝, 不管是深拷贝还是浅拷贝
-> 至少传递两个参数
-> 传递一个参数的时候, 不是进行拷贝
jQuery 的插件扩展
+ jQuery 再设计的时候, 封装了好多的方法
+ 但是怕你不够用, 提供了插件扩展机制
+ 你可以向 jQuery 里面扩展一些内容
+ 插件扩展机制提供了两个方法
1. 扩展到 jQuery 本身, 作为全局方法调用
=> 语法: $.extend({ 你扩展的方法 })
=> 使用: $.extend({ a: function () {} })
-> 相当于扩展了一个 a 方法再 jQuery 本身
-> 如果你向调用, 就书写 $.a()
2. 扩展到 jQuery 的原型上, 就是给 jQuery 的元素集合使用
=> 语法: $.fn.extend({ 你扩展的方法 })
=> 使用: $.fn.extend({ a: function () {} })
-> 相当于扩展了一个 a 方法给 jQuery 的元素集合
-> 如果你想调用, 就书写 $(选择器).a()
=> 第二种书写的语法
-> $.extend($.fn, { 你扩展的方法 })
jQuery 的入口函数
+ 其实就是 window.onload 这个函数
+ 语法: $().ready(function () {})
-> 入口函数有一个简写的语法
-> $(function () {})
区别
+ window.onload: 所有资源加载完毕后执行
+ $().ready(): DOM 结构加载完毕就执行
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
