Ajax原理分析
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下（所谓局部刷新）。
核心对象：XMLHttpRequest
这个对象为向服务器发送请求和解析服务器响应提供了流畅的接口，使得浏览器可以发出HTTP请求与接收HTTP响应，实现在页面不刷新的情况下和服务端进行数据交互。
Ajax实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","http://backend.hft.jajabjbj.top/htodo/v1/users",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
</body>
</html>
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 | 网关超时 |
| 505 | HTTP版本不支持 |
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("请求失败！");
}
});