AJAX背景知识
浏览器与服务器之间，采用 HTTP 协议通信。用户在浏览器地址栏键入一个网址，或者通过网页表单向服务器提交内容，这时浏览器就会向服务器发出 HTTP 请求。
1999年，微软公司发布 IE 浏览器5.0版，第一次引入新功能：允许 JavaScript 脚本向服务器发起 HTTP 请求。这个功能当时并没有引起注意，直到2004年 Gmail 发布和2005年 Google Map 发布，才引起广泛重视。2005年2月，AJAX 这个词第一次正式提出，它是 Asynchronous JavaScript and XML 的缩写，指的是通过 JavaScript 的异步通信，从服务器获取 XML 文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。后来，AJAX 这个词就成为 JavaScript 脚本发起 HTTP 通信的代名词，也就是说，只要用脚本发起通信，就可以叫做 AJAX 通信。W3C 也在2006年发布了它的国际标准。
具体来说，AJAX 包括以下几个步骤。
- 创建 XMLHttpRequest 实例
- 发出 HTTP 请求
- 接收服务器传回的数据
- 更新网页数据
//创建 XMLHttpRequest 对象
var ajax = new XMLHttpRequest();
//规定请求的类型、URL 以及是否异步处理请求。
ajax.open('GET',url,true);
//发送信息至服务器时内容编码类型
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//发送请求
ajax.send(null);
//接受服务器响应数据
ajax.onreadystatechange = function () {
if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) {
}
};
XMLHttpRequest本身是一个构造函数，可以使用new命令生成实例。它没有任何参数,同时我们可以请求加载css javascript html XML json 等。
var xhr = new XMLHttpRequest();
例如请求JavaScript：
getJS.onclick = () => {
const request = new XMLHttpRequest();
request.open("GET", "/2.js");
request.onload = () => {
const script = document.createElement("script");
script.innerHTML = request.response;
document.body.appendChild(script);
};
request.onerror = () => {};
request.send();
};
tips：
//字符串转对象
JSON.parse(json)
eval('(' + jsonstr + ')')
// 对象转字符串
JSON.stringify(json)
跨域一般由哪几种情况产生？
如何请求跨域
-
CORS & JSONP
首先CORS不兼容IE，那我们想要兼容IE并且请求跨域则只能使用JSONP方法，注意JSON ！= JSONP ，二者没有直接关系
-
CORS原理：服务器设置Access-Control-Allow-OriginHTTP响应头之后，浏览器将会允许跨域请求
-
方法： 需要后台设置
Access-Control-Allow-Origin: * //允许所有域名访问，或者
Access-Control-Allow-Origin: http://a.com //只允许所有域名访问
-
JSONP原理：动态创建一个script标签。利用script标签的src属性不受同源策略限制。因为所有的src属性和href属性都不受同源策略限制。可以请求第三方服务器数据内容。
-
方法：
- 首先去创建一个script标签
- script的src属性设置接口地址
- 接口参数,必须要带一个自定义函数名 要不然后台无法返回数据。
- 通过定义函数名去接收后台返回数据
//需要创建一个script标签
var script = document.createElement("script");
//script的src属性，设置接口地址并带一个callback（回调函数）相应的名称
script.src = "http://127.0.0.1:8888/index.php?callback=jsonpCallback";
//插入到页面
document.head.appendChild(script);
//通过重新定义函数名去接收后台返回数据
function jsonpCallback(data){
//注意 jsonp返回的数据是json对象可以直接使用
//ajax 取得数据是json字符串需要转换成json对象才可以使用。
}
onreadystatechange
addEventListener('readystatechange', (event) => { })
onreadystatechange = (event) => { }
-
返回的状态码从0--4，常常会与request.status 一起做判断使用
0：请求未初始化 1: 服务器连接已经建立 2:请求已接收 3:请求处理中 4:请求已完成
