设置请求头
我们写一个请求头的配置:
现在我们学习ajax提交表单
什么是表单
表单在网页中主要负责数据采集功能,HTML中的<form>标签,就是用来采集用户输入的信息,并通过<form>标签的提交操作,把采集到的信息提交到服务器端进行处理
比如这个界面中红色方框中的部分,都是在form标签中的↓
表单的组成部分
form标签的属性
<form>标签用来采集数据,<form>标签的属性则是用来规定如何把采集到的数据发送到服务器
action
action属性的值应是后端提供的一个URL地址,这个URL地址专门负责接收表单提交过来的数据,当form表单在未指定action属性值的情况下,action的默认值是当前页面的URL地址.
注意:当提交表单后,页面会立即跳转到action属性指定的URL地址
target
target属性用来规定在何处打开action URL
它的可选值有5个,默认情况下,target的值是_self,表示在相同的框架中打开action URL.
method
method属性用来规定以何种方式把表单数据提交到actionURL
它的可选值有两个,分别是get和post
默认情况下,method的值是get,表示以URL地址的形式,把表单数据交到actionURL
enctype
但是表单提交的方式有很多缺点,①页面会发生跳转②页面之前的状态和数据会丢失
解决方案: 表单值负责采集数据,ajax负责将数据提交到数据
URL编码与解码
URL地址中,只允许出现英文相关的字母,标点符号,数字,因此,在URL地址中不允许出现中文字符.如果URL中需要包含中文这样的字符,则必须对中文字符进行编码(转义)
URL编码的原则:使用安全的字符(没有特殊用途或者特殊意义的可打印字符,去表示那些不安全的字符),通俗理解就是用英文字符去表示非英文字符
(天哪我之前一直看成encodeURL)
数据交换格式
JSON的两种结构:对象/数组
JSON就是用字符来表示JavaScript的对象和数组.所以,JSON中包含对象和数组两种结构,通过这两种结构的相互嵌套,可以表示各种复杂的数据结构
JSON和JS对象的转换
跨域和JSONP
同源策略
什么是同源:
如果两个页面的协议,域名,端口都相同,则两个页面具有相同的源
什么是同源策略
同源策略,是浏览器提供的一个安全功能
MDN给出的概念: 同源策略限制了从同一个源加载的文档或者脚本如何与来自另一个源的资源进行交互.这是一个用于隔离潜在恶意文件的重要安全机制
通俗的理解: 浏览器规定, A网站的JS,不允许和非同源网站C之间,进行资源的交互,例如:
- 无法读取非同源网页的cookie,localStorage和indexedDB
- 无法解除非同源网页的DOM
- 无法向非同源地址发送ajax请求
跨域
什么是跨域
两个URL的协议,域名,或端口只要有一个不一致,就是跨域
出现跨域的根本原因: 浏览器的同源策略不允许非同源的URL之间进行资源的交互
如何实现跨域数据请求
现如今,实现跨域数据请求,最好的两种解决方案,分别是JSONP和CORS
JSONP: 出现的早,可以兼容低版本浏览器,缺点是只支持GET请求,不支持POST请求
CORS: 出现的晚,支持GET和POST请求,缺点是不兼容低版本浏览器(后面学习)
JSONP的实现原理
由于浏览器同源策略的限制,网页中无法通过ajax请求非同源的接口数据,但是<script>标签不受同源策略的影响,可以通过src属性,请求非同源的JS脚本
因此JSONP的实现原理,就是通过<script>标签的src属性,请求跨域的数据接口,并通过函数调用的形式接收跨域接口响应回来的数据
