Ajax的特点

AJAX 的优点

​ 1) 可以无需刷新页面而与服务器端进行通信。

​ 2) 允许你根据用户事件来更新部分页面内容。

AJAX 的缺点

​ 1) 没有浏览历史，不能回退

​ 2) 存在跨域问题(同源)

​ 3) SEO 不友好

AJAX的使用

XMLHttpRequest，AJAX 的所有操作都是通过该对象进行的

1) 创建 XMLHttpRequest 对象

  var xhr = new XMLHttpRequest(); 
  //设置响应体数据的类型
  xhr.responseType = 'json';
  //超时设置
  xhr.timeout = 2000;
  //超时回调
  xhr.ontimeout = function(){
  	alert('网络异常')
}
  //网络异常回调
  xhr.onerror = function(){
    alert('网络出现问题')
}
 2) 设置请求信息 xhr.open(method, url); 

 //可以设置请求头，一般不设置
 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
3) 发送请求
xhr.send(body) //get 请求不传 body 参数，只有 post 请求使用
4) 接收响应
 //xhr.responseXML 接收 xml 格式的响应数据
 //xhr.responseText 接收文本格式的响应数据
 xhr.onreadystatechange = function (){
 if(xhr.readyState == 4 && xhr.status == 200){
 var text = xhr.responseText;
   console.log(text);
}
}

AJAX请求状态

​ xhr.readyState 可以用来查看请求当前的状态

​ https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/readyState

​ 0: 表示 XMLHttpRequest 实例已经生成，但是 open()方法还没有被调用。

 1: 表示 send()方法还没有被调用，仍然可以使用 setRequestHeader()，设定 HTTP请求的头信息

​ 2: 表示 send()方法已经执行，并且头信息和状态码已经收到。

​ 3: 表示正在接收服务器传来的 body 部分的数据。

​ 4: 表示服务器数据已经完全接收，或者本次接收已经失败

解决IE缓存问题

​ 问题：在一些浏览器中(IE),由于缓存机制的存在，ajax 只会发送的第一次请求，剩 余多次请求不会在发送给浏览器而是直接加载缓存中的数据。

​ 解决方式：浏览器的缓存是根据 url 地址来记录的，所以我们只需要修改 url 地址 即可避免缓存问题

xhr.open("get","/testAJAX?t="+Date.now());

跨域问题

同源策略

​ 同源： 协议、域名、端口号 必须完全相同，违背同源策略就是跨域。

如何解决跨域

JSONP

1. JSONP 是什么 JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明 才智开发出来，只支持 get 请求。

2. JSONP 怎么工作的？ 在网页有一些标签天生具有跨域能力，比如：img link iframe script。 JSONP 就是利用 script 标签的跨域能力来发送请求的。

3. JSONP 的使用

​ 1.动态的创建一个 script 标签 var script = document.createElement(“script”);

     2.设置 script 的 src，设置回调函数 

script.src = "http://localhost:3000/testAJAX?callback=abc"; 
function abc(data) { alert(data.name); }; 

​ 3.将 script 添加到 body 中

document.body.appendChild(script); 

​ 4.服务器中路由的处理

router.get("/testAJAX" , function (req , res) {
console.log("收到请求");
var callback = req.query.callback;
var object = {

name:"孙悟空", age:18
}
res.send(callback+"("+JSON.stringify(obj)+")");
});

CORS

​ 1.CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应 以后就会对响应放行。

​ 2.CORS 的使用

主要是服务器端的设置：
router.get("/testAJAX" , function (req , res){
//通过 res 来设置响应头，来允许跨域请求
//res.set("Access-Control-Allow-Origin","http://127.0.0.1:3000");
res.set("Access-Control-Allow-Origin","*");
res.send("testAJAX 返回的响应");

});