1. 可以发起请求的html元素：
————————————————————
1. form表单：既可以发起get请求，又可以发起post请求：但是会引起页面刷新或新开页面（影响用户体验）
1.1 get请求
//发起get请求
<form action="xxx" method=get>
<input type="passward" name="passward">
<input type="submit">
</form>
get请求内容
1.2 post请求
//发起post请求
<form action="xxx" method=post>
<input type="passward" name="passward">
<input type="submit">
</form>
post请求内容
2. a标签只能可以发起get请求，而且会引起页面刷新或新开页面
发起的get请求内容
3. img标签只能可以发起get请求，不会刷新页面，但是只能以图片形式展示（实际成功与否用户不知道）
<script>
var image = document.createElement('img')
image.src = "/xxx"
document.body.appendChild(image)
image.onload = function(){
console.log(s)
}
image.onerror = function(){
console.log(f)
}
</script>
4. link可以发起get请求，但是只能以css/favicon的形式展示
<script>
var link = document.createElement('link')
link.rel = "stylesheet"
link.href = "/xxx"
document.head.appendChild(link)
</script>
5. script标签只能可以发起get请求，但是只能以脚本形式运行
<script>
var script = document.createElement('script')
script.src = "/yyy"
document.head.appendChild(script)
</script>
2. AJAX：
———————
前端和后端的交互有没有以某种方式发起的请求方法能不能使用多种类型的请求方式（get/post/put/delete/patch/head等），且结果以任何形式展示都可以？
在这种需求下诞生了AJAX,全称 Asynchronous JavaScript And XML,指的是javascript的异步通信，从服务器获取XML文档从中提取数据，在更新当前网页对应部分，从而不用刷新整个网页，从而不打断用户正在做的事情。后来这个名词就成为Javascript脚本发起HTTP请求的代名词，也就是说脚本发起通信，就可以叫做Ajax通信。 AJAX通过原生的XMLHttpRequest向服务器发起http请求（AJAX的厉害之处就是可以发起多种请求），得到服务器返回的数据（目前服务器返回的都是JSON格式的数据，XML已经过时了）后进行处理。所以目前AJAX的字面意思改变了，但是这个名词已经被铭记在程序员心中，按理说目前AJAX的全称应为Asynchronous JavaScript and JSON，也就是说XML被JSON代替了。
历史： 说起AJAX不得不提起早期微软公司的贡献：IE5率先在js中引入了一个ActiveX对象（API），这个对象是的js可以直接发起http请求,其实就是windows下面的全局对象，随后Mozilla/Safari/Opera也跟进了，抄袭了这个对象，取名为XMLHttpRequest,之后在2006年纳入W3C标准。
随后，Jesse James Garret 讲使用到如下三个步骤的技术取名叫做AJAX，异步的JavaScript And XML：
1. 使用XMLHttpRequest(js的属性)发请求
2. 服务器返回符合XML格式的字符串（目前返回的数据是JSON格式的，代替了XML）
3. js解析XML，并更新局部页面
- XMLHttpRequest对象是AJAX的主要接口，用于浏览器与服务器之间的通信，XMLHttpRequest可以支持使用多种协议（ftp等），可以发送任何格式的数据（包括二进制和字符串等）。就是说AJAX可以使用多种类型的协议。
- XMLHttpRequest本身是一个构造函数，可以用new关键字来生成实例，他没有任何参数。
- 但是AJAX只能在同源网址之间发起http请求，如果跨域请求，就会报错。
3. JSON：
JSON 的全称Javascript Object Notartion; javascript 对象表示法， 是一种由道格拉斯·克罗克福特构想和设计、轻量级的数据交换语言，该语言以易于让人阅读的文字为基础，用来传输由属性值或者序列性的值组成的数据对象，虽然JSON抄袭了javascript,但是一门新的语言。 JSON 语言语法：
1. JSON数据类型：只有两种
1. 表示hash的object —— 铁轨图
2. 数组—— 铁轨图
2. JSON数据类型的值：
3. JSON 和 JS 的区别：
1. JSON
。 没有抄袭js 中的 undefined
。 没有抄袭js 中的 symbol
。 没有抄袭js 中的 object > function
2. 字符串：
。 JSON 字符串必须用双引号
。 JSON 对象必须用花括号，里面的键名和键值只要是JSON的数据类型就可以，但前提是必须遵循其语法,比如：{"name":"qinglin","gender","male"}
。 JSON 对象必须用方括号，里面的键名和键值只要是JSON的数据类型就可以，但前提是必须遵循其语法,比如：["name":"qinglin","gender","male"]
。 JSON 没有变量，不能引用，JSON不是编程语言，而是数据格式化语言
。 没有原型链
4. JSON 语言总结【面试题】
JSON是一门语言，是道格拉斯抄袭布兰登·艾克的js的，但是JSON是数据格式化（交换）语言，道格拉斯还写了一本javascript 语言精粹，JSON的数据类型都是抄袭js的，除了undefined/function/symbol.
4. 同源政策与CORS(Cross-Rrigin Resource Sharing)
4.1 同源政策
-
内容：
所谓同源政策最初是由Netscape公司引入浏览器的一种政策，同源政策就是指A网页设置的Cookie,不同源的其它网页不能打开，若想打开，必须是满足同源政策： 1. 协议相同 ，例如 http:// 2. 域名相同 ， 例如 www.baid.com 3. 端口号相同 ，可以省略，但必须是相同的端口号 Ajax请求只能在满足同源策略下发才能发送。原因：一个原页面用form提交到另一个域名之后，原页面的的脚本无法获取新页面中的内容，所以浏览器会认为是安全的，而AJAX是可以读取相应的内容的，所以浏览器不允许AJAX这样做。在AJAX发起请求时，用本质上同源政策的做法是：发送请求成功，但不能获取响应的内容（其XMLHttpRequest.readyState = 0 ；XMLHttpRequest.status = 200;）。 -
目的：
. 保护用户信息安全，防止恶意网站盗窃数据 . 浏览器规定提交表单不受同源政策限制(form 表单提交没有跨源问题)，所以在不同网站之间可以读取Cookie 的话，不法分子就可以为所欲为，所以提出同源政策是必须的 -
同源政策限制范围：随着互联网的发展，同源政策限制范围越来越严，目前不同源网页之间受到以下三种限制
. 不能读取Cookie 、LocalStorage 、 IndexDB . 无法获取DOM . AJAX不能发送请求
4.2 CORS
CORS —— 跨源资源分享（Corss-Origin ResourceSharing），它是W3C标准，是解决 AJAX 跨源请求的根本解决方法，CORS 允许发送任何类型的请求
举例：在服务器端设置允许AJAX成功发送请求并读取页面内容
response.setHeader('Access-Control-Allow-Origin','http://haha.com:8001')
//设置CORS,http://haha.com:8001这个网站可以访问本服务器响应内容
. 后台用 JSONP 还是 CORS? 首先JSONP 不能发起POST请求，但是不用联系要访问的后台负责人，直接可以搞定。CORS可以发起多种类型的请求（后台必须要用POST请求的话只能用CORS），但是需要访问的话在后台设置CORS。
5. AJAX的【面试题】：
1. 请使用原生JS来发送AJAX请求？
myButton.addEventListener('click', (e) => {
let request = new XMLHttpRequest() //声明一个XMLHttpRequest对象
request.open('GET', 'http://localhost:8002/xxx') //配置(初始化)XMLHttpRequest请求对象
request.send() //发送请求
//XMLHttpRequest的实例属性，监听XMLHttpRequest属性的变化
request.onreadystatechange = () => {
if (request.readyState === 4) {
if (request.status >= 200 && request.status < 300) { //js解析服务器返回的json格式的字符串
let string = request.responseText
let object = window.JSON.parse(string)//JSON.parse是浏览器提供的API ；把符合 json 语法的字符串转换成 js 对应的值
}
}
})
6. AJAX功能详解：配置请求和响应内容
1. 配置请求内容：
- http请求由以下四个部分组成：
第一部分：请求动词/get 路径/xxx 协议和版本http/1.1
第二部分：hash表
host:baidu.com
Content-Length:1000
Content-Type:application/x-form-urlencoded
等等……
第三部分：回车（空）
第四部分：要加载的数据（符合JSON格式的字符串，代替了XML）
- AJAX的设置请求内容功能详解：
1. 请求的第一部分：通过XMLHttpRequest.open()方法配置请求动词method 、路径URL 、协议(以及版本)
2. 请求的第二部分：host属性单独设置，Liunx/mac和windows的设置方法不一样
请求的第二部分内容中其它键值可以通过getAllResponseHeaders()和getResponseHeader()来设置，（这两种API只能用在open()和send()之间）
注意：这一部分中有些内容是不允许改变的，比如User-Agent：Mozilla/5.0就不能设置
3. 请求的第三部分是空的，不需要设置
4. 请求的第四部分：通过send()实例属性来设置
2. 配置响应内容：
- http响应由以下四个部分组成：
第一部分：协议和版本http/1.1 状态码/200 状态解释/OK
第二部分：hash表
Content-Type: text/json;charset=utf-8
Access-Control-Allow-Origin: http://localhost:8001 //使用CORS协议
Date: Sat, 07 Sep 2019 08:42:47 GMT
Connection: keep-alive
Transfer-Encoding: chunked
等等……
第三部分：回车（空）
第四部分：要加载的数据（目前是符合JSON格式的字符串，代替了XML）
例如：{
"note":{
"to":"小李子",
"from":"青林",
"heading":"打招呼",
"body":"Don't forget me this weekend!"
}
}
//这种格式的数据体
- AJAX的设置响应内容功能详解：
1. 第一部分：响应状态码：通过request.status获取
第一部分：响应状态解释：通过request.statusText获取
2. 第二部分：可以通过getAllResponseHeaders() 方法获取
第二部分：Content-Type :获取方法getResponseHeader('Content-Type')
3. 第三部分：\n 不需要设置
4. 第四部分：获取方法responseText ，相应的第四部分是符合JSON格式的字符串
