AJAX学习

一、get请求的基本操作

二、post请求的基本操作

三、设置请求头

1.情况一：已经有预存在请求头

第一个参数是请求名：设置请求头类型

第二个参数是请求值：

2.情况二：自定义请求头信息

（绿色那里是Headers）

四、服务端响应JOSN请求

1.手动转化数据

2.自动转化数据

五、解决IE浏览器缓存问题

框中send的信息，在一次运行之后更改信息之后，IE浏览器中的接收到的信息不会改变，将还会是原来的信息，如下图：

解决方法：

六、请求超时控制与网络异常处理

七、取消请求

八、解决请求重复发送问题

如果用户在“疯狂”点击请求按钮那么可以使用节流阀来控制：当我们点击的时候，如果上一个请求还在进行那么就结束掉当前请求并且创建一个新的进程。

九、jQuery中发送AJAX请求

1.get请求、post请求

参数一：给谁发送；

参数二：发送的内容，对象形式；

参数三：回调函数function（）{响应体}；
还有一个参数：响应体类型，如：‘json’

2.通用方法ajax

十、axios发送AJAX请求

1.get请求

2.post请求

3.axios函数发送AJAX请求

十一、fetch函数发送ajax请求

十二、ajax同源策略

同源策略最早由Netscape公司提出，是浏览器的一种安全策略。

同源：协议、域名、端口号 必须完全相同。

违背同源策略就是跨域。

十三、如何解决跨域

1.JSONP

（1）什么是JSONP

JSON with Padding，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持get请求。

（2）JSONP怎么工作

在网页有一些标签天生具有跨域能力，比如：img link iframe script。

JSONP就是利用script标签的跨域能力来发送请求的。

（3）JSONP的使用

1、动态创建一个script标签

	var script = document.createElement("script")

2.设置script的src，设置回调函数

	script.src = "http://localhost:3000/testAJAX?callback=abc"

3.将script插入到文档中

	document.body.appendChild(script)

2.jQuery发送jsonp请求

3.设置CORS响应头实现跨域

（1）什么是CORS？

cORs Cross-Origin Resource Sharing），跨域资源共享。CORS是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get和l post 请求。跨域资源共享标准新增了一组HTTP首部字段，允许服务器声明哪些源站通过浏览器有权限访间哪些资源。

（2）CORS是怎么工作的?

CORS是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。

###### （3）CORS的使用

主要是服务器端的设置:

router.get("/testAJAX” , function (reg , res) {

主要是服务器端的设置:

HTTP响应首部字段：

• Access-Control-Allow-Origin：Origin参数的值指定了允许访问该资源的外域URL。对于不需要携带身份凭证的请求，服务器可以指定该字段的值为通配符，表示允许来自所有域的请求。
• Access-Control-Expose-Headers：来暴露头部信息。
• Access-Control-Max-Age：头指定了preflight请求的结果能够被缓存多久,。
• Access-Control-Allow-Credentials：跨域请求的时候是否携带验证信息，如cookie。
• Access-Control-Allow-Methods：设置请求允许的方法。
• Access-Control-Allow-Headers：设置请求允许的头信息。

---

• nodemon插件：监测代码的更改，可以不用重启服务器

  安装：npm install -g nodemon

  运行：nodemon 服务器文件名如server.js