ajax
关注
分享
扫一扫
文章平均质量分 50
m0_63400611
这个作者很懒，什么都没留下…
展开
-
HTTP请求消息
客户端发起的请求叫做HTTP请求,客户端发送到服务器的消息,叫做HTTP请求消息注意: HTTP请求消息又叫做HTTP请求报文HTTP请求消息的组成部分HTTP请求消息由请求行,请求头部,空行和请求体4个部分组成HTTP请求消息组成部分请求行请求行由请求方式,URL和HTTP协议版本三个部分组成,他们之间使用空格隔开请求头部请求头部用来描述客户端的基本信息,从而把客户端相关的信息告知服务器User-Agent 用来说明当前是什么浏览器 Content-.原创 2022-04-07 18:26:23 · 592 阅读 · 0 评论 -
HTTP协议简介
什么是通信通信,就是信息的传递和交换通信三要素通信的主体 通信的内容 通信的方式互联网中的通信案例: 服务器把数据信息通过响应的方式发送给客户端浏览器其中:通信的主体是服务器和客户端浏览器通信的内容是数据信息通信的方式是响应什么是通信协议通信协议是通信双方完成通信所必须遵守的规则和约定通俗的理解: 通信双方采用约定好的格式来发送和接收消息,这种事先约定好的通信格式,叫做通信协议互联网中的通信协议客户端与服务器之间要实现网页内容的传输,则通信的双方原创 2022-04-07 18:03:49 · 60 阅读 · 0 评论 -
节流阀以及案例
什么是节流节流策略,可以减少一段时间内时间的触发频率,直到上一个同样的事件结束才能重新触发节流的应用场景鼠标连续不断的触发某事件(如点击),在单位时间内只触发一次 懒加载时要监听计算滚动条的位置,但不必每次滑动都触发,可以降低计算的频率,而不去浪费CPU资源节流阀的概念节流阀为空则可以执行下次操作,不为空则不能执行下次操作当前操作执行完,必须将节流阀重置为空,表示可以执行下次操作了每次执行操作前,必须先判断节流阀是否为空节流案例:鼠标跟随效果不使用节流实现鼠标跟随原创 2022-04-07 17:06:33 · 253 阅读 · 0 评论 -
ajax案例:搜索功能(防抖)
啊啊啊啊啊啊啊aaaaaa原创 2022-03-30 19:29:05 · 186 阅读 · 0 评论 -
JSONP
JSONP的实现原理由于浏览器同源策略的限制,网页中无法通过Ajax请求非同源的接口数据,但是<script>标签不受浏览器同源策略的影响,可以通过src属性,请求非同源的js脚本因此JSONP的实现原理,就是通过<script>标签的src属性请求跨域的数据接口,并通过函数调用的形式,接受跨域接口相应回来的数据自己实现一个简单的JSONP定义一个回调函数,通过<script>标签请求接口数据<!DOCTYPE html><h原创 2022-03-30 18:23:34 · 125 阅读 · 0 评论 -
了解同源策略和跨域
什么是同源如果两个页面的协议,域名和端口都相同,则两个页面具有相同的源原创 2022-03-26 23:01:59 · 100 阅读 · 0 评论 -
axios
Axios是专注于网络数据请求的库相比于原生的XMLHttpRequest对象,axios简单易用相比于jQuery,axios更加轻量化,只专注于网络数据请求axios发起GET请求axios发起get请求的语法:axios.get('url', {params: { /*参数*/ } }).then(callback)具体的请求示例如下:<!DOCTYPE html><html lang="zh-CN"><head>原创 2022-03-26 23:00:20 · 58 阅读 · 0 评论 -
jQuery高级用法
jQuery实现文件上传定义UI结构<body> <input type="file" name="" id="file"> <button id="btnUpload">上传文件</button></body>验证是否选择了文件$('#btnUpload').on('click', function() { //判断是否上传了文件 //转换为原生DOM对象才能调用files var f原创 2022-03-26 18:00:59 · 178 阅读 · 0 评论 -
XMLHttpRequest Level2的新特性
旧版XMLHttpRquest的缺点只支持文本数据的传输,无法用来读取和上传文件 传送和接受数据时,没有进度信息,只能提示有没有完成XMLHttpRequest Level2的新功能可以设置HTTP请求的时限 可以使用FormData对象管理表单数据 可以上传文件 可以获得数据传输的进度信息设置HTTP请求时限新版本的XMLHttpRequest增加了timeout属性,可以设置Http请求的时限xhr.timeout = 3000//等待三秒 超过即请求失败 自动停止H原创 2022-03-25 23:04:29 · 198 阅读 · 0 评论 -
封装自己的Ajax函数
要实现的效果<!--导入自己定义的ajax函数库--> <script src="./js/ajax.js"></script></head><body> <script> ajax({ method: '请求类型', url: '请求地址', data: { /*请求参数对象*/ }, succe原创 2022-03-25 22:45:39 · 61 阅读 · 0 评论 -
数据交换格式
什么是数据交换格式数据交换格式,就是服务器端与客户端之间进行数据传输与交换的格式前端领域经常以及的两种数据交换格式分贝是XML和JSON,其中XML用的非常少,所以重点要学的数据交换格式就是JSONXML什么是XMLXML的英文全称是Extensible Markup Language,即可扩展标记语言,因此,XML和HTML类似,也是一种标记语言html<!DOCTYPE html><html> <head>原创 2022-03-24 20:35:51 · 120 阅读 · 0 评论 -
URL编码与解码
什么是URL编码URL地址中,只允许出现英文相关的字母,标点符号,数字,因此,在URL地址中不允许出现中文字符,如果URL中需要包含中文这样的字符,则必须对中文字符进行编码(转义)URL编码的元素: 使用安全的字符(没有特殊用途或者特殊意义的可打印字符)去表示那些不安全的字符URL编码原则的通俗理解: 使用英文字符去表示非英文字符http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记//经过URL编码之后,URL原创 2022-03-24 19:27:37 · 491 阅读 · 0 评论 -
查询字符串
什么是查询字符串定义: 查询字符串(URL参数)是指在URL的末尾加上用于向服务器发送信息的字符串(变量)格式: 将英文的'?'放在URL的末尾,然后再加上'参数=值',可以使用'&'符号进行分隔加多个参数,这个形式可以将想要发送给服务器的数据添加到URL中//不带参数的URL地址www.liulongbin.top:3006/api/getbooks//带一个参数的URL地址www.liulongbin.top:3006/api/getbooks?id=1//带两个参数的UR原创 2022-03-24 18:42:41 · 1899 阅读 · 0 评论 -
XMLHttpRequest的基本使用
什么是XMLHttpRequestXMLHttpRequest(简称xhr)是浏览器提供的JavaScript对象,通过它,可以请求服务器上的数据资源,之前所学的jQuery中的Ajax函数,就是基于xhr对象封装出来的使用xhr发起GET请求步骤:创建xhr对象 调用xhr.open()函数 调用xhr.send()函数 监听xhr.onreadystatechange事件使用xhr发起GET请求代码示例:<!DOCTYPE html><htm原创 2022-03-24 17:34:04 · 178 阅读 · 0 评论 -
模板引擎的实现原理(正则)
正则与字符串操作基本语法exec()函数用于检索字符串中的正则表达式的匹配如果字符串中有匹配的值,则返回该匹配值,否则返回nullRegExpObject.exec(string)示例代码如下:var str = 'hello'var pattern = /o///输出的结果{"o", index: 4, input: "hello", groups: undefined}console.log(pattern.exec(str)}将需要匹配的字符串以参数的形式传入原创 2022-03-23 22:37:26 · 163 阅读 · 0 评论 -
ajax案例:获取新闻列表
分析获取新闻数据 定义template模板 编译模板 定义时间过滤器 定义补零函数代码index.html<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <m原创 2022-03-23 17:38:22 · 182 阅读 · 0 评论 -
art-template标准语法
什么是标准语法art-template提供了"{{}}"这种语法格式,在{{}}内可以及进行变量输出,或循环数组等操作,这种{{}}语法在art-template中被称为标准语法标准语法 - 输出{{value}}{{obj.key}}{{obj['key']}}{{a ? b : c}}{{a || b}}{{a + b}}在{{}}语法中,可以进行变量的输出,对象属性的输出,三元表达式输出,逻辑或输出,加减乘除等表达式输出标准语法 - 原文输出{{@ value}原创 2022-03-22 23:27:39 · 469 阅读 · 0 评论 -
模板引擎的基本概念
渲染UI结构时遇到的问题var rows = [];$.each(res.data, function(i, item) { //每循环一次 创建一个字符串 结构 var str = '<li class="list-group-item"><span class="badge" style="background-color: #F0AD4E;">评论时间: ' + item.time + '</span><span class="badge" s原创 2022-03-22 20:27:49 · 140 阅读 · 0 评论 -
ajax案例:评论列表
分析通过接口文档提供的接口信息,以及利用bootstrap.css库,jQuery.js库,实现页面的样式,通过js将从接口获取到的数据渲染到页面中代码及接口文档引入bootstrap,以及jQuery才能正常运行其中bootstrap部分使用了:1.bs3-panel:primary作为表单区域的样式,后续添加div,input class="form-control"以及button class"btn btn-peimary"2.bs3-list-group:badges作原创 2022-03-22 18:57:50 · 235 阅读 · 0 评论 -
Ajax提交表单数据
监听表单提交事件在jQuery中,可以使用以下两种方式,监听到表单的提交事件$('#form').submit(function(e) { alert('监听到了表单的提交事件');})$('#form').on('submit', function(e) { alert('监听到了表单的提交事件');})<!DOCTYPE html><html lang="zh-CN"><head> <meta charset原创 2022-03-22 16:37:34 · 83 阅读 · 0 评论 -
Ajax中的＜form＞标签
<form>标签的属性<form>标签用来采集数据,<form>标签的属性则是用来规定如何把数据发送到服务器属性 值 描述 action URL地址 规定提交表单时,向何处发送表单数据 method get或post 规定以何种方式把表单的数据提交到action URL enctype application/x-www-form-urlencoded multipart/for原创 2022-03-22 14:10:29 · 162 阅读 · 0 评论 -
js案例:图书管理
插件bootstrap.cssjQuery.jsVSCode插件:Bootstrap 3 Snippets代码<!doctype html><html><head><meta charset="utf-8"><title>aaa</title> <script src="jQuery/jQuery.js"></script> <link rel="stylesheet" h原创 2021-12-25 14:46:37 · 627 阅读 · 0 评论 -
接口的了解
接口的概念使用Ajax请求数据时被请求的URL地址就叫做数据接口,每个接口必须有请求方式例如:http://www.liulongbin.top:3006/api/getbooks获取图书列表的接口(GET请求)http://www.liulongbin.top:3006/api/addbook 添加图书的接口(POST请求)...原创 2021-12-24 22:47:42 · 154 阅读 · 0 评论 -
jQuery中的Ajax
了解jQuery中的Ajax浏览器提供的XMLHttpRequest用法复杂,所以jQuery对此进行了封装,降低了使用难度$.get()函数的用法用来发起get请求,将服务器上的资源请求到客户端来使用语法:$.get(URL, [data], [callback]);三个参数的含义如下:...原创 2021-12-23 22:51:16 · 89 阅读 · 0 评论 -
ajax案例:聊天机器人
使用到的接口http://www.liulongbin.top:3006/api/robothttp://www.liulongbin.top:3006/api/synthesize(黑马课程提供)需要用到jQuery库分析绑定发送按钮和输入框,分别在输入框按下回车键和鼠标点击发送时触发send()方法,此方法在外面定义,因为需要多次使用,send()方法内容包括获取输入框的内容val(),判断内容是否为空,是则返回空,否则在tali_list中插入一段html内容,即将输入框的内原创 2022-03-19 15:15:30 · 405 阅读 · 0 评论