AJAX理解

注：首先我们要明白请求是什么？请求分两种，一、静态请求（如：返回js、css、图片等） 二、动态请求（返回跟用户有关的数据）

http（apache、nginx等）服务器会判断如果是一个静态请求，会直接返回给客户端，如果是一个动态请求http服务器会把这个请求转发到后台的（tomcat等）应用服务器应用服务器处理完后，把结果返回给http服务器，http服务器再返回给客户端

1.为什么会发生AJAX跨域？

①浏览器限制（浏览器处于安全考虑，不允许跨域的xhr请求）

②跨域（协议、域名、端口）

③XHR（XMLHttpRequest）请求

2.解决思路

浏览器=》（XHR=》JSONP）=》（跨域=》（①被调用方  ②调用方））

3.浏览器禁止检查

4.JSONP如何解决跨域

　　　      （注：①  普通的ajax请求，请求类型是xhr，jsonp是script  ②  普通的ajax请求，返回类型是json，jsonp是javascript）

　　          JSONP其实是前后端共同约定，当请求参数中有callback（因为JSONP只支持GET，参数暴露在url中，callback值在前端自动生成），后端就认定为是jsonp请求，此时后端返回 javascript代码（一个函数），js代码的内容就是一个callback的值为函数名，返回数据做参数的函数。那么这种这种方式为什么能成功呢？它是利用script标签可跨域访问的特性，在发送JSONP时动态创建一个script标签，通过该标签的url属性来发送请求，该url的值就是请求地址加上参数（其中参数自动生成添加了一个callback）,把创建出的script元素添加进header头，请求结束后注销这个元素

5.JSONP有什么弊端

①服务器需要改动代码来做支持

②只支持GET

③发送的不是XHR请求（不能使用XMLHttpRequest的新特性）

6.后台解决方案（支持跨域）

　　①filter解决方案，增加响应头，告诉浏览器支持跨域

　　　　跨域请求的请求头里比普通请求多了一个origin，值为当前发送方的域名，当请求返回时浏览器检查返回头里面有没有允许跨域的信息

　　　　"Access-Control-Allow-Origin"："请求来源url"

"Access-Control-Allow-Methods"："请求方式"

②简单请求和非简单请求

浏览器在发送请求的时候，会先判断是简单请求还是非简单请求，如果是简单请求会先执行再判断，如果是非简单请求，浏览器会发一个预检命令，检查通过        后才会真正把请求发出去

工作中常见的简单请求：

　　　　　　方法为：GET、HEAD、POST

请求header里面：① 无自定义头    ② Content-Type值为：text/plain、multipart/from-data、application/x-www-form-urlencoded

工作中常见的非简单请求：

①put、delete方法的ajax请求

②发送json格式的ajax请求

③带自定义头的ajax请求

非简单请求时，预检命令请求头中会加上一个Access-Control-Request-Headers：content-type，意为这个请求需要询问服务器后台是否允许这个头，只                  有response中加上Access-Control-Request-Headers：content-type这个头，这个预检命令请求才能成功，成功后才真正把请求发出去（所以看到一个请求发                了两次）。（注：非简单请求的method为options）

　　　　　　预检命令缓存，Access-Control-Max-Age：3600，增加这个头等于告诉浏览器一个小时之内缓存这个预检命令请求，意味着一个请求不用发两次了

③带cookie的跨域

　　　　此时cookie要加在被调用方，也就是后台，因为在网络请求中只能拿到本域的cookie

此时Access-Control-Allow-Origin的值应为调用方（前台页面）的域名

此时response中要添加上Access-Control-Allow-Credentials：true这样一个字段

④带自定义头的跨域

此时需要在response中的Access-Control-Request-Headers字段值中添加上各自定义请求头字段的key

　  ⑤ nginx、apacha配置等（待叙）

7.调用方解决方案（支持跨域）

隐藏跨域，实现方向代理，nginx、apacha配置等（待叙）