ajax问题

ajax的写法

xhr.readyState

0. 未初始化，还没有调用send()方法
1. 载入，已调用send()方法
2. 载入完成，send()方法执行完成，已经接收到全部响应内容
3. 交互，正在解析响应内容
4. 完成，响应内容解析完成，可以在客户端调用

const xhr = new XMLHttpRequest();
xhr.open("get", "/api", true);
xhr.onreadystatechange = function() {
	if (xhr.readyState === 4 && xhr.status === 200) {
		console.log(xhr.responseText);
	}
}
xhr.send();

简易版本

const xhr = new XMLHttpRequest();
xhr.open("get", "/api", true);
xhr.onload = function() {
	console.log(xhr.response);
}
xhr.send();

封装一个ajax，处理不同请求方式

同源和跨域

同源

• ajax请求时，为了安全性，浏览器要求当前网页和sever必须同源
• 同源：协议，域名，端口都一致才是同源
• 加载图片，css，js可无视同源策略，可实现跨域
• <img>可用于打点统计，可使用第三方服务统计
• link, script可使用CDN，CDN一般都是外域
• script可以实现jsonp

跨域

• 所有的跨域都需要经过server端允许和配合
• 未经server允许就实现跨域，说明浏览器有漏洞

JSONP

满足以下两个条件

1. 服务端可以任意动态拼接任何数据返回，只需要复合html格式要求
2. script标签可以无视跨域

let btn = document.querySelector("button");

function cbfn(res) {
    console.log(res);
}
btn.onclick = function () {
    let o = document.createElement("script");
    o.src = "http://localhost:4000/getAjax?cb=cbfn"; // 在query里传入回调函数
    document.querySelector("head").appendChild(o);
}

前端创建script标签后发起跨域请求，服务器收到请求后调用query参数中的callback函数，实现跨域获取数据

CORS-服务器设置http header

服务器直接设置响应头字段