【不想标注哪个是重点,真心感觉都是重点的一片博文!】
一、前言
有关于前后台交互的问题,近来粗略的研究了一下,得到了一些自我感觉还挺有用的知识点,今天把它写下来跟大家分享,哈哈,欢迎互相交流,共同学习共同进步。好了,闲话就不多说了,现在开始上干货~
二、服务端主要完成的功能
1.接收前台提交的数据
2.对前台提交的数据进行处理
3.将处理过得信息返回给前端
4.存储信息(存储信息的方法)
三、数据传送的主要方式
1.GET方式
① get传输的数据用?拼接在链接后面
② 大小受限制,约4k左右
③ 且安全性极差
2.POST方式
① post方法在传送数据上理论上没有限制
② 传输的数据存储在http请求头的主体部分
③ 存储空间比get方法大,且安全性相对来讲也比get方法高
④ 要保证安全的话,可以选择HTTPS协议
四、数据提交方式
1.在url链接地址上使用问号传达
这种方式只有一种传送方式---GET
2.Form表单提交
① 可以实现GET和POST两种传送方式
② 表单可以实现跨域提交数据
③ 需要注意的是:可以使用iframe的方式可以实现局部刷新,但是iframe不支持跨域
3.通过Script标签的src属性
① 只能实现get方式,因为是通过src传递数据
② 可以独立完成局部刷新,并且支持跨域
4.JSON和JSONP的区别
① JSON:是一种字符串,并且可以通过JSON.parse()的方式,把json格式的字符转换成json对象
② JSONP:是一种跨域请求方式,只支持get方式提交
向服务器请求的时候,同时提供给后台一个回调函数名,服务器返回数据的时候,将数据包裹在回调函数名内返回给前端,由于我们使用的是script标签,浏览器一旦接收到返回数据,立即执行该函数。
五、Ajax的使用
1.XHR对象,原生版的Ajax
xhr(俗称小黄人,O(∩_∩)O~),全名XMLHttpRequest
ajax的onload方法是数据接收完毕后执行的函数。
2.FormData,模拟表单对象,通常与原生版Ajax搭配使用,网后台传数据
formData的append()方法,有两个参数,第一个是传给后台的参数名;第二个是对应的值。
XHR和FormData两者的结合使用,请看下图详解:
看过上图应该就已经很清晰了吧,ok,下面我们来说说jq版的Ajax
3.jQuery版的Ajax:是对XMLHttpRequest对象的封装,同时也省去了很多麻烦
当然前提是,你需要有一份JQ文件,可以自己去官网上去下载一份。
点击这个网址:JQ文件下载
其基本方法就是$.ajax(),参数是一组对象
基本上它有七种方法:
① url:请求的链接地址
② data:发送的数据,一般以对象的方式
③ dataType:返回的数据类型,默认text文本类型,一般可设置为json,jsonp,html,xml等
④ type:请求方式,get和post
⑤ async:同步还是异步,默认异步true,同步false,同步会造成页面卡顿
⑥ success:function(){},请求成功的回调函数
⑦ error:function(){},请求失败的回调函数
ok,我们来分别看看以下三种类型:
返回数据类型为JSON:不可跨域,支持get和post两种方式。
GET方式:这种方式,data的值一般可以直接拼接在url之后
POST方式:
返回数据类型为JSONP:可跨域,但是只支持get一种传达方式
六、跨域以及浏览器页面局部刷新整理
浏览器局部刷新:
① iframe方式
② AJax方式
③ Script方式
跨域:
① from表单
② Script标签
③ JSONP,与script和回调函数配合