使用ajax区别必须到jquery,jquery的ajax探讨

一、关于 jquery 的 ajax

因为开发项目经常接触 jquery 的 ajax,也知道基本语法,其中参数中 type、url、data 和 suscess 成功函数经常使用,本以为很熟悉了,但通过老师的授课,我才知道它竟然是一个庞大的体系,它等同于原生 JS 中 XMLHttpRequest 对象完成了和后端的交互。

ajax() 方法通过 HTTP 请求加载远程数据

该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现了\$.get, \$.post 等。\$.ajax() 返回其创建的 XMLHttpRequest 对象 ,下图是打印的返回对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性。

最简单的情况下,\$.ajax() 可以不带任何参数直接使用。

注意:所有的选项都可以通过 \$.ajaxSetup() 函数来全局设置。

0f27cd4480172521aaca14898a718896.png

下面先介绍下常见的使用,最后再附上我收集和学习的一些,重点是常用方法、参数和一些简单使用,至于更深入的学习随以后再补充。

二、jquery 中与 ajax 相关的操作

1、 相关操作简介load(): 请求数据

\$.get(): 请求数据

\$.post(): 请求数据

\$.getJSON(): 请求 JSON 数据,dataType 为 json

\$.ajax(): 请求数据,dataType 一般为 html 或 json

\$.ajax()-jsonp: 跨域请求数据,dataType 为 jsonp

2、dataType

ajax 的方法是经常介绍的,常用的是 GET 或 POST,但最有意思却是 dataType 属性,它的取值决定了可获取什么类型数据,如上面已经介绍的 html、json 和 jsonp,下面对它的取值进行了归纳:

dateType 后接受的参数

参数类型: string

预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断。比如 XML MIME 类型就被识别为 XML。在 1.4 中,JSON 就会生成一个 JavaScript 对象,而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调 函数。

“xml”: 返回 XML 文档,可用 jQuery 处理。现在基本被 json 替代了。

“html”: 返回纯文本 HTML 信息 ;包含的 script 标签会在插入 dom 时执行。

“script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 “cache” 参数。注意:在远程请求时(不在同一个域下),所有 POST 请求都将转为 GET 请求。(因为将使用 DOM 的 script 标签来加载)

“json”: 返回 JSON 数据 。公共 API 最常见的返回方式,也是 ajax 局部更新页面的关键所在。

“jsonp”: JSONP 格式。使用 JSONP 形式调用函数时,如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。

“text”: 返回纯文本字符串

“local”:返回本地数据(即第一次初始化时只加载本地代码显示的样式,而不加载任何后台返回的数据)

三、jquery 中与 ajax 相关的操作演示

1、演示前需要补充的知识

后面演示需要使用 jquery 的 dom 操作,至于 jquery 基本知识和操作可见我的文章https://www.php.cn/blog/detail/24825.html,这里补充知识其实就是我在练习时遇到的错误,也许对使用 jquery 使用有更深入的帮助。

创建或插入元素时注意事项 jquery 和原生 JS 对于元素的处理是不同的,原生 JS 是元素名称即可,如 createElement(‘div’),而 jquery 则是完整的 html 书写语法 ,对应就是\$(‘\

‘),对于这点一定要注意,jquery 为了降低学习成本,支持原生 html 和 CSS 选择器的书写格式。

jquery 的 click 方法是 DOM0 级事件吗? 记得老师上课说 click 相当于原生 JS 的事件属性,而 on 则是相当于事件监听器,所以在上篇文章中也是这样写的总结,结果在本次测试时却意外发现不是这么回事?多次定义 click 事件产生叠加效果,这和 DOM0 级事件特性不符合,所以它只能是 DOM2 级事件。

this 和回调函数 为什么要提这个,前面文章也经常说 function(){}回调函数中 this 表示本身,而箭头函数定义的回调函数中则没有 this ,那么 箭头函数中 this 则是代表外而一层对象 ,如下面测试案例中,按钮点击事件的回调函数中 ajax 的 success 中调用 this,若 ajax 的箭头函数中有 this 则代表按钮,即外一层是按钮。当然可以采用老师的解决方案,使用事件对象的 target,即 event.target,至于事件对象的 target 和 currentTarget 区别见https://www.php.cn/blog/detail/24777.html中事件对象的介绍部分。

jQuery 对象和 js 对象 前篇文章中已经介绍过了$(js对象)转成jQuery对象,而jQuery对象get(index)或数组索引都可转成js对象。那么在 jQuery的each中item 或 事件的回调函数中this则是js对象 ,想继续使用jQuery方法则需要\$()转成 jQuery 对象。

2、下面是演示代码

body{

display:grid;

gap:15px;

}

button{

padding:0.5em;

text-align:left;

}

button span{

color:red;

}

button:hover{

background-color:lightcyan;

cursor:pointer;

}

1. load(): 请求数据

2. $.get(): 请求数据

3. $.post(): 请求数据

4. $.getJSON(): 请求JSON数据

5. $.ajax(): 请求数据

6. $.ajax()-jsonp: 跨域请求数据1

7. $.ajax()-jsonp: 跨域请求数据2

constbtns=document.querySelectorAll('button');

// 1. $.load和$.ajax等效实现

// 增加判断,防止重复添加

$(btns[0]).click(function(){

if($(this).next().get(0).tagName=='BUTTON')$(this).after('

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值