英文wordpress建站,网站主机和服务器的区别,互联网运营在线培训,wordpress html页面模板文章目录7 Ajax7.1 概述7.1.1 基本概念7.1.2 网络通信开发者工具7.1.3 网页请求数据的方式7.1.4 资源的请求方式7.2 JQuery中的Ajax7.2.1 基本知识7.2.2 了解jQuery的Ajax7.2.3 $.get()7.2.4 $.post()7.2.5 $.ajax()7.3 接口7.3.1 接口概念7.3.2 接口测试工具7.4 form表单7.4.1…
文章目录7 Ajax7.1 概述7.1.1 基本概念7.1.2 网络通信开发者工具7.1.3 网页请求数据的方式7.1.4 资源的请求方式7.2 JQuery中的Ajax7.2.1 基本知识7.2.2 了解jQuery的Ajax7.2.3 $.get()7.2.4 $.post()7.2.5 $.ajax()7.3 接口7.3.1 接口概念7.3.2 接口测试工具7.4 form表单7.4.1 form表单的基本使用7.4.2 form标签的属性actionmethodenctype7.4.3 表单的同步提交7.4.4 阻止表单默认提交行为7.4.5 快速获取提交数据7.5 模板引擎7.5.1 模板引擎7.5.2 art-template7.6 原生Ajax7.6.1 XMLHttpRequest7.6.2 xhr对象属性7.6.3 xhr的get请求7.6.4 xhr发起带参数的get请求7.6.5 查询字符串7.6.6 URL编码7.6.7 xhr的post请求7.6.8 数据交换格式7.6.10 JSON的两种结构7.6.11 JSON和JS对象7.7 XMLHttpRequest Level27.7.1 新特性7.7.2 设置HTTP请求时限7.7.3 FormData对象管理表单数据7.7.4 FormData对象管理表单数据7.7.5 上传文件7.8 axios7.8.1 Axios概述7.8.2 Axios发起请求7.9 跨域和JSONP7.9.1 同源策略7.9.2 JSONP原理7.10 防抖7.11 节流7 Ajax
7.1 概述
7.1.1 基本概念
服务器(Server)负责存放和对外提供资源的电脑。
客户端(Client)负责获取和消费资源的电脑。
统一资源定位符(UniformResourceLacator,URL)用于标识互联网上每个资源的唯一存放位置。浏览器只有通过URL位置才能正确定位资源的存放位置从而成功访问到对应的资源。 7.1.2 网络通信开发者工具
如果是edge浏览器可以右键检查然后按图中步骤查看。 如果是谷歌浏览器同样点击右键检查然后按图中步骤查看。 7.1.3 网页请求数据的方式
数据也是服务器对外提供的一种资源。只要是资源必然要通过请求-处理-响应的方式来获取。 如果要在网页中请求服务器上的数据资源就需要使用XMLHttpRequest简称xhr对象。类似于document对象都是由浏览器即window提供的。不同的是xhr需要通过构造函数实例化。即var xhrObj new XMLHttpRequest()。 7.1.4 资源的请求方式
请求的方式有很多常见的为get和post。 get请求通常用于获取服务端资源向服务器要任何资源 post请求通常用于向服务器提供数据往服务器发送资源 7.2 JQuery中的Ajax
7.2.1 基本知识
Ajax的全程是Asynchronous Javascript And XML异步js和XML。通俗的理解就是在网页中利用xhr来和服务器进行数据交互的方式。
之前所学的技术只能把网页做的美观如果要实现网页和服务器的数据交互则需要使用Ajax。 Ajax典型的应用场景有用户名检测是否存在、数据可视化大屏的时间更新、搜索引擎动态加载提示列表、根据页码值动态刷新表格的数据、数据的增删改查。 7.2.2 了解jQuery的Ajax
浏览器中提供的XMLHttpRequest用法较为复杂故JQuery对其进行了封装提供了一系列Ajax相关的函数极大地降低了Ajax的使用难度。
JQuery中发起Ajax请求的最常用三个方法如下
$.get()$.post()$.ajax() 7.2.3 $.get()
说明jQuery中的$.get()函数的功能单一专门用于发起get请求从而将服务器上的资源请求到客户端来进行使用。
语法$.get(url,[data],[callback]) 7.2.4 $.post()
说明jQuery中的$.post()函数的功能单一专门用于发起post请求
语法$.post(url,[data],[callback]) 7.2.5 $.ajax()
说明$.ajax可看做是get和post的结合体。
语法
$ajax({type:,//post或geturl:,data:{},success:function(res){}
})7.3 接口
7.3.1 接口概念
说明使用ajax请求数据时被请求的URL地址被叫做数据接口。同时每个接口必须有请求方式。 7.3.2 接口测试工具
postmanarifox 7.4 form表单
7.4.1 form表单的基本使用
说明表单在网页中主要负责数据采集的功能HTML中的form标签就是用于采集用户输入的信息并通过其提交来将采集后的信息提交到服务器端进行处理。 7.4.2 form标签的属性
说明form标签用来采集数据form标签的属性则是用来规定如何把采集到的数据发送到服务器。
属性值描述actionURL地址规定当提交表单时向何处发送表单数据methodget或post规定以何种方式将表单数据提交到action URLenctypeapplication/x-www-form-urlencoded multipart/form-data text/plain规定在发送表单数据之前如何对其进行编码target_blank/, _self, _parent, _top, framname规定在何处打开action URLaction
action属性用来规定当提交表单时向何处发送表单数据action属性的值应该是后端提供的一个URL地址这个URL地址专门负责接收表单提交过来的数据当form表单在未指定action属性的情况下action的默认值为当前页面的URL地址当提交表单后页面会立即跳转到action属性指定的URL地址中 method
method默认为get表示通过URL地址的形式将表单数据提交到action URL中。get方式适合用来提交少量的、简单的数据。post方式适合用来提交大量的、复杂的、或包含文件上传的数据在实际开发中form表单的post提交方式最多很少用get。例如登录、注册、添加数据等表单操作都需要使用post方式来提交表单。 enctype
值描述application/x-www-form-urlencoded在发送前编码所有字符默认multipart/form-data不对字符编码。在使用包含文件上传控件的表单时必须使用该值text/plain空格转换为但不对特殊字符编码7.4.3 表单的同步提交
说明按submit后表单提交到指定的url即为同步提交
缺点
整个页面会发生跳转用户体验差表单同步提交后页面之前的状态和数据会丢失
解决方案表单只负责采集数据Ajax来复杂将数据提交到服务器。
解决步骤获取表单元素并监听一旦提交数据则触发事件通过ajax提交数据给服务器。
script src./jquery.min.js/script
/headbodydivform actionlogin idf1input typetext placeholder请输入账号brinput typetext placeholder请输入密码brinput typesubmit value登录/form/divscript$((){$(#f1).submit((e){alert(表单被提交)})})/script
/body7.4.4 阻止表单默认提交行为
script src./jquery.min.js/script
/headbodydivform actionlogin idf1input typetext placeholder请输入账号brinput typetext placeholder请输入密码brinput typesubmit value登录/form/divscript$((){$(#f1).submit((e){alert(表单被提交)e.preventDefault()// 可以阻止表单提交后跳转界面})})/script
/body7.4.5 快速获取提交数据
通过给form标签指定id通过JQuery的serialize函数可以快速获取表单信息但form中的每个表单元素必须都有设置name属性。
script src./jquery.min.js/script
/headbodydivform actionlogin idf1input typetext placeholder请输入账号 name usernamebrinput typetext placeholder请输入密码 name passwordbrinput typesubmit value登录/form/divscript$(function() {$(#f1).submit((e){e.preventDefault()// 可以阻止表单提交后跳转界面let data $(#f1).serialize()console.log(data);})})/script
/body7.5 模板引擎
7.5.1 模板引擎
说明根据程序员指定的模板结构和数据自动生成一个完整的HTML页面。
好处减少了字符串的拼接操作代码更加清晰更容易维护。 7.5.2 art-template
说明art-template是一个简约超快的模板引擎。
官网art-template (aui.github.io)
注意我们实际上不需要学习这个模板引擎Vue使用的就是模板的概念而且es6也有模板字符串无需模板引擎。 7.6 原生Ajax
7.6.1 XMLHttpRequest
说明XMLHttpRequest简称xhr是浏览器提供的js对象通过它可以请求服务器上的数据资源。Jquery的Ajax函数由此封装。
示意图 7.6.2 xhr对象属性
属性描述onreadystatechange定义当 readyState 属性发生变化时被调用的函数readyState保存 XMLHttpRequest 的状态。 0请求未初始化 1open方法已被调用 2send方法被调用请求已收到 3正在处理请求数据接收中 4ajax请求完成这意味着数据传输已经彻底完成或者失败responseText以字符串返回响应数据responseXML以 XML 数据返回响应数据status返回请求的状态号 200: “OK” 403: “Forbidden” 404: “Not Found”statusText返回状态文本比如 “OK” 或 “Not Found”7.6.3 xhr的get请求
// 1.创建xhr对象
let xhr new XMLHttpRequest()
// 2.调用open函数指定请求方式和URL地址
xhr.open(GET,{name:zs,age:12})
// 3.调用send函数发起ajax请求
xhr.send()
// 4.监听onreadystatechange事件
xhr.onreadystatechange (){// 如果服务器能够连接则返回数据if(xhr.readyState 4 xhr.status 200) console.log(xhr.responseText);
}7.6.4 xhr发起带参数的get请求
xhr.open(Get,http://www.liulongbin.top:3306/api/getbooks?id1)7.6.5 查询字符串
说明url后?后面为查询字符串左边为键右边为值。多个键值对参数使用连接。
范例http://www.liulongbin.top:3306/api/getbooks?id1
get请求携带参数的本质无论是使用Jquery还是原生ajax当需要携带参数的时候本质上都是将参数以查询字符串的形式追加到url地址的后面发送到服务器。
$.get(url,{name:zs,age:20},function(){})
// 等价于
$.get(url?namezsage20,function(){})7.6.6 URL编码
说明URL地址中值允许出现英文相关的字母、标点符号、数字因此在URL中不允许出现中文字符。如果携带的参数出现了中文或者URL本身有中文则需要对其编码转义。
原则使用安全的字符串去表示那些不安全的字符即用英文字符来表示非英文字符。
范例 注意一个中文会被编码转义为三个百分号加字符且浏览器默认会自动编码和解码。
编码使用浏览器提供的encodeURl() 可以编码
解码使用浏览器提供的decodeURl()可以进行解码
script// 编码let encodestr encodeURI(你我皆是黑马)console.log(encodestr);// 解码let decodestr decodeURI(%E4%BD%A0%E6%88%91)console.log(decodestr);/script7.6.7 xhr的post请求
script// 1.创建xhr对象let xhr new XMLHttpRequest()// 2.调用openxhr.open(POST,http://www.liulongbin.top:3006/api/addbook)// 3.设置Content-Type属性,这是一个固定写法xhr.setRequestHeader(Content-Type,application/x-www-form-urlencoded)// 4.调用send() 将数据以查询字符串的形式发送给服务器xhr.send(bookname水浒传author施耐庵)// 5.监听onreadystatechange事件xhr.onreadystatechange (){if(xhr.readyState 4 xhr.status 200) console.log(xhr.responseText);}/script7.6.8 数据交换格式
说明数据交换格式就是服务器端与客户端之间进行数据传输和交换的格式。前端领域用的数据交换格式为XML和json最常用json。
XML
和HTML一样是一种可扩展标记语言。被设计用于传输和存储数据是数据的载体。XML格式臃肿体积大传输效率低。在JS中解析XML较为麻烦。
Json
json是javaScript Object Notation即js对象表示法。json是js中对象和数组的字符串表示方法json是一种轻量级文本数据交换格式 7.6.10 JSON的两种结构
对象结构如下所示需要注意的是key必须为英文双引号value必须是数字、字符串、布尔值、null、数组、对象六种数据类型之一。
{name:zs,age:20,address:[吃饭,睡觉]
}数组结构如下所示需要注意数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象六种数据类型之一。
[java,python,php]
[100,200,300]Json本质Json是一个字符串 7.6.11 JSON和JS对象
两者的区别
//这是一个对象
var obj {a:hello,b:world}
//这是一个json字符串
var json {a:hello,b:world}两者的互转
script//json转objectvar jsonstr {name:ArimaMisaki,age:12}var obj JSON.parse(jsonstr)console.log(obj);//object转jsonvar jsonstr2 JSON.stringify(obj)console.log(jsonstr2);/script序列化和反序列化对象转字符串为序列化字符串转对象为反序列化。 7.7 XMLHttpRequest Level2
7.7.1 新特性
可以设置HTTP请求的时限可以使用FormData对象管理表单数据可以上传文件可以获得数据传输的进度信息 7.7.2 设置HTTP请求时限
//设置响应时间为3秒
xhr.timeout 3000
//设置超时之后的处理函数
xhr.ontimeout (){console.log(请求超时)
}7.7.3 FormData对象管理表单数据
script// 1.创建FormData实例var fd new FormData()// 2.调用append函数像fd中追加数据fd.append(uname,zs)fd.append(upwd,123456)var xhr new XMLHttpRequest()xhr.open(POST,http://www.liulongbin.top:3306/api/formdata)xhr.send(fd)xhr.onreadystatechange (){if (xhr.readyState 4 xhr.status 200) {console.log(JSON.parse(xhr.responseText));}}/script7.7.4 FormData对象管理表单数据
divform action id form1input typetextinput typetextbutton typesubmit提交/button/form/divscriptvar form document.querySelector(#form1)// 1.创建FormData实例var fd new FormData()// 2.监听表单元素的submit事件form.addEventListener(submit, (e) {e.preventDefault()var fd new FormData(form)var xhr new XMLHttpRequest()xhr.open(POST, http://www.liulongbin.top:3306/api/formdata)xhr.send(fd)xhr.onreadystatechange () {if (xhr.readyState 4 xhr.status 200) {console.log(JSON.parse(xhr.responseText));}}})/script7.7.5 上传文件
新版XMLHTTPRequest对象不仅可以发送文本信息还可以上传文件。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle#box {background-color: pink;width: 60%;height: 300px;margin: 0 auto;}/style
/headbody!-- UI设计阶段 --div idbox!-- 1.文件选择按钮 --input typefile idfile1br!-- 2.上传文件按钮 --button idbtnUpload上传文件/buttonbr!-- 3.用于显示上传成功后的图片 --img src alt idimg width800br/div!-- 验证是否选择了文件 --script// 1.获取文件上传按钮var btnUpload document.getElementById(btnUpload)// 2.为按钮绑定单机事件处理函数btnUpload.addEventListener(click, () {// 3.获取到用户选择的文件列表var files document.querySelector(#file1).filesif (files.length 0) return alert(请选择待上传文件!)console.log(用户选择了待上传的文件);// 向FormData中追加文件// 1.创建FormData对象var fd new FormData()// 2.追加提交的文件fd.append(avatar,files[0])// 使用xhr发起上传文件的请求// 1.创建xhr对象var xhr new XMLHttpRequest()// 监听文件上传进度xhr.upload.onprogress (e){if(e.lengthComputable) {var procentComplete Math.ceil((e.loaded / e.total)*100)console.log(procentComplete);}}// 2.调用open函数指定请求方式和URL地址xhr.open(POST,http://www.liulongbin.top:3306/api/upload/avatar)// 3.发起请求xhr.send(fd)// 监听onreadystatechange事件xhr.onreadystatechange (){if(xhr.readyState 4 xhr.status 200){var data JSON.parse(xhr.responseText)if (data.status 200) {document.querySelector(#img).src http://www.liulongbin.top:3006data.url}else{console.log(data.message);}}}// 显示文件的上传进度})/script
/body/html7.8 axios
7.8.1 Axios概述
Axios是专注于网络数据请求的库。相比于原生的XMLHttpRequest对象axios简单易用。 7.8.2 Axios发起请求
get格式axios.get(‘url’,{params:{/参数/}}.then(callback))
post格式axios.post(‘url’,{params:{/参数/}}.then(callback))
axios格式axios({method:,url:,data:,params:}).then(callback) 7.9 跨域和JSONP
7.9.1 同源策略
同源如果两个页面的协议、域名和端口都相同则两个页面具有相同的源。
同源策略浏览器提供了一个安全功能。其限制了同一个源加载的文档或脚本如何来与另一个源的资源进行交互这是一个用于隔离潜在恶意文件的重要安全机制。
跨域非同源即为跨域
同源策略的拦截原理 跨域请求可以使用JSONP和CORS来解决。但JSONP已经是上古神器了而且不支持POST请求。CORS出现的较晚目前为主流支持GET和POST请求。 7.9.2 JSONP原理
由于浏览器同源策略的限制网页中无法通过Ajax请求非同源的接口数据。但是script标签不受浏览器同源策略影响故我们可以通过src属性请求非同源的js脚本。
主要原理是通过动态构建 script 标签来实现跨域请求因为浏览器对 script 标签的引入没有跨域的访问限制 。通过在请求的 url 后指定一个回调函数然后服务器在返回数据的时候构建一个 json 数据的包装这个包装就是回调函数然后返回给前端前端接收到数据后因为请求的是脚本文件所以会直接执行这样我们先前定义好的回调函数就可以被调用从而实现了跨域请求的处理。这种方式只能用于 get 请求。
scriptvar getdata (data){console.log(拿到了data数据:);console.log(data);}/script!-- 告诉服务器要getdata这个函数 --script src ./7_9.2.js?callbackgetdata/scriptgetdata({ name: ls, age: 30 })7.10 防抖
说明防抖策略是当事件触发后延迟n秒后再执行回调如果在这n秒内事件又被触发则重新计时。
应用用户在输入框中输入一串字符时可以通过防抖策略只有在输入完成后才执行查询的请求这样可以有效减少请求次数节约请求资源。
原理通过延时器来延时发送请求。当事件重新被触发或外界干扰则清空延时器。 7.11 节流
说明节流策略可以减少一段时间内时间的触发频率。可以理解为游戏的后摇。
应用鼠标连续不断地触发某事件只在单位事件内触发一次
节流阀节流阀为空则可以执行下次操作不为空表示不能执行下次操作。
原理通过节流阀判断事件是否可用节流阀为空则执行事件否则不执行。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src./jquery.min.js/scriptstylebody{margin:0;padding:0;}div{background-color: pink;width: 100px;height: 100px;position: absolute;}/style
/head
bodydiv id box/divscript$((){// 获取盒子var movebox $(#box)// 定义节流阀var timer null$(document).on(mousemove,(e){// 如果节流阀为空则可以使用if(timer) return timer setTimeout((){movebox.css(left,e.pageXpx).css(top,e.pageYpx)// 事件执行结束节流阀置空timer null},16)})})/script
/body
/html
