在Long Long Ago，那个前端还是一个切图仔的年代，那时的页面根本没有js，前端的api非常的少，页面的所有数据都来自服务器渲染，任何的页面操作都会提交form表单请求刷新页面，直到那一天，浏览器开发者给浏览器挖通了一条可以不刷新页面就从服务器获取数据的通道，以及大量的es更新，那一天前端咸鱼翻身了，这个api叫window.XMLHttpRequest，这个技术叫AJAX，全称Asynchronous JavaScript And XML（异步的 JavaScript 和 XML）

==前端就是一个把数据请求到然后加工然后展示给用户看的一个工作，把数据请求到就是第一步，没有数据，前端跟一条咸鱼有什么区别==

一个ajax只有发出一次请求（一份参数）获取到一次响应（一份结果）

ajax请求需要的材料是一个请求地址和请求参数
但是发起请求的数据格式有很多，这决定了后端能否拿到数据，
能决定数据格式的因素有==请求方式==和==请求体==和==Content-Type请求头==
把ajax比作寄快递，你就是拿着数据去一个叫net的快递公司寄快递，到了之后可以选择他们的车（请求方式）

》》请求方式是车，有四种车

GET

POST

PUT

DELETE

车速是一样的，但是车能装的东西有规定，而且车上的箱子也不一样

》》箱子有两种

一个是拼接在请求地址后面，叫做params

一个是放在一个叫请求体的地方，叫做body

GET的车上只有一个箱子，是params，其他三种车是两种箱子都有

你去寄快递，如果你选择把东西放在body箱子里寄，他会问你寄的是什么，这就是type请求头，type请求头就是告诉net公司，我寄的是什么，他会根据你寄的东西不一样，打包装，打包装是net的事，你不用管，只要如实的告诉他们无数据格式，如果你不说，他有默认的type请求头，parmas箱子不需要type请求头，因为parmas只有一个格式

Content-Type请求头有

application/x-www-form-urlencoded（默认请求头）

multipart/form-data

application/json

text/xml

因为三种因素的分类可以组合出几十种寄快递的方式
但是，会出现几种情况

寄了没发（格式不符合规定）

发了对方拿不到

对方拿到了，但是你寄的时候说错了格式，对方拿到的是一串乱码

下面列出所有常用的能顺利完成一次快递过程的方式，发请求的选择就是根据数据类型来选择的

==如果你要发下面这种key-value的并且是基础数据类型的数据==

{ name: "tom" age: 18, }

可以选择get，get会打包成name=tom&age=18；
也可以选择（POST | PUT | DELETE） 和 application/x-www-form-urlencoded，会被打包成跟上面一样的数据，但是是放在body的箱子里的，上面是放在params的箱子里；
还有（POST | PUT | DELETE） 和 application/json，这个特殊，往下看
选哪种要看

==如果你要发文件格式==
选择（POST | PUT | DELETE） 和 multipart/form-data

==如果你要发复杂数据类型，比如数组和对象，普通的key-value同样适用，最常用==

{ obj: { name:"tom",age:18 }, arr: [1,2,3] }

选择（POST | PUT | DELETE） 和 application/json
但是不是像上面那么写，而是把这个数据转成json字符串格式

JSON.stringify({ obj: { name:"tom",age:18 }, arr: [1,2,3] }）

==如果你要发xml类型的数据==
选择（POST | PUT | DELETE） 和 text/xml
xml数据类型现在在前端很少见了，这个可以不理会的，就了解一下，xml数据类型在下一篇会说

也就是5种方式，减掉xml的不说，4种

下面用这四种搭配写四个jq.ajax的模板供复制使用
为什么用jq的ajax，因为自己学个ajax插件是不存在的，判断太多了，今后还会接触到另外的插件，会用就行，当然，原理还是要懂的，最下面会写一个原生的ajax请求

需要先了解ajax的F12调试手段

F12的第6个选项Network就是浏览器的请求数据，net就是网络，work就是工作；
一切的请求在第2个红框的All都能看到，包括图片，css文件，js文件，doc文件等等；
点击第3个红框的xhr就可以筛选出ajax的所有请求；
第四框就是一个请求的列表；
第五个框headers请求信息的显示位置,里面包括了(general,responseHeaders,RequestHeaders,数据包装区)；
第6的General查看请求地址，请求方式，请求头，请求参数，请求cookie的地方（还有响应头，响应cookie）；
第7的responseHeaders查看请求头，请求cookie的地方；
第8的RequestHeaders查看响应头，响应cookie的地方；
第9的数据包装区，根据请求头不同有多种名字,截图是Parametes
第10是查看接口返回数据的地方

好了，上代码上截图

GET