Ajax原理分析
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下（所谓局部刷新）。
核心对象：XMLHttpRequest
这个对象为向服务器发送请求和解析服务器响应提供了流畅的接口，使得浏览器可以发出HTTP请求与接收HTTP响应，实现在页面不刷新的情况下和服务端进行数据交互。
Ajax实例
使用 AJAX 修改该文本内容
Ajax原理
Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎自己来做,，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
这样极大的提高了站点的性能，无需每次重载整个页面，只刷新局部
XMLHttpRequest 对象的三个常用的属性
onreadystatechange 属性
onreadystatechange 属性存有处理服务器响应的函数。
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
2.readyState 属性
readyState 属性存有服务器响应的状态信息
当readyState发生变化是，就会触发上述onreadystatechange中的函数，
状态描述0请求未初始化（在调用 open() 之前）1请求已提出（调用 send() 之前）2请求已发送（这里通常可以从响应得到内容头部）3请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）4请求已完成（可以访问服务器响应并使用它）使用最多的就是4，来判断是否请求完成。
responseText 属性
可以通过 responseText 属性来取回由服务器返回的数据
当ready===4时，就是通过responseText获取服务器返回的数据，并渲染到页面上。
xmlhttprequst的方法
xmlhttp.open("GET","http://backend.hft.jajabjbj.top/htodo/v1/users",true);
xmlhttp.send();
1.open()
三个参数：1.发生请求的方法，get等 2.url，请求服务器的url，3.Boolean 是否作为异步处理
谷歌浏览器 url只能请求服务器数据，不能请求本地文件数据，如需请求本地数据使用jquery
因为Chrome禁止本地浏览时加载本地其他文件，可以采用添加启动参数的方式来支持
2.send()
将请求发往服务器
其他不常用
注意点
1.如果open第三个参数为true，就是异步请求，需要采取回调函数，
//注册回调函数
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var obj = document.getElementById(id);
obj.innerHTML = xmlHttp.responseText;
} else {
alert("AJAX服务器返回错误！");
}
}
那么回调函数是什么呢：回调是作为参数传递给另一个函数并在其父函数完成后执行的函数。
$.get('ajax/text.html',function(data){
$('.result').html(data)
alert('success')
})
那么为什么要使用回调函数：js为单线程，带来了方便，不用处理各个线程之间的通信，js只能一件一件事的去做，所以js的事件都像排队一样处理，但是如果一个事件花费很多事情，后面的任务都在等待，出现浏览器假死。
所以js开发出异步模式
每个异步任务都有自己的回调函数，当异步任务完成后，不会马上执行后面的任务，而是执行回调函数，只要触发回调函数，就会向下执行任务。
2.xmlHttp.status
服务器返回的结果
status描述1xx信息2xx成功3xx重定向4xx请求包含一个错误语法或不能完成5xx服务器执行一个完全有效请求失败100客户必须继续发出请求101交换协议200请求成功201请求已经被实现202服务器已接受请求203非权威信息204没有内容205重置内容206部分内容300多种选择301永久移动302找到303参见其他304未修改305使用代理306未使用307暂时重定向400错误的请求401未授权402付费请求403禁止404未找到405方法不允许406不可接受408请求超时500内部服务器错误501未实现502错误的网关503服务不可用504网关超时505HTTP版本不支持3.同源策略
如果不是同一个域名同一个端口同一个协议，就不能发送AJAX请求。只有AJAX不允许，form,img,script,link都允许
为什么要有同源策略：form发请求后页面会自动刷新，原来的页面就回收了，没有办法拿到新页面的内容。而AJAX可以拿到响应的内容
解决：
1.突破同源策略就是跨域CORS（Cross-Origin Resource Sharing跨站资源共享）
CORS可以告诉浏览器，我俩一家的不要阻止他
实现：
服务器端加个请求头
//加该请求头header('Access-Control-Allow-Origin:* ')
const express = require('express');
const app = express();
//设置允许跨域访问该服务.
app.all('*', function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
//Access-Control-Allow-Headers ,可根据浏览器的F12查看,把对应的粘贴在这里就行
res.header('Access-Control-Allow-Headers', 'Content-Type');
res.header('Access-Control-Allow-Headers', 'X-Requested-with');
res.header('Access-Control-Allow-Methods', '*');
next();
});
2.Query中$.ajax的get方法，是支持跨域访问的，不过dataType要设定为“jsonp”
Jsonp(JSON with Padding)是 json 的一种“使用模式”，可以让网页从别的网域获取资料。
jsonp是采用的js的回调机制来实现的，
使用jsonp的方式，是需要后端配合的，否则会出现跨域问题Cross-Origin Read Blocking (CORB)
$.ajax({
url: 'http://backend.hft.jajabjbj.top/htodo/v1/users',
type: "GET",
dataType: 'jsonp',
success: function (json) {
//客户端jquery预先定义好的callback函数,成功获取跨域服务器上的json数据后,会动态执行这个callback函数
console.log(json)
},
error: function (){
console.log("请求失败！");
}
});