URL地址:
URL地址一般由三部组成：
① 客户端与服务器之间的通信协议
② 存有该资源的服务器名称
③ 资源在服务器上具体的存放位置
--------------------------------------------------------------------------------------------------------------------------------
客户端与服务器的通信过程
客户端与服务器之间的通信过程，分为 请求 – 处理 – 响应 三个步骤。网页中的每一个资源，都是通过 请求 – 处理 – 响应 的方式从服务器获取回来的。
如果要在网页中请求服务器上的数据资源，则需要用到 XMLHttpRequest 对象。
XMLHttpRequest（简称 xhr）是浏览器提供的 js 成员，通过它，可以请求服务器上的数据资源。
最简单的用法 var xhrObj = new XMLHttpRequest()
客户端请求服务器时，请求的方式有很多种，最常见的两种请求方式分别为 get 和 post 请求。
get 请求通常用于获取服务端资源（向服务器要资源）
post 请求通常用于向服务器提交数据（往服务器发送资源）
--------------------------------------------------------------------------------------------------------------------------------
浏览器中提供的 XMLHttpRequest 用法比较复杂，所以 jQuery 对 XMLHttpRequest 进行了封装，提供了一系列 Ajax 相关的函数，极大地降低了 Ajax 的使用难度。
jQuery 中发起 Ajax 请求最常用的三个方法如下：
$get语法： $.get(资源地址, [请求资源期间要携带的参数], [请求成功时的回调函数])
$.post语法： $.post(资源地址, [请求资源期间要携带的参数], [请求成功时的回调函数])
$.ajax语法：
$.ajax({
type: '', // 请求的方式，例如 GET 或 POST
url: '', // 请求的 URL 地址
data: { },// 这次请求要携带的数据
success: function(res) { } // 请求成功之后的回调函数
error:function()｛｝//失败的回调（可选）
timeout：1000 //超时时间（可选）
dataType:"json" //响应体结果（可选）
header：｛｝//头信息（可选）
})
例如：
$.get("http://www.liulongbin.top:3006/api/getbooks",{id:1},function(res){
console.log(res.data)
// 这里的 res.data 是服务器返回的数据，会自动把json转为js对象格式
},"json[响应体类型(可选)]")--------------------------------------------------------------------------------------------------------------------------------
接口的概念 :
使用 Ajax 请求数据时，被请求的 URL 地址，就叫做数据接口（简称接口）。同时，每个接口必须有请求方式。
接口文档：
接口文档，顾名思义就是接口的说明文档，它是我们调用接口的依据。好的接口文档包含了对接口URL，参数以及输出内容的说明，我们参照接口文档就能方便的知道接口的作用，以及接口如何进行调用。
接口文档的组成部分：
接口文档可以包含很多信息，也可以按需进行精简，不过，一个合格的接口文档，应该包含以下6项内容，从而为接口的调用提供依据：
1. 接口名称：用来标识各个接口的简单说明，如登录接口，获取图书列表接口等。
2. 接口URL：接口的调用地址。
3. 调用方式：接口的调用方式，如 GET 或 POST。
4. 参数格式：接口需要传递的参数，每个参数必须包含参数名称、参数类型、是否必选、参数说明这4项内容。
5. 响应格式：接口的返回值的详细描述，一般包含数据名称、数据类型、说明3项内容。
6. 返回示例（可选）：通过对象的形式，例举服务器返回数据的结构。
---------------------------------------------------------------------------------------------------------------------------------
form表单:
表单在网页中主要负责数据采集功能。HTML中的<form>标签，就是用于采集用户输入的信息，并通过<form>标签的提交操作，把采集到的信息提交到服务器端进行处理。
<form>标签的属性:
<form>标签用来采集数据，<form>标签的属性则是用来规定如何把采集到的数据发送到服务器。
属性 |
值 |
描述 |
action |
URL地址 |
规定当提交表单时，向何处发送表单数据 |
method |
get或post |
规定以何种方式把表单数据提交到 action URL |
enctype |
application/x-www-form-urlencoded multipart/form-data text/plain |
规定在发送表单数据之前如何对其进行编码 |
target |
_blank _self _parent _top framename |
规定在何处打开 action URL |
action:
action 属性用来规定当提交表单时，向何处发送表单数据。
action 属性的值应该是后端提供的一个 URL 地址，这个 URL 地址专门负责接收表单提交过来的数据。
当 <form> 表单在未指定 action 属性值的情况下，action 的默认值为当前页面的 URL 地址。
注意：当提交表单后，页面会立即跳转到 action 属性指定的 URL 地址
target:
target 属性用来规定在何处打开 action URL。
它的可选值有5个，默认情况下，target 的值是 _self，表示在相同的框架中打开 action URL。
值 |
描述 |
_blank |
在新窗口中打开。 |
_self |
默认。在相同的框架中打开。 |
_parent |
在父框架集中打开。（很少用） |
_top |
在整个窗口中打开。（很少用） |
framename |
在指定的框架中打开。（很少用） |
method:
method 属性用来规定以何种方式把表单数据提交到 action URL。
它的可选值有两个，分别是 get 和 post。
默认情况下，method 的值为 get，表示通过URL地址的形式，把表单数据提交到 action URL。
注意：
get 方式适合用来提交少量的、简单的数据。
post 方式适合用来提交大量的、复杂的、或包含文件上传的数据。
在实际开发中，<form> 表单的 post 提交方式用的最多，很少用 get。例如登录、注册、添加数据等表单操作，都需要使用 post 方式来提交表单。
enctype:
enctype 属性用来规定在发送表单数据之前如何对数据进行编码。
它的可选值有三个，默认情况下，enctype 的值为 application/x-www-form-urlencoded，表示在发送前编码所有的字符
注意：
在涉及到文件上传的操作时，必须将 enctype 的值设置为 multipart/form-data
如果表单的提交不涉及到文件上传操作，则直接将 enctype 的值设置为 application/x-www-form-urlencoded 即可
值 |
描述 |
application/x-www-form-urlencoded |
在发送前编码所有字符（默认） |
multipart/form-data |
不对字符编码。 在使用包含文件上传控件的表单时，必须使用该值。 |
text/plain |
空格转换为 “+” 加号，但不对特殊字符编码。（很少用） |
表单的同步提交及缺点:
什么是表单的同步提交:
通过点击 submit 按钮，触发表单提交的操作，从而使页面跳转到 action URL 的行为，叫做表单的同步提交。
表单同步提交的缺点:
<form>表单同步提交后，整个页面会发生跳转，跳转到 action URL 所指向的地址，用户体验很差。
<form>表单同步提交后，页面之前的状态和数据会丢失。
解决：
解决方案：表单只负责采集数据，Ajax 负责将数据提交到服务器。
$('form').submit(function(e) { 监听表单的提交事件方式1
// 阻止表单的提交和页面的跳转
e.preventDefault()
})
$('form').on('submit', function(e) { 监听表单的提交事件方式2
// 阻止表单的提交和页面的跳转
e.preventDefault()
})
快速获取表单中的数据 ：
为了简化表单中数据的获取操作，jQuery 提供了 serialize() 函数，其语法格式如下：
$('form').serialize()
serialize() 函数的好处：可以一次性获取到表单中的所有的数据。
<form id="form1">
<input type="text" name="username" />
<input type="password" name="password" />
<button type="submit">提交</button>
</form>
$('#form1').serialize()
console.log($('#form1').serialize())
调用的结果： username=用户名的值&password=密码的值
注意：在使用 serialize() 函数快速获取表单数据时，必须为每个表单元素添加name属性---------------------------------------------------------------------------------------------------------------------------------
XMLHttpRequest的基本使用：
XMLHttpRequest（简称 xhr）是浏览器提供的 Javascript 对象，通过它，可以请求服务器上的数据资源。之前所学的 jQuery 中的 Ajax 函数，就是基于 xhr 对象封装出来的。
使用xhr发起GET请求：
//创建xhr对象
var xhr=new XMLHttpRequest()
xhr.timeout = 3000; //设置超时时间(可选)
xhr.ontimeout = function () { //设置超时时间后的处理函数(可选)
console.log("超时了");
};
//调用open函数 指定 请求方式 与 URL地址
xhr.open("get","http://www.liulongbin.top:3006/api/getbooks")
//调用send函数 发起Ajax请求
xhr.send()
//监听onreadystatechange事件
xhr.onreadystatechange=function(){
//监听xhr对象的请求状态readyState,与服务器响应的状态 status
if(xhr.readyState===4&&xhr.status===200){
console.log(JSON.parse(xhr.response))//获取服务器响应数据,是json格式需要转换
console.log(xhr.status)//状态码
console.log(xhr.statusText)//状态字符串
console.log(xhr.getAllResponseHeaders())//所有响应头
}
}使用xhr发起带参数的GET请求
将英文的 ? 放在URL 的末尾，然后再加上 参数＝值 ，想加上多个参数的话，使用 & 符号进行分隔
xhr.open('get', 'http://www.liulongbin.top:3006/api/getbooks?id=1')
xhr.open('get', 'http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记')
这种在URL地址后拼接的参数，叫做查询字符串
GET请求携带参数的本质 :
无论使用 $.ajax()，还是使用 $.get()，又或者直接使用 xhr 对象发起 GET 请求，当需要携带参数的时候，本质上，都是直接将参数以查询字符串的形式，追加到 URL 地址的后面，发送到服务器的。
XMLHttpRequest 对象的 readyState 属性，用来表示当前 Ajax 请求所处的状态。每个 Ajax 请求必然处于以下状态中的一个：
值 |
状态 |
描述 |
0 |
UNSENT |
XMLHttpRequest 对象已被创建，但尚未调用 open方法。 |
1 |
OPENED |
open() 方法已经被调用。 |
2 |
HEADERS_RECEIVED |
send() 方法已经被调用，响应头也已经被接收。 |
3 |
LOADING |
数据接收中，此时 response 属性中已经包含部分数据。 |
4 |
DONE |
Ajax 请求完成，这意味着数据传输已经彻底完成或失败。 |
使用xhr发起带参数的post请求
//创建xhr对象
var xhr=new XMLHttpRequest()
xhr.timeout = 3000; //设置超时时间(可选)
xhr.ontimeout = function () { //设置超时时间后的处理函数(可选)
console.log("超时了");
};
//调用open函数 指定 请求方式 与 URL地址
xhr.open("post","http://www.liulongbin.top:3006/api/addbook")
//设置请求头（固定写法）
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
//调用send函数 同时将数据以查询字符串的形式，提交给服务器
xhr.send('bookname=水浒传&author=施耐庵&publisher=天津图书出版社')
//监听onreadystatechange事件
xhr.onreadystatechange=function(){
//监听xhr对象的请求状态readyState,与服务器响应的状态 status
if(xhr.readyState===4&&xhr.status===200){
//获取服务器响应数据,是json格式需要转换
console.log(JSON.parse(xhr.responseText))
}
}设置HTTP请求时限:
xhr.timeout = 3000
//将最长等待时间设为 3000 毫秒。过了这个时限，就自动停止HTTP请求。
xhr.ontimeout = function(event){
alert('请求超时！') //timeout事件用来指定超时的回调函数
}
xhr.onerror=function(){
alert("网络异常") //网络异常的回调
}ajax取消请求：
xhr.abort() //此方法可以将正在发送的请求取消-------------------------------------------------------------------------------------------------------------------------------
fetch发送ajax请求：
fetch()方法与XMLHttpRequest类似，fetch也可以发起ajax请求，但是与XMLHttpRequest不同的是，fetch方式使用Promise，相比较XMLHttpRequest更加的简洁。
fetch可以直接使用
发送get请求
fetch("http://www.liulongbin.top:3006/api/getbooks")
.then(function (res) {
return res.json(); //或return res.text()
//res.json()是一个promise对象
//也可以返回return res.text()，那最后返回的参数就是json格式的
}).then(function (res) {
console.log(res); //成功后返回的参数，是一个js对象
});
//带参数的get请求就在url地址后面加?xxx=xxx
-----------------------------------------------------------------------------------------
发送post请求：
fetch("http://www.liulongbin.top:3006/api/addbook", {
method: "post", //请求方式
headers: {}, //请求头
body: {}, //请求体
}).then(function (res) {
return res.json();
//res.json()是一个promise对象
//也可以返回return res.text()，那最后返回的参数格式就是json格式的
}).then(function (res) {
console.log(res); //成功后返回的参数，是一个js对象
});-------------------------------------------------------------------------------------------------------------------------------
URL编码与解码：
URL 地址中，只允许出现英文相关的字母、标点符号、数字，因此，在 URL 地址中不允许出现中文字符。
如果 URL 中需要包含中文这样的字符，则必须对中文字符进行编码（转义）。
URL编码的原则：使用安全的字符（没有特殊用途或者特殊意义的可打印字符）去表示那些不安全的字符。
URL编码原则的通俗理解：使用英文字符去表示非英文字符。
http://wwliulongbin.top:3006/api/getbooks?id=1&bookname=西游记
// 经过 URL 编码之后，URL地址变成了如下格式：
http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=%E8%A5%BF%E6%B8%B8%E8%AE%w. B0
如何对URL进行编码与解码：
浏览器提供了 URL 编码与解码的 API，分别是：
lencodeURI() 编码的函数
ldecodeURI() 解码的函数
console.log(encodeURI("黑马程序员"))
// 输出字符串 %E9%BB%91%E9%A9%AC%E7%A8%8B%E5%BA%8F%E5%91%98
console.log(decodeURI('%E9%BB%91%E9%A9%AC'))
// 输出字符串 黑马
URL编码的注意事项：
由于浏览器会自动对 URL 地址进行编码操作，因此，大多数情况下，程序员不需要关心 URL 地址的编码与解码操作。
--------------------------------------------------------------------------------------------------------------------------------
什么是XML：
XML 的英文全称是 EXtensible Markup Language，即可扩展标记语言。因此，XML 和 HTML 类似，也是一种标记语言。
XML和HTML的区别：
XML 和 HTML 虽然都是标记语言，但是，它们两者之间没有任何的关系。
HTML 被设计用来描述网页上的内容，是网页内容的载体
XML 被设计用来传输和存储数据，是数据的载体
XML的缺点:
①XML 格式臃肿，和数据无关的代码多，体积大，传输效率低
②在 Javascript 中解析 XML 比较麻烦
--------------------------------------------------------------------------------------------------------------------------------
JSON:
JSON 是一种轻量级的文本数据交换格式，在作用上类似于 XML，专门用于存储和传输数据，但是 JSON 比 XML 更小、更快、更易解析。
JSON 是在 2001 年开始被推广和使用的数据格式，到现今为止，JSON 已经成为了主流的数据交换格式。
JSON 就是用字符串来表示 Javascript 的对象和数组。所以，JSON 中包含对象和数组两种结构，通过这两种结构的相互嵌套，可以表示各种复杂的数据结构。
对象结构：对象结构在 JSON 中表示为 { } 括起来的内容。数据结构为 { key: value, key: value, … } 的键值对结构。其中，key 必须是使用英文的双引号包裹的字符串，value 的数据类型可以是数字、字符串、布尔值、null、数组、对象6种类型。
例如：
{
"name": "zs",
"age": 20,
"gender": "男",
"address": null,
"hobby": ["吃饭", "睡觉", "打豆豆"]
}数组结构：数组结构在 JSON 中表示为 [ ] 括起来的内容。数据结构为 [ "java", "javascript", 30, true … ] 。数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6种类型。
例如：
[ "java", "python", "php" ]
[ 100, 200, 300.5 ]
[ true, false, null ]
[ { "name": "zs", "age": 20}, { "name": "ls", "age": 30} ]
[ [ "苹果", "榴莲", "椰子" ], [ 4, 50, 5 ] ]
JSON语法注意事项
①属性名必须使用双引号包裹
②字符串类型的值必须使用双引号包裹
③JSON 中不允许使用单引号表示字符串
④JSON 中不能写注释
⑤JSON 的最外层必须是对象或数组格式
⑥不能使用 undefined 或函数作为 JSON 的值
JSON 的作用：在计算机与网络之间存储和传输数据。
JSON 的本质：用字符串来表示 Javascript 对象数据或数组数据
JSON和JS对象的关系 ：
JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串
例如：
//这是一个对象
var obj = {a: 'Hello', b: 'World'}
//这是一个 JSON 字符串，本质是一个字符串
var json = '{"a": "Hello", "b": "World"}'
JSON和JS对象的互转：
//要实现从 JSON 字符串转换为 JS 对象，使用 JSON.parse() 方法：
var a='{"a": "Hello", "b": "World"}'
var b=JSON.parse(a)
console.log(b) 结果是 {a: 'Hello', b: 'World'}
-----------------------------------------------------------------------------
//要实现从JS对象转换为JSON字符串使用JSON.stringify()方法
var a={a: 'Hello', b: 'World'}
var b=JSON.stringify(a)
console.log(b) //结果是 '{"a": "Hello", "b": "World"}'
序列化和反序列化：
把数据对象转换为字符串的过程，叫做序列化，例如：调用 JSON.stringify() 函数的操作，叫做 JSON 序列化。
把字符串转换为数据对象的过程，叫做反序列化，例如：调用 JSON.parse() 函数的操作，叫做 JSON 反序列化。
--------------------------------------------------------------------------------------------------------------------------------
FormData对象管理表单数据 ：
Ajax 操作往往用来提交表单数据。为了方便表单处理，HTML5 新增了一个 FormData 对象，可以模拟表单操作，FormData对象也可以用来获取网页表单的值，示例代码如下：
// 获取表单元素
var form = document.querySelector("form");
// 监听表单元素的submit事件(也就是form提交按钮的点击事件)
form.onsubmit = function (e) {
e.preventDefault();
// 根据form表单创建FormData对象，会自动将表单数据填充到FormData对象中
var fd = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://www.liulongbin.top:3006/api/formdata");
xhr.send(fd);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
//获取服务器响应数据
console.log(JSON.parse(xhr.responseText));
}
};
};
注意：表单一定要写name属性XMLHttpRequest 对象，不仅可以发送文本信息，还可以上传文件：
<body>
<input type="file" id="file" /> <!-- 1. 文件选择框 -->
<button id="button">上传文件</button><br /> <!-- 2. 上传按钮 -->
<img src="" alt="" id="img" width="200" /> <!-- 3. 显示上传到服务器上的图片 -->
<script>
var button = document.querySelector("#button"); // 1. 获取上传文件的按钮
button.onclick = function () { // 2. 为按钮添加 click 事件监听
var files = document.querySelector("#file").files; // 3. 获取到选择的文件列表
if (files.length <= 0) {
alert("请选择要上传的文件！");
}
var fd = new FormData();
fd.append("avatar", files[0]); //将用户选择的文件，添加到FormData中
var xhr = new XMLHttpRequest(); // 1. 创建 xhr 对象
// 2. 调用 open 函数，指定请求类型与URL地址。其中，请求类型必须为 POST
xhr.open("POST", "http://www.liulongbin.top:3006/api/upload/avatar");
xhr.send(fd); // 3. 发起请求
xhr.onreadystatechange = function () { //.监听onreadystatechange事件
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
if (data.status === 200) {
// 上传文件成功
// 将服务器返回的图片地址，设置为 <img> 标签的 src 属性
document.querySelector("#img").src =
"http://www.liulongbin.top:3006" + data.url;
} else {
// 上传文件失败
console.log(data.message);
}
}
};
};
</script>
</body>效果：
还可以通过监听xhr.upload.onprogress 事件，来获取到文件的上传进度：
// 创建 XHR 对象
var xhr = new XMLHttpRequest()
// 监听 xhr.upload 的 onprogress 事件
xhr.upload.onprogress = function(e) {
// e.lengthComputable 是一个布尔值，表示当前上传的资源是否具有可计算的长度
if (e.lengthComputable) {
// e.loaded 已传输的字节
// e.total 需传输的总字节
var percentComplete = Math.ceil((e.loaded / e.total) * 100)
console.log(percentComplete) //percentComplete就是上传的进度
}
}
注意：upload.onprogress事件必须要放在发送请求之前，创建XHR对象后就监听
--------------------------------------------------------------------------------------
xhr.upload.onload = function() {
//监听上传完成的事件
}
使用jQuery发起上传文件的请求（只能用$.ajax,不能用$.get和$.post）：
$.ajax({
method: 'POST',
url: 'http://www.liulongbin.top:3006/api/upload/avatar',
data: fd,
// 不修改 Content-Type 属性，使用 FormData 默认的 Content-Type 值
contentType: false,
// 不对 FormData 中的数据进行 url 编码，而是将 FormData 数据原样发送到服务器
processData: false,
success: function(res) {
console.log(res)
}
})
jQuery中ajax 请求开始和结束时执行的函数：
$(document).ajaxStart(function() {
//$(document).ajaxStart() 函数会监听当前文档内所有的Ajax发起请求。
})
$(document).ajaxStop(function() {
//Ajax请求结束时，执行ajaxStop 函数
})
注意：自jQuery1.8起，该方法只能被附加到文档document身上，不能附加到html或其他身上---------------------------------------------------------------------------------------------------------------------------------
什么是同源 ：
如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源。
同源策略：
通俗的理解：浏览器规定，A 网站的 JavaScript，不允许和非同源的网站 C 之间，进行资源的交互，例如：
①无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
②无法接触非同源网页的 DOM
③无法向非同源地址发送 Ajax 请求
什么是跨域：
同源指的是两个 URL 的协议、域名、端口一致，反之，则是跨域。
出现跨域的根本原因：浏览器的同源策略不允许非同源的 URL 之间进行资源的交互。
如何实现跨域数据请求：
JSONP：出现的早，兼容性好（兼容低版本IE）。是前端程序员为了解决跨域问题，被迫想出来的一种临时解决方案。缺点是只支持 GET 请求，不支持 POST 请求。
CORS：出现的较晚，它是 W3C 标准，属于跨域 Ajax 请求的根本解决方案。支持 GET 和 POST 请求。缺点是不兼容某些低版本的浏览器。
--------------------------------------------------------------------------------------------------------------------------------
JSONP解决跨域的原理：
由于浏览器同源策略的限制，网页中无法通过 Ajax 请求非同源的接口数据。但是 <script> 标签不受浏览器同源策略的影响，可以通过 src 属性，请求非同源的 js 脚本。
因此，JSONP 的实现原理，就是通过 <script> 标签的 src 属性，请求跨域的数据接口，并通过函数调用的形式，接收跨域接口响应回来的数据。
实现一个简单的JSONP：
//定义一个 success 回调函数：
<script>
function success(data) {
console.log('获取到了data数据：')
console.log(data)
}
</script>
//通过 <script> 标签，请求接口数据： //使用查询参数
<script src="http://ajax.frontend.itheima.net:3006/api/jsonp?callback=success&name=zs&age=20"></script>
注意：JSONP 和 Ajax 之间没有任何关系，不能把 JSONP 请求数据的方式叫做 Ajax，因为 JSONP 没有用到 XMLHttpRequest 这个对象。
jQuery中的JSONP：
$.ajax({
url:'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',
dataType:'jsonp', //如果要使用$.ajax()发起JSONP请求,必须指定datatype为jsonp
jsonp:'callback', //发送到服务端的参数名称，默认值为callback(可省略)
jsonpCallback:'jQueryxxx', //自定义的回调函数名称，默认值为jQueryxxx格式(可省略)
success:function(res){
console.log(res)
}
})
默认情况下，使用jQuery发起JSONP请求，会自动携带一个callback=jQueryxxx的参数
,jQueryxxx 是随机生成的一个回调函数名称。
jQuery中JSONP的实现过程：
jQuery 中的 JSONP，也是通过 <script> 标签的 src 属性实现跨域数据访问的，只不过，jQuery 采用的是动态创建和移除 <script> 标签的方式，来发起 JSONP 数据请求。
在发起 JSONP 请求的时候，动态向 <header> 中 append 一个 <script> 标签；
在 JSONP 请求成功以后，动态从 <header> 中移除刚才 append 进去的 <script> 标签；
--------------------------------------------------------------------------------------------------------------------------------
CORS解决跨域 ：
CORS是官方的跨域解决方案，他的特点是不需要在客户端做任何特殊操作，完全在服务器中进行处理(后端的活)，支持get和post请求
CORS是怎么工作的?
CORS是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应后会对响应放行(设置响应头为Access-Control-Allow-Origin:* )
--------------------------------------------------------------------------------------------------------------------------------
HTTP协议：
什么是通信协议：
通信协议（Communication Protocol）是指通信的双方完成通信所必须遵守的规则和约定。
通俗的理解：通信双方采用约定好的格式来发送和接收消息，这种事先约定好的通信格式，就叫做通信协议。
互联网中的通信协议：
客户端与服务器之间要实现网页内容的传输，则通信的双方必须遵守网页内容的传输协议
网页内容又叫做超文本，因此网页内容的传输协议又叫做超文本传输协议（HyperText Transfer Protocol） ，简称 HTTP 协议。
什么是HTTP协议:
HTTP 协议即超文本传送协议 (HyperText Transfer Protocol) ，它规定了客户端与服务器之间进行网页内容传输时，所必须遵守的传输格式。
例如：
客户端要以HTTP协议要求的格式把数据提交到服务器
服务器要以HTTP协议要求的格式把内容响应给客户端
HTTP协议的交互模型:
HTTP 协议采用了 请求/响应 的交互模型。
---------------------------------------------------------------------------------------------------------------------------------
HTTP请求消息的组成部分：
HTTP 请求消息由请求行（request line）、请求头部（ header ） 、空行 和 请求体 4 个部分组成。
请求行由请求方式、URL 和 HTTP 协议版本 3 个部分组成，他们之间使用空格隔开。
请求头部用来描述客户端的基本信息，从而把客户端相关的信息告知服务器
请求头部由多行 键/值对 组成，每行的键和值之间用英文的冒号分隔
请求头部 – 常见的请求头字段：
头部字段 |
说明 |
Host |
要请求的服务器域名 |
Connection |
客户端与服务器的连接方式(close 或 keepalive) |
Content-Length |
用来描述请求体的大小 |
Accept |
客户端可识别的响应内容类型列表 |
User-Agent |
产生请求的浏览器类型 |
Content-Type |
客户端告诉服务器实际发送的数据类型 |
Accept-Encoding |
客户端可接收的内容压缩编码形式 |
Accept-Language |
用户期望获得的自然语言的优先顺序 |
空行：
最后一个请求头字段的后面是一个空行，通知服务器请求头部至此结束。
请求消息中的空行，用来分隔请求头部与请求体。
请求体：请求体中存放的，是要通过 POST 方式提交到服务器的数据。
注意：只有 POST 请求才有请求体，GET 请求没有请求体！
---------------------------------------------------------------------------------------------------------------------------------
HTTP响应消息的组成部分 ：
HTTP响应消息由状态行、响应头部、空行 和 响应体 4 个部分组成
状态行由 HTTP 协议版本、状态码和状态码的描述文本 3 个部分组成，他们之间使用空格隔开
响应头部用来描述服务器的基本信息。响应头部由多行 键/值对 组成，每行的键和值之间用英文的冒号分隔。
空行：在最后一个响应头部字段结束之后，会紧跟一个空行，用来通知客户端响应头部至此结束。
响应消息中的空行，用来分隔响应头部与响应体。
响应体：响应体中存放的，是服务器响应给客户端的资源内容
---------------------------------------------------------------------------------------------------------------------------------
HTTP的请求方法：
序号 |
方法 |
描述 |
1 |
GET |
(查询)发送请求来获得服务器上的资源，请求体中不会包含请求数据，请求数据放在协议头中。 |
2 |
POST |
(新增)向服务器提交资源（例如提交表单或上传文件）。数据被包含在请求体中提交给服务器。 |
3 |
PUT |
(修改)向服务器提交资源，并使用提交的新资源，替换掉服务器对应的旧资源。 |
4 |
DELETE |
(删除)请求服务器删除指定的资源。 |
5 |
HEAD |
HEAD 方法请求一个与 GET 请求的响应相同的响应，但没有响应体。 |
6 |
OPTIONS |
获取http服务器支持的http请求方法，允许客户端查看服务器的性能，比如ajax跨域时的预检等。 |
7 |
CONNECT |
建立一个到由目标资源标识的服务器的隧道。 |
8 |
TRACE |
沿着到目标资源的路径执行一个消息环回测试，主要用于测试或诊断。 |
9 |
PATCH |
是对 PUT 方法的补充，用来对已知资源进行局部更新 。 |
--------------------------------------------------------------------------------------------------------------------------------
HTTP响应状态码：
HTTP 状态码由三个十进制数字组成，第一个十进制数字定义了状态码的类型，后两个数字用来对状态码进行细分
分类 |
分类描述 |
1** |
信息，服务器收到请求，需要请求者继续执行操作（实际开发中很少遇到 1** 类型的状态码） |
2** |
成功，操作被成功接收并处理 |
3** |
重定向，需要进一步的操作以完成请求 |
4** |
客户端错误，请求包含语法错误或无法完成请求 |
5** |
服务器错误，服务器在处理请求的过程中发生了错误 |
2** 范围的状态码，表示服务器已成功接收到请求并进行处理。
状态码 |
状态码英文名称 |
中文描述 |
200 |
OK |
请求成功。一般用于 GET 与 POST 请求 |
201 |
Created |
已创建。成功请求并创建了新的资源，通常用于 POST 或 PUT 请求 |
3** 范围的状态码，表示表示服务器要求客户端重定向，需要客户端进一步的操作以完成资源的请求。
状态码 |
状态码英文名称 |
中文描述 |
301 |
Moved Permanently |
永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替 |
302 |
Found |
临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI |
304 |
Not Modified |
未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源（响应消息中不包含响应体）。客户端通常会缓存访问过的资源。 |
4** 范围的状态码，表示客户端的请求有非法内容，从而导致这次请求失败。
状态码 |
状态码英文名称 |
中文描述 |
400 |
Bad Request |
1、语义有误，当前请求无法被服务器理解。除非进行修改，否则客户端不应该重复提交这个请求。 2、请求参数有误。 |
401 |
Unauthorized |
当前请求需要用户验证。 |
403 |
Forbidden |
服务器已经理解请求，但是拒绝执行它。 |
404 |
Not Found |
服务器无法根据客户端的请求找到资源（网页）。 |
408 |
Request Timeout |
请求超时。服务器等待客户端发送的请求时间过长，超时。 |
5** 范围的状态码，表示服务器未能正常处理客户端的请求而出现意外错误。
状态码 |
状态码英文名称 |
中文描述 |
500 |
Internal Server Error |
服务器内部错误，无法完成请求。 |
501 |
Not Implemented |
服务器不支持该请求方法，无法完成请求。只有 GET 和 HEAD 请求方法是要求每个服务器必须支持的，其它请求方法在不支持的服务器上会返回501 |
503 |
Service Unavailable |
由于超载或系统维护，服务器暂时的无法处理客户端的请求。 |