简述AJAX

什么是ajax？

• ajax  全名 async javascript and XML(异步JavaScript和XML(可扩展标记语言))
• 是前后台交互的能⼒ 也就是我们客户端给服务端发送消息的⼯具，以及接受响应的⼯具
• AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
• AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
• 是⼀个 默认异步执⾏机制的功能,AJAX分为同步（async = false）和异步（async = true）
   

什么是同步请求？(false)

•  同步请求是指当前发出请求后，浏览器什么都不能做，
•  必须得等到请求完成返回数据之后，才会执行后续的代码，
•  相当于生活中的排队，必须等待前一个人完成自己的事物，后一个人才能接着办。

什么是异步请求？(默认:true) 

• 默认异步：异步请求就当发出请求的同时，浏览器可以继续做任何事，
• Ajax发送请求并不会影响页面的加载与用户的操作，相当于是在两条线上，各走各的，互不影响。
• 一般默认值为true，异步。异步请求可以完全不影响用户的体验效果，
• 无论请求的时间长或者短，用户都在专心的操作页面的其他内容，并不会有等待的感觉。
   

ajax的操作流程

1. 创建⼀个 ajax 对象

// IE9及以上
//ajax的核心对象就是XMLHttpRequest。
const xhr = new XMLHttpRequest()
// IE9以下
const xhr = new ActiveXObject('Mricosoft.XMLHTTP')

 2.配置链接信息

//所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
const xhr = new XMLHttpRequest()
// xhr 对象中的 open ⽅法是来配置请求信息的
// 第⼀个参数是本次请求的请求⽅式 get / post / put / ...
// 第⼆个参数是本次请求的 url 
// 第三个参数是本次请求是否异步，默认 true 表示异步，false 表示同步
// xhr.open('请求⽅式', '请求地址', 是否异步)
xhr.open('get', './data.php')

  3.为xml添加监听

//ajax的有四个状态
// readyState === 0 : 表示未初始化完成，也就是 open 方法还没有执行 
// readyState === 1 : 表示配置信息已经完成，也就是执行完 open 之后 
// readyState === 2 : 表示 send 方法已经执行完成
// readyState === 3 : 表示正在解析响应内容
// readyState === 4 : 表示响应内容已经解析完毕，可以在客户端使用了



 const xhr = new XMLHttpRequest() xhr.open('get', './data.php')
	xhr.send()
	xhr.onreadyStateChange = function () {
	// 每次 readyState 改变的时候都会触发该事件
	// 我们就在这里判断 readyState 的值是不是到 4
	// 并且 http 的状态码是不是 200 ~ 299
	if (xhr.readyState === 4 && /^2\d{2|$/.test(xhr.status)) {
	// 这里表示验证通过
	// 我们就可以获取服务端给我们响应的内容了 }
}

4.发送请求

xhr.send(data)

同源和跨域

         同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。

同源协议+域名+端口三者都相同就是同源，有一个不同就是跨域。