![](https://img-blog.csdnimg.cn/20190918140145169.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
数据交互&异步编程-前端进阶Ajax
文章平均质量分 74
数据交互&异步编程-前端进阶Ajax
厚德载物的陈同学
需要源码的(https://github.com/Chicksqace),B站搜索(厚德载物的陈同学)感谢三连支持!!!
展开
-
Ajax--HTTP协议加强--HTTP协议简介
通信,就是。原创 2022-11-16 11:45:14 · 74 阅读 · 0 评论 -
Ajax--HTTP协议加强--HTTP请求方法及HTTP响应状态代码
* 范围的状态码,表示表示服务器要求客户端重定向,需要客户端进一步的操作以完成资源的请求。发送请求来获得服务器上的资源,请求体中不会包含请求数据,请求数据放在协议头中。** 范围的状态码,表示客户端的请求有非法内容,从而导致这次请求失败。** 范围的状态码,表示服务器未能正常处理客户端的请求而出现意外错误。请求方法是要求每个服务器必须支持的,其它请求方法在不支持的服务器上会返回。向服务器提交资源,并使用提交的新资源,替换掉服务器对应的旧资源。由于超载或系统维护,服务器暂时的无法处理客户端的请求。原创 2022-11-17 18:25:06 · 101 阅读 · 0 评论 -
Ajax--HTTP协议加强--HTTP响应消息
响应体中存放的,是服务器响应给客户端的资源内容。关于更多响应头字段的描述,可以查看 MDN。在最后一个响应头部字段结束之后,会紧跟一个。组成,每行的键和值之间用英文的冒号分隔。个部分组成,他们之间使用空格隔开。服务器响应给客户端的消息内容。响应消息中的空行,用来分隔。原创 2022-11-14 20:18:16 · 100 阅读 · 0 评论 -
Ajax--HTTP协议加强--HTTP请求消息
协议属于客户端浏览器和服务器之间的通信协议。用来描述客户端期望接收哪种人类语言的文本内容。用来描述客户端能够接收什么类型的返回内容;组成,每行的键和值之间用英文的冒号分隔。关于更多请求头字段的描述,可以查看。用来说明当前是什么类型的浏览器;用来描述发送到服务器的数据格式;用户期望获得的自然语言的优先顺序。客户端可识别的响应内容类型列表。客户端可接收的内容压缩编码形式。请求消息中的空行,用来分隔。请求体中存放的,是要通过。客户端发送到服务器的消息。客户端与服务器的连接方式。用来描述请求体的大小。原创 2022-11-14 20:17:54 · 75 阅读 · 0 评论 -
Ajax--跨域与JSONP--防抖和节流
懒加载时要监听计算滚动条的位置,但不必每次滑动都触发,可以降低计算的频率,而不必去浪费。就是我们玩射击游戏时,一直按攻击键,但是并不是一直使用技能,而是有技能限定的。防抖: 规定时间内触发则重新计算时间,如回城。鼠标连续不断地触发某事件(如点击),只在单位时间内只触发一次;),顾名思义,可以减少一段时间内事件的触发频率。高铁卫生间是否被占用,由红绿灯控制,为绿灯,表示下一个人可以使用卫生间。防抖:如果事件被频繁触发,防抖能保证。,被占用的卫生间无法被其他人使用。节流:如果事件被频繁触发,节流能够。原创 2022-11-12 09:59:42 · 80 阅读 · 0 评论 -
Ajax--跨域与JSONP--案例-淘宝搜索
用户在输入框中连续输入一串字符时,可以通过防抖策略,只在输入完后,才执行查询的请求,这样可以有效减少请求次数,节约请求资源;上次按键盘并没有到500ms 上次的直接清空了 然后下面重新开延迟器 到了500ms就是最后一次输入 能保证只输入一次。就是英雄回城就是延迟几秒,而中间如果打断了, 那么就要重新计时。为了获取到用户每次按下键盘输入的内容,需要监听输入框的。就是在调用回调函数时,保证只执行一次,提高浏览器的性能。将获取搜索建议列表的代码,封装到。不防抖,每输入一个字母就执行一次。)是当事件被触发后,原创 2022-11-10 18:59:16 · 600 阅读 · 0 评论 -
Ajax--跨域与JSONP--JSONP
的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。标签不受浏览器同源策略的影响,可以通过。的形式,接收跨域接口响应回来的数据。属性,来实现跨域数据获取的,所以,属性,请求跨域的数据接口,并通过。属性实现跨域数据访问的,只不过,是随机生成的一个回调函数名称。函数,除了可以发起真正的。数据请求之外,还能够发起。请求时,如果想要自定义。的实现原理,就是通过。请求,会自动携带一个。请求非同源的接口数据。原创 2022-11-09 18:35:42 · 121 阅读 · 0 评论 -
Ajax--Ajax加强--数据交换格式
第一个name没有用双引号,第二个用单引号不合法,第三个值用单引号不合法,在json中所有的字符串都要用双引号,第四个undefined不属于6种类型,要表示不存在可以使用null,第5个单引号,第六个都不对,键没有用双引号 值没有函数。确实是js格式的字符串,这个不便利我们操作,所有要转换。用的非常少,所以,我们重点要学习的数据交换格式就是。虽然都是标记语言,但是,它们两者之间没有任何的关系。格式臃肿,和数据无关的代码多,体积大,传输效率低。年开始被推广和使用的数据格式,到现今为止,原创 2022-11-08 14:55:05 · 207 阅读 · 0 评论 -
Ajax--跨域与JSONP--了解同源策略和跨域
官方给定的概念:同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。注意:浏览器允许发起跨域请求,但是,跨域请求回来的数据,会被浏览器拦截,无法被页面获取到!现如今,实现跨域数据请求,最主要的两种解决方案,分别是。是前端程序员为了解决跨域问题,被迫想出来的一种。缺点是不兼容某些低版本的浏览器。的协议、域名、端口一致,反之,则是。:出现的早,兼容性好(兼容低版本。同源(协议、域名、端口相同)同源(协议、域名、端口相同)请求的根本解决方案。通俗的理解:浏览器规定,之间进行资源的交互。原创 2022-11-08 14:54:57 · 85 阅读 · 0 评论 -
Ajax--Ajax加强--axios
这六个属性都是axios替我们包装的,只有data是服务器返回回来的参数。,只专注于网络数据请求。原创 2022-11-08 14:54:40 · 110 阅读 · 0 评论 -
Ajax--Ajax加强--jQuery高级用法(用jQuery实现文件上传功能)
【代码】Ajax--Ajax加强--jQuery高级用法(用jQuery实现文件上传功能)原创 2022-11-08 14:54:23 · 108 阅读 · 0 评论 -
Ajax--Ajax加强--XMLHttpRequest Level2的新特性
操作很耗时,而且无法预知要花多少时间。如果网速很慢,用户可能要等很久。不在需要手用append添加了,直接可以通过表单提交。传送和接收数据时,没有进度信息,只能提示有没有完成。只支持文本数据的传输,无法用来读取和上传文件。操作往往用来提交表单数据。对象,不仅可以发送文本信息,还可以上传文件。事件,来获取到文件的上传进度。控制一下网速,切换到netbook中。上面的语句,将最长等待时间设为。过了这个时限,就自动停止。可以获得数据传输的进度信息。对象中,可以通过监听。原创 2022-11-08 14:53:51 · 139 阅读 · 0 评论 -
Ajax--Ajax加强--封装自己的Ajax函数
它的实现底层实现原理通过调用itheima()函数 而传入的option是个对象,通过对象的键而在底层设置相应的效果,当然要将传入的字符串进行转换,这样拼接字符串,可以转换为查询字符串,这样就能传参数。对象,转化成查询字符串的格式,从而提交给服务器,因此提前定义。success 请求成功之后的回调函数。对象的不同操作,因此需要对请求类型进行。data 请求携带的数据。url 请求的。method 请求的类型。不同的请求类型,对应。原创 2022-11-08 14:53:32 · 388 阅读 · 0 评论 -
Ajax--Ajax加强--XMLHttpRequest的基本使用
我们代码中的status和控制台打印出来的status并不一样,控制台的返回来的数据的属性;:使用安全的字符(没有特殊用途或者特殊意义的可打印字符)去表示那些不安全的字符。请求,当需要携带参数的时候,本质上,都是直接将参数以查询字符串的形式,追加到。地址中,只允许出现英文相关的字母、标点符号、数字,因此,在。地址进行编码操作,因此,大多数情况下,程序员不需要关心。的末尾加上用于向服务器发送信息的字符串(变量)。中需要包含中文这样的字符,则必须对中文字符进行。地址的后面,发送到服务器的。原创 2022-11-08 14:45:41 · 166 阅读 · 0 评论 -
Ajax--form表单与模板引擎--模板引擎的实现原理及实现简易的模板引擎
其实就是 data[patternResult[1]] 而 patternResult[1]第一个值为name然后就变成了data[name]然后从var data = { name: '张三', age: 20 }里面取name的value值就是张三,然后就是循环替换。这里patternResult = pattern.exec(str)注意的是赋值操作,只要为ture就继续执行,要是等于null,就转换为false,退出循环。函数返回值为替换后的新字符串。如果字符串中有匹配的值,中的正则表达式的匹配。原创 2022-11-08 14:45:13 · 81 阅读 · 0 评论 -
Ajax--form表单与模板引擎--模板引擎的基本概念 - art-template模板引擎
这个data就是传给template函数的数据,就是res参数。结构比较复杂,则拼接字符串的时候需要格外注意。是一个简约、超快的模板引擎。模板引擎,顾名思义,它可以根据程序员指定的。页面,找到下载链接后,鼠标右键,选择“这个是字符串需要转换为数组,这样好做。语法循环数组,当前循环的索引使用。,它的上一个输出作为下一个输入。如果要实现循环输出,则可以在。进行访问,当前的循环项使用。定义一个格式化时间的过滤器。下载到本地,然后,通过。注意,过滤器最后一定要。减少了字符串的拼接操作。使代码更易于阅读与维护。原创 2022-11-07 16:38:15 · 324 阅读 · 0 评论 -
Ajax--form表单与模板引擎--通过Ajax提交表单数据及案例 - 评论列表
注意的一点,如果没有返回值可能是导入出现问题,要./如果直接lib有可能会失效。就是点击表单之后,会默认跳转action对应的url。当监听到表单的提交事件以后,可以调用事件对象的。为什么会是反的,这是因为浮动的原因。可以一次性获取到表单中的所有的数据。为了简化表单中数据的获取操作,函数快速获取表单数据时,原创 2022-11-07 13:27:46 · 157 阅读 · 0 评论 -
Ajax--form表单与模板引擎--form表单的基本使用
表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。标签的提交操作,把采集到的信息提交到服务器端进行处理。例如登录、注册、添加数据等表单操作,都需要使用。在使用包含文件上传控件的表单时,必须使用该值。如果表单的提交不涉及到文件上传操作,则直接将。按钮,触发表单提交的操作,从而使页面跳转到。规定当提交表单时,向何处发送表单数据。地址专门负责接收表单提交过来的数据。方式适合用来提交少量的、简单的数据。表单同步提交后,整个页面会发生跳转,地址的形式,把表单数据提交到。原创 2022-11-05 12:02:03 · 82 阅读 · 0 评论 -
Ajax--初识Ajax--案例 - 聊天机器人(黑马俩个新接口)
resetui()的作用是输入文字,会返回页面底部。这里又要注意keyCode的C是大写。将用户输入的内容渲染到聊天窗口。这里注意的是接口换成新的了。将机器人的聊天内容转为语音。这里注意的是也要用新接口。发起请求获取聊天消息。原创 2022-11-04 16:30:16 · 1175 阅读 · 2 评论 -
Ajax--初识Ajax--接口和案例 - 图书管理
这样绑定是无效的,因为a是后面添加生成的,页面是没有存在的,因此我们要用数据代理的方式,也就它的父元素tbody,因为tbody一开始就是存在的。接口文档可以包含很多信息,也可以按需进行精简,不过,一个合格的接口文档,应该包含以下。为了验证接口能否被正常被访问,我们常常需要使用接口测试工具,来对数据接口进行检测。的说明,我们参照接口文档就能方便的知道接口的作用,以及接口如何进行调用。返回示例(可选):通过对象的形式,例举服务器返回数据的结构。:接口的返回值的详细描述,一般包含。接口文档,顾名思义就是。原创 2022-11-03 18:10:48 · 1135 阅读 · 0 评论 -
Ajax--初识Ajax--jQuery里面的$.get,$.post,$.ajax使用
之前所学的技术,只能把网页做的更美观漂亮,或添加一些动画效果,但是,数据的增删改查:数据的添加、删除、修改、查询操作,都需要通过。使用Preview美化查看,只返回了id为1的数据。请求,从而将服务器上的资源请求到客户端来进行使用。函数,是一个功能比较综合的函数,它允许我们对。数据分页显示:当点击页码值的时候,通过。对象和服务器进行数据交互的方式,就是。函数发起不带参数的请求时,直接提供。用户名检测:注册用户时,通过。函数的功能单一,专门用来发起。函数的功能单一,专门用来发起。请求,从而向服务器提交数据。原创 2022-11-02 15:43:35 · 290 阅读 · 0 评论 -
Ajax--服务器的基本概念
上网的本质目的:通过互联网的形式来获取和消费资源。例如我们看电视,看小说,玩游戏上网过程中,负责存放和对外提供资源的电脑,叫做服务器。上网过程中,负责获取和消费资源的电脑,叫做客户端。我是这样理解的,服务器就是放资源,客户端就是用来获取资源的。打一个例子:我们听一首歌,歌肯定不是凭空出现的,而是放在服务器里,我们通过客户端来获取这些资源。服务器就是性能更高的客户端。URL(全称是)中文叫统一资源定位符,用于标识互联网上每个资源的唯一存放位置。浏览器只有通过URL。原创 2022-10-31 14:14:56 · 80 阅读 · 0 评论