ajax及ajax跨域

1.ajax的概念和优势

–AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

–通过在后端与服务器进行少量数据交换，AJAX 可以使网页实现异步(局部)更新。
–可以把一部分以前由服务器负担的工作转移到客户端，利用客户端的闲置的资源进行处理，减轻服务器和带宽的负担，节约空间和成本.

–可以调用xml、json、php等外部数据。
–ajax配合服务器的环境

2.ajax优缺点

AJAX的优点
（1）无刷新更新数据–局部更新
（2）异步服务器通信
（3）前端和后端负载平衡
（4）基于标准备广泛支持
（5）界面与应用分离(前后端的分离)

AJAX的缺点
（1）AJAX干掉了Back和History功能，即对浏览器机制的破坏
（2）AJAX安全问题
（3）对搜索引擎支持较弱–seo
（4）AJAX不是很好支持移动设备

3.ajax编写步骤

（1）创建ajax对象
let ajax= new XMLHttpRequest();
var ajax= new ActiveXObject(“Microsoft.XMLHTTP”)–IE6

js容错处理方式：try…catch…finally
先执行 try { … }的代码,如果try里面的代码出错，转而执行 catch (e) { … }代码，最后执行 finally { … }代码，也就是finally里面的代码一定会执行。 最后请注意，catch和 finally可以不必都出现。

（2）ajax的open方法
ajax.open(请求类型，接口地址，是否异步)
请求类型：get post (put delete) --> (get–select post–update put–insert delete–delete)
post和get区别
接口地址：完整url(http/https)
是否异步：针对整个ajax

（3）ajax的send方法
ajax的属性：readyState:就绪状态–0(初始化) 1(请求建立) 2(发送完成) 3(解析) 4(完成)

0：请求初始化（还没有调用 open()）。
1：请求已经建立，但是还没有发送（还没有调用 send()）。
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3：请求在处理中；通常响应中已有部分数据可用，但是服务器还没有完成响应的生成。
4：响应已完成；您可以获取并使用服务器的响应了。

（4）设置回调函数–监听就绪状态码
onreadystatechange当状态值(readyState)发生改变的事件
ajax.readyState4 代表ajax的工作状态完成，共5个值
ajax.status200 服务器状态(http状态码);
–操作内容：
responseText:：ajax请求返回的内容就被存放到这个属性下面,返回获取的内容,string
responseXML：返回xml文件

4.综合应用

–JS方法解析JSON数据。
–JSON.parse()：将json格式的字符串转换成对象(数组for…of和对象for…in),–具有json格式检测功能。
–eval()
eval方法不会去检查数据是否符合json的格式，同时如果给的字符串中存在js代码eval也会一并执行，比较而言，eval方法是很危险的。
–总结：如果接口的格式不符合json格式，需要eval进行转换。
–应用
局部数据刷新–定时器
事件委托的应用–核心
前后端分离
http状态码
get和post请求的区别(get/post/ put/delete)
验证用户名是否存在
搜索下拉提示–跨域
AJAX瀑布流+加载更多（面向对象）
封装函数实现Ajax获取和设置数据。
等等…

5.请求头文件解读

第一部分General是概要，包含请求地址，请求方式，状态码，服务器地址以及Referrer 策略。
第二部分是应答头部，是服务器返回的。
第三部分是请求头部，是客户端发送的

general

1. Request URL: https://m.lagou.com/listmore.json?pageno=1&pagesize=20请求的接口地址
2. Request Method: GET 请求方式
3. Status Code: 304 Not Modified http状态码
4. Remote Address: 127.0.0.1:80 远程地址
5. Referrer Policy: no-referrer-when-downgrade
   referrer是HTTP请求header的报文头，通过这个信息，我们可以知道访客是怎么来到当前页面的。
   No Referrer When Downgrade：仅当协议降级（如HTTPS页面引入HTTP资源）时不发送Referrer信息。是大部分浏览器默认策略。

response headers

1. Connection: Keep-Alive 保持连接
2. Date: Wed, 25 Sep 2019 11:03:28 GMT 日期
3. ETag: “a000000001833d-a1a-5935d7706ba49” ETag是一个可以与Web资源关联的记号（token）。
4. Keep-Alive: timeout=5, max=100 连接通信的事件
5. Server: Apache/2.2.17 (Win32) PHP/5.3.3 服务器

request headers

1. Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,/;q=0.8,application/signed-exchange;v=b3 告诉服务器当前客户端可以接收的文档的类型。其实这里包含了/，就表示什么都可以接收；
2. Accept-Encoding: gzip, deflate, br 客户端支持的编码
3. Accept-Language: zh-CN,zh;q=0.9,en;q=0.8 当前客户端可以支持的语言，在浏览器的工具->选项中可以得到相关信息
4. Cache-Control: max-age=0 指明哪些地方可以缓存返回的数据。(缓存的有效期)
5. Connection: keep-alive 客户端支持的连接方式
6. Host: localhost 主机名
7. If-Modified-Since: Wed, 25 Sep 2019 09:42:01 GMT 浏览器缓存记录的该文件的最后服务器修改时间
8. If-None-Match: “a000000001833d-a1a-5935d7706ba49” 当下次再次向服务器请求A时，会通过类似 If-None-Match: “3f80f-1b6-3e1cb03b” 的请求头把ETag发送给服务器，服务器再次计算A的哈希值并和浏览器返回的值做比较，如果发现A发生了变化就把A返回给浏览器(200)，如果发现A没有变化就给浏览器返回一个304未修改。这样通过控制浏览器端的缓存，可以节省服务器的带宽，因为服务器不需要每次都把全量数据返回给客户端。
9. Referer: http://localhost/JS1909/Day%2023/
10. Upgrade-Insecure-Requests: 1 这行代码表示能读懂服务器发过来的上面这条信息，并且在以后发请求的时候不用http而用https
11. User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36 chrome浏览器的相关信息

6.浏览器的同源策略

同源策略：同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说，受到请求的 URL 的域必须与当前 Web 页面的域相同。同源策略是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。
总结：端口不同，域名不同，协议不同 出现跨域

7.解决跨域问题的方法

（1）后端代理（后端不存在跨域）

（2）CORS解决跨域(xhr2)

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。 它允许浏览器向跨源(协议 + 域名 + 端口)服务器，发出 XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

需要服务器(提供接口的源码里面)添加下面两句话。

header(‘Access-Control-Allow-Origin:*’);

header(‘Access-Control-Allow-Method:POST,GET’);

（3）jsonp(json with padding)----前端常用的

（4）其他跨域介绍–nginx(反向代理)

8.jsonp跨域

JSONP(JSON with Padding)是一个非官方的协议，通过javascript callback的形式实现跨域访问，由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名协议端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。
–Script标签 src不存在跨域
–利用了回调函数
应用：
请求天气预报–跨域
请求淘宝搜索下拉提示