欢迎加入前端技术营!如果你也是前端学习者或者对前端有学习的想法,那就跟着我一起从零开始进击前端。
致力于尽可能详细且简洁的介绍前端知识、自己的捷径,也是学习路上的记录。欢迎探讨
基本概念
客户端与服务器:
URL地址组成:
网页中请求数据:
要在网页中请求服务器上的数据资源,则需要用到XMLHttpRequest对象。
XMLHttpRequest(简称xhr)是浏览器提供的js成员,通过它,可以请求服务器上的数据资源。
最简单的用法varxhrObj=newXMLHttpRequest()
资源的请求方式:
get:get请求通常用于获取服务端资源(向服务器要资源)
post:post请求通常用于向服务器提交数据(往服务器发送资源)
Ajax
Ajax的全称是AsynchronousJavascriptAndXML(异步JavaScript和XML)。
通俗的理解:在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式,就是Ajax。
Ajax能让我们轻松实现网页与服务器之间的数据交互,如检测用户名是否被占用、加载搜索提示列表等
接口
使用Ajax请求数据时,被请求的URL地址,就叫做数据接口(简称接口)。同时,每个接口必须有请求方式。(get和post)
为了验证接口能否被正常被访问,我们常常需要使用接口测试工具。来对数据接口进行检测。
好处:接口测试工具能让我们在不写任何代码的情况下,对接口进行调用和测试。
接口文档:
jQuery中的ajax
浏览器中提供的XMLHttpRequest用法比较复杂,所以jQuery对XMLHttpRequest进行了封装,提供了一系列Ajax相关的函数,极大地降低了Ajax的使用难度。
$.get()函数
$.get(url,[data],[callback])
$.get()发起带参数的请求
$(function(){$('#btnGETINFO').on('click',function(){$.get('URL',{id:1},function(res){console.log(res)})})})
$.post()函数
$.post(url,[data],[callback])
使用$post()向服务器提交数据
$(function(){$('#btnPOST').on('click',function(){$.post('URL',{bookname:'水浒传',author:'施耐庵',publisher:'出版社'},function(res){console.log(res)})})})
jQuery中$.get()和$.post()函数的功能单一,专门用来发起get或post请求,从而向服务器请求或提交数据。
$.ajax()函数的语法
相比于$.get()和.post()函数,jQuery中提供的.post()函数,jQuery中提供的.post()函数,jQuery中提供的.ajax()函数,是一个功能比较综合的函数,它允许我们对Ajax请求进行更详细的配置。
基本语法:
XHR
XMLHttpRequest(简称xhr)是浏览器提供的Javascript对象,通过它,可以请求服务器上的数据资源。之前的jQuery中的Ajax函数,就是基于xhr对象封装出来的。
缺点:只支持文本数据的传输,无法用来读取和上传文件
传送和接收数据时,没有进度信息,只能提示有没有完成
get请求
//1.创建XHR对象varxhr=newXMLHttpRequest()//2.调用open函数xhr.open('GET','URL?id=1')//3.调用send函数xhr.send()//4.监听onreadystatechange事件xhr.onreadystatechange=function(){if(xhr.readyState===4&&xhr.status===200){//获取服务器响应的数据console.log(xhr.responseText)}}
post请求
//1.创建xhr对象varxhr=newXMLHttpRequest()//2.调用open函数xhr.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=施耐庵&publisher=上海图书出版社')//5.监听事件xhr.onreadystatechange=function(){if(xhr.readyState===4&&xhr.status===200){console.log(xhr.responseText)}}
readyState属性
当前Ajax请求所处的状态。
URL编码与解码
URL地址中只允许出现英文相关的字母、标点符号、数字,因此,在URL地址中不允许出现中文字符。
如果URL中需要包含中文这样的字符,则必须对中文字符进行编码(转义)。
URL编码的原则:使用安全的字符(没有特殊用途或者特殊意义的可打印字符)去表示那些不安全的}符。
就是用英文符表示非英文符
//encodeURI(编码)//decodeURI(解码)varen='奈斯先生'varen1=encodeURI(en)console.log(en1);varen2=decodeURI('奈斯')console.log(en2);
form表单
表单在网页中主要负责数据采集功能。HTML中的标签,就是用于采集用户输入的信息,并通过标签的提交操作,把采集到的信息提交到服务器端进行处理。
组成:表单标签、表单域、表单按钮
属性
action:向何处发送数据
action属性用来规定当提交表单时,向何处发送表单数据。
action属性的值应该是后端提供的一个URL地址,这个URL地址专门负责接收表单提交过来的数据。当表单在未指定action属性值的情况下,action的默认值为当前页面的URL地址。
target:规定在何处打开actionURL地址
method:规定以何种方式把表单数据提交到actionURL
<formaction="/login"target="_blank"method="post/get">//get:适合提交少量、简单的数据//post:不体现数据,安全;适合复杂、大量、文件上传的数据
enctype:发送表单数据之前如何对数据进行编码
涉及到文件上传操作时,必须将enctype的值设置为第二种
否则设置为第一种即可
通过ajax提交表单数据
同步提交:
通过点击submit按钮,触发表单提交的操作,从而使页面跳转到actionURL的行为,叫做表单的同步提交。
缺点:整个页面发生跳转,用户体验差
提交后,页面之前的额状态和数据会丢失
解决方案:表单只负责采集数据,ajax负责将数据提交到服务器
阻止表单默认提交行为
当监听到表单的提交事件以后,可以调用事件对象的event.preventDefault()函数,来阻止表单的提交和页面的跳转
快速获取表单中的数据
serialize()函数//一次性获取所有数据//注意:在使用serialize()函数快速获取表单数据时,必须为每个表单元素添加name属性!
$(function(){//第一种方式//$('#f1').submit(function(e){//e.preventDefault();//vardata=$(this).serialize();//console.log(data);//})//第二种方式//监听表单提交事件$('#f1').on('submit',function(e){alert('监听到了表单的提交事件2')//阻止表单默认提交行为e.preventDefault()vardata=$('#f1').serialize()console.log(data);})})
jquery实现文件上传
//jQuery实现loading效果$(document).ajaxStart(function(){$('#loading').show()})$(document).ajaxStop(function(){$('#loading').hide()})$.ajax({method:'POST',url:'url',data:fd,//不修改content-Type属性,使用FormData默认的content-Type值processData:false,//不对FormData中的数据进行url编码,而是将FormData数据原样发送到服务器contentType:false,success:function(res){console.log(res)}})
XHR2新特性
可以设置HTTP请求的时限
//设置超时时间xhr.timeout=30//设置超时以后的处理函数xhr.ontimeout=function(){console.log('请求超时了!')}
可以使用formData对象管理表单数据
//1.创建FormData实例varfd=newFormData()//2.调用append函数,向fd中追加数据fd.append('uname','zs')fd.append('upwd','123456')//3.创建XHR对象varxhr=newXMLHttpRequest()//4.指定请求类型与URL地址xhr.open('POST','URL')//直接提交FormData对象,这与提交网页表单的效果,完全一样xhr.send(fd)xhr.onreadystatechange=function(){if(xhr.readyState===4&&xhr.status===200){console.log(JSON.parse(xhr.responseText))}}
快速获取网页表单值
//1.通过DOM操作,获取到form表单元素varform=document.querySelector('#form1')form.addEventListener('submit',function(e){//阻止表单的默认提交行为e.preventDefault()//创建FormData,快速获取到form表单中的数据,会自动将表单数据填充到FormData对象中varfd=newFormData(form)varxhr=newXMLHttpRequest()xhr.open('POST','URL')xhr.send(fd)xhr.onreadystatechange=function(){}})
可以上传文件
<!--1.文件选择框--><inputtype="file"id="file1"/><!--2.上传文件的按钮--><buttonid="btnUpload">上传文件</button><br/><!--3.img标签,来显示上传成功以后的图片--><imgsrc=""alt=""id="img"width="800"/>
//1.获取到文件上传按钮varbtnUpload=document.querySelector('#btnUpload')//2.为按钮绑定单击事件处理函数btnUpload.addEventListener('click',function(){//3.获取到用户选择的文件列表varfiles=document.querySelector('#file1').filesif(files.length<=0){returnalert('请选择要上传的文件!')}varfd=newFormData()//将用户选择的文件,添加到FormData中fd.append('avatar',files[0])//使用xhr发起上传文件的请求varxhr=newXMLHttpRequest()xhr.open('POST','url')xhr.send(fd)xhr.onreadystatechange=function(){if(xhr.readyState===4&&xhr.status===200){vardata=JSON.parse(xhr.responseText)if(data.status===200){//上传成功document.querySelector('#img').src='url'data.url}else{//上传失败console.log('图片上传失败!'data.m![请添加图片描述](https://img-blog.csdnimg.cn/020da708f797442fae19b3115751df23.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATuWliOaWr-WFiOeUnw==,size_13,color_FFFFFF,t_70,g_se,x_16)essage)}}}})
可获得数据传输的进度信息
xhr.upload.onprogress
数据交换格式
就是服务器端与客户端之间进行数据传输与交换的格式。
前端领域,经常提及的两种数据交换格式分别是XML和JSON。其中XML用的非常少,所以,重点了解的数据衣换格式就是JSON
JSON就是Javascript对象和数组的字符串表示法,它使用文本表示一个JS对象或数组的信息,因此,JSON的本质是字符串。
作用:JSON是一种轻量级的文本数据交换格式,在作用上类似于XML,专门用于存储和传输数据,但是JSON比XML更小、更快、更易解析。
对象结构:
对象结构:对象结构在JSON中表示为{}括起来的内容。数据结构为{key:value,key:value…}的键值对结构。
其中,key必须是使用英文的双引号包裹的字符串,value的数据类型可以是:数字、字符串、布尔值、null、数组、对象6种类型。
数组结构:
数组结构:数组结构在JSON中表示为[]括起来的内容。
数据结构为[“java”,"javascript,30,true…].数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6种类型。
属性名必须使用双引号包裹
字符串类型的值必须使用双引号包裹
JSON中不允许使用单引号表示字符串
JSON中不能写注释
JSON的最外层必须是对象或数组格式
不能使用undefined或函数作为JSON的值
JSON的作用:在计算机与网络之间存储和传输数据。
JSON的本质:用字符串来表示Javascript对象数据或数组数据
JSON和JS互转
从JSON字符串转换为JS对象。使用JSON.parse()------反序列化
从JS对象转换为JSON字符串,使用JSON.stringify()------序列化
varjsonStr='{"a":"Hello","b":"world"}'varobj=JSON.parse(jsonStr)console.log(obj)varobj2={a:'hello',b:'world',c:false}varstr=JSON.stringify(obj2)console.log(str)
面试题
一、什么是ajax?ajax作用是什么?
AJAX=异步JavaScript和XML。AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。
二、为什么要用ajax:
Ajax应用程序的优势在于:
- 通过异步模式,提升了用户体验
- 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用
- Ajax引擎在客户端运行,承担了一部分本来由服务器承担的工作,从而减少了大用户量下的服务器负载。
本期到这里就结束了,感谢阅读!有问题留言,及时回复
- 点赞加关注,持续更新实用技巧、热门资源、软件教程等
- 有任何软件影视教程资源考证资料等需求留言即可