Ajax
原文链接：https://blog.csdn.net/jeft_hai/article/details/84782318
概念
概念：页面无刷新数据异步请求操作；Asynchronous JavaScript and XML
为什么使用ajax:(ajax的优点）
局部刷新；
优化了浏览器与服务器之间的传输，减少了不必要的数据返回，减少了带宽占用；
ajax引擎在客户端进行，承担部分服务器的工作，减少了服务器端的压力；
ajax的缺点
ajax不支持浏览器back按钮。
安全问题 AJAX暴露了与服务器交互的细节。
对搜索引擎的支持比较弱。
破坏了程序的异常机制。
不容易调试。
请简单介绍XmlHttpRequest：
XmlHttpRequest可以使JavaScript向服务器提出请求并处理响应，而不阻塞用户。
通过XMLHttpRequest对象，Web开发人员可以在页面加载以后进行页面的局部更新。
JavaScript Ajax
1. 创建xhr;
2. 响应函数;
3. 制定方法（get,open）;
4. 发送请求（send）;
1.
var xhr = new XMLHttpRequest();
2.
xhr.onreadystatechange = function(){
if(xhr.readystate === '4' && xhr.status === '200'){
alert(xhr.responseText);
}
}
3.
xhr.open('GET',url,true)
4.
xhr.send()
}
进阶
esponseText： 获得字符串形式的响应数据。
response和responseText 的用法一样。
readyState ：存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
?status ：
500 ：服务器报错
200: “OK”
404: 未找到页面
301 永久重定向；
302 临时重定向；
303 临时重定向 GET方法；
304 从服务器获取缓存内容；
var Ajax={
get: function(url, fn) {
// XMLHttpRequest对象用于在后台与服务器交换数据
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function() {
// readyState == 4说明请求已完成
if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) {
var ajax1=JSON.parse (http.responseText); //json转化字符串
console.log(ajax1);
// 从服务器获得数据
fn.call(this, xhr.responseText);
}
};
xhr.send();
},
// datat应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
post: function (url, data, fn) {
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
// 添加http头，发送信息至服务器时内容编码类型
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
fn.call(this, xhr.responseText);
}
};
xhr.send(data);
}
}注释：
- open(method, url, async) 方法需要三个参数:
method：发送请求所使用的方法（GET或POST）；与POST相比，GET更简单也更快，并且在大部分情况下都能用；然而，在以下情况中，请使用POST请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
url：规定服务器端脚本的 URL(该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）)；
async：规定应当对请求进行异步（true）或同步（false）处理；true是在等待服务器响应时执行其他脚本，当响应就绪后对响应进行处理；false是等待服务器响应再执行。
send() 方法可将请求送往服务器。
onreadystatechange：存有处理服务器响应的函数，每当 readyState 改变时，onreadystatechange 函数就会被执行。
readyState：存有服务器响应的状态信息。
responseText：获得字符串形式的响应数据。
setRequestHeader()：POST传数据时，用来添加 HTTP 头，然后send(data)，注意data格式；GET发送信息时直接加参数到url上就可以，比如url?a=a1&b=b1。
ajax 的异步和同步
ajax同步
意味着此时请求服务器后，JS代码不再继续执行，等待服务器返回后才继续往下执行。
我的理解是一种线性执行的方式，执行的流程不能跨越。一般用于流程性比较强的程序，我们做的用户登录功能也是同步处理的，必须用户通过用户名和密码验证后才能进入系统的操作
ajax异步
意味着此时请求服务器后，JS代码继续执行，不管服务器什么时候返回。
同步处理就是，说话后在吃饭，吃完饭后在看手机，必须等待上一件事完了，才执行后面的事情
比方说一个人边吃饭，边看手机，边说话，就是异步处理的方式。
异步的实现：使用回调函数callback（）
什么是回调函数？
回调函数是另外某件事结束时执行的一个函数。在Ajax中，回调函
数就是服务器对一个请求对象作出响应时调用的函数。浏览器会在
某个时刻”回调”这个函数。
每次服务器响应请求时就会由浏览器调用回调函数，即使此时服务器并没有完全处理完请求。大多数服务器都会做多次响应，指示接收到请求，或者正在处理请求，或者已经处理完请求。
就是因为这个原因，这个请求属性才被命名为onreadystatechange
每次服务器响应一个请求时，它会把请求对象readyState属性设置为一个不同的值。所以我们要特别注意这个属性，来确定服务器何时处理完我们发送给它的请求。
异步的回调函数使用
var http =new XMLHttpRequest();
http.open("get","txt/ajax.txt",true);
http.send();
function showdata(callback){
http.onreadystatechange =function(){
if(http.readyState ==4 && http.status ==200){
callback (http.response);
}
}
}
showdata (function(data){
console.log(data);
})ajax的同步
以下这个小例子只能输出2，看出了同步只能等待服务器执行后才能往下执行代码。
var http1=new XMLHttpRequest ();
http1.open("get","./txt/ajax.txt",false);
http1.send();
http1.onreadystatechange=function(){
if(http1.readyState==4 && http1.status==200){
console.log(1);
}
};
console.log(2);
跨域
什么是跨域：
浏览器具有同源策略，一个脚本只能读取来自同一来源的窗口与文档的属性；
同一来源：主机、协议、端口号一致；
跨域方法：
jsonp
jsonp是一种非正式传输协议；
该协议允许用户传递一个callback给服务端，然后服务器端返回数据时会将这个callback参数作为函数名来包裹JSON数据；
（img/link/script -》 允许跨域的三个标签）
nginx反向代理
CORS
后端：设置Access-Control-Allow-Origin
缓存：
当第一次发送请求，http返回200的状态码，
如果没有关闭缓存请求的话（没标明不使用缓存，下述）则会在返回头中返回包含last-Modified以及Etag和Expires的字段（这些字段下面慢慢说），然后将文件保存在Cache目录下；
当后续请求该文件时候，先在本地查找该资源,如果在本地缓存找到对应的资源,但是不知道该资源是否过期或者已经过期, 则发一个http请求到服务器,然后服务器判断这个请求,
如果请求的资源在服务器上没有改动过,则返回304, 让浏览器使用本地找到的那个资源
而如果当服务器发现请求的资源已经修改过,或者这是一个新的请求(本地无对应资源),服务器则返回该资源的数据,并且返回200,
当然这个是指找到资源的情况下,如果服务器上没有这个资源,则返回404
经过上面的流程梳理,我们基本了解整个缓存处理过程，不过对于前端来说，我们需求无非就是使用缓存或者不使用缓存，在了解下面内容之后我们再根据原理去慢慢实现我们的需求。
状态码：301 永久重定向；302 临时重定向；303 临时重定向 GET方法；304 从服务器获取缓存内容；
JQuery Ajax
https://www.cnblogs.com/Renyi-Fan/p/9583304.html
$(function(){
//请求参数
var list = {};
//
$.ajax({
//请求方式
type : "POST",
//请求的媒体类型
contentType: "application/json;charset=UTF-8",
//请求地址
url : "http://127.0.0.1/admin/list/",
//数据，json字符串
data : JSON.stringify(list),
//请求成功
success : function(result) {
console.log(result);
},
//请求失败，包含具体的错误信息
error : function(e){
console.log(e.status);
console.log(e.responseText);
}
});
});
