JS篇 - Ajax

Ajax是什么？如何创建一个Ajax？

说明：
ajax 异步的javascript 和XML技术
XHR 全称 XMLHttpRequest 技术特点在于 页面无需刷新；

思路：
1. 创建XHTMLHttpRequest对象,也就是创建一个异步调用对象
2. 创建一个新的HTTP请求，并指定该HTTP请求的方法、URL及验证信息
3. 设置响应HTTP请求状态变化的函数
4. 发送HTTP请求
5. 获取异步调用返回的数据
6. 适用JavaScript 和 DOM 实现局部刷新
一般实现：

1. 原生写法

const SERVER_URL = "/server";
// 创建 一个XHR对象（考虑浏览器差异，但是IE凉了啊 ^0^）
let xhr = null;
xhr = window.XMLHttpRequest ? 
	new XMLHttpRequest() : 
	new ActiveXObject("Microsoft.XMLHTTP");
// 监听请求成功后的状态变化
xhr.oneradystatechange = function(){
	if(this.readyState == 4 && this.status == 200) {
		// 服务器返回内容，默认字符串
		console.log(request.responseText); 
	} else {
		console.error(this.statusText); 
	}
}
// 设置请求失败时的监听函数
xhr.onerror = function() {
	console.error(this.statusText);
}

// 设置响应的数据类型
xhr.responseType = "json";
// 设置请求头信息
xhr.setRequestHeader("Accept","application/json");
// 设置请求参数（请求的方法、请求的地址、是否采用异步请求） 创建 HTTP 请求
xhr.open("GET",SERVER_URL ,true);
// 发送请求
xhr.send();

promise 封装实现：

function getSomeJSON(url){
	let promise = new Promise((resolve,reject) {
		// 上面原生Ajax内容
	})
}

2.JQuery 使用AJAX

$.get('url').then(function(response){
	console.log(response) // 返回信息
})

HTTP ，status 状态码

1xx 临时响应 --> 表示临时响应并需要请求者继续执行操作的状态代码

• 100 继续 --> 请求者应当继续提出请求。服务器返回此代码标识已收到请求的第一部分，正在等待其余部分。
• 101 切换协议 --> 请求者已要求服务器切换协议，服务器已确认并准备切换。

2xx 成功 --> 服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。

• 201 已创建 --> 请求成功 并且服务器创建了新的资源
• 202 已接受 --> 服务器已接受请求，但尚未处理。
• 203 非授权信息 --> 服务器已成功处理了请求，但返回的信息可能来自另一来源。
• 204 无内容 --> 服务器成功处理了请求，但没有返回任何内容。
• 205 重置内容 --> 服务器成功处理了请求，但没有返回任何内容。
• 206 部分内容 --> 服务器成功处理了部分GET请求。

3xx 重定向 --> 表示要完成请求，需要进一步操作。通常这些状态码用来重定向。

• 300 多种选择 --> 针对请求，服务器可执行多种操作。服务器可根据请求者（user agent）选择一项操作，或是提供操作列表共请求者选择。
• 301 永久移动 --> 请求的

Ajax 解决浏览器缓存问题

1. 在ajax发送请求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0")。
2. 在ajax发送请求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")。
3. 在URL后面加上一个随机数："fresh="+Math.random()。
4. 在URL后面加上时间戳： "nowtime="+new Date().getTime()。
5. 如果是使用jQuery，直接使用 $.ajaxSetuo({cache:false})就可以了。这样页面的所有ajax都会执行这条语句就是不需要保存缓存记录。