一.原生ajax
1.1 AJAX 简介 AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。 通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。 AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。
1.2 XML 简介 XML 可扩展标记语言。 XML 被设计用来传输和存储数据。 XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签， 全都是自定义标签，用来表示一些数据
1.3 AJAX 的特点 1.3.1 AJAX 的优点 1) 可以无需刷新页面而与服务器端进行通信。 2) 允许你根据用户事件来更新部分页面内容。 1.3.2 AJAX 的缺点 1) 没有浏览历史，不能回退 2) 存在跨域问题(同源) 3) SEO 不友好
1.4 AJAX 的使用
1.4.1 核心对象
XMLHttpRequest，AJAX 的所有操作都是通过该对象进行的。
1.4.2 使用步骤
1) 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
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);
}
}二.跨域
1 同源策略 同源策略(Same-Origin Policy)最早由 Netscape 公司提出，是浏览器的一种安全策略。 同源： 协议、域名、端口号 必须完全相同。 违背同源策略就是跨域
2.2 如何解决跨域
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 obj = {
name:"孙悟空", age:18
}
res.send(callback+"("+JSON.stringify(obj)+")");
});
