ajax学习笔记（二）
1、什么是Ajax？
1）简述：
ajax是一种创建交互网页应用的一门技术。可以实现发送http请求获取数据的操作。
2）目标：
无刷新加载页面。
3）必要性：
解决多余无用的网络请求
2、ajax的优缺点
优点：1）实现局部更新（无刷新状态下）
2）减轻了服务器端的压力
缺点：1）破坏了浏览器前进和后退机制（因为ajax自动更新机制）
2）一个Ajax请求多了，也会出现页面加载慢的情况。
3）搜索引擎的支持程度比较低。
4）ajax的安全性问题不太好（可以用数据加密解决）
3、HTTP请求
GET：用于获取数据，GET是在URL上传递数据（网址后面的东西），存储量较少，安全系数比较低。
POST：用于上传数据，POST安全性一般比（GET好一些），容量几乎是无限（多用于表单）。
4、Ajax的使用
1）创建ajax；
2）连接服务器；
3）发送请求；
4）接受返回值；
1)创建ajax
创建ajax必须考虑兼容性处理，
IE6以上：new XMLHttpRequest()、
IE6：new ActiveXObject("Microsoft.XMLHTTP")
兼容处理:
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
} else{
xhr = new ActiveXObject("Mricosoft.XMLHTTP");
}
2）连接服务器
xhr.open（"请求方式（GET/POST）"，url路径，“异步/同步”）
a、参数一：请求方式（GET|POST）
b、参数二：地址（url）
c、参数三：是否为异步（true|false）-----默认为true
当请求方式为POST的时候，代码写法如上
当请求方式为GET的时候，使用xhr.open（"请求方式（GET/POST）"，url路径 + “？”请求数据 + ，“异步/同步”）
3）发送请求
xhr.send（）发送请求
当请求方式为GET的时候，发送请求为xhr.send(null).
当请求方式为POST的时候，发送请求为xhr.send(请求数据)。
使用POST的时候必须在xhr.send（请求数据）上面添加：
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
4）接受返回值---事件
1）readystatechange事件：当请求被发送到服务器时，我们需要执行一些基于响应的操作。
xhr.onreadystatechange = function( ){ }
a、请求状态：（ readyState ）
0（未初始化）open还没有调用；
1（载入）已经调用了send（）正在发送请求；
2（载入完成）send方法已经完成 已经收到了全部的响应内容
3（解析）正在解析响应内容
4（完成）响应内容解析完成 可以在客户端用了
b、返回请求的结果码：（ status ）
200（成功）
404（未找到）
返回5**（5开头）（服务器错误）
2）onload事件：只有当请求状态为4的时候执行
xhr.onload = function( ){ }
3）onprogress事件：进度条
xhr.onprogress = function( ){ }
5、关于封装：
避免紧密耦合，参数在逻辑中可以进行判断.
原则：封装的ajax，在使用时一定不能去更改封装内部的东西，把可能更改的所有内容、功能都提取成参数。
1）提取参数：不一样的东西，提取成参数。 ---路径=>变量，功能=>函数
2）提取参数的作用：保证函数的复用性 => 当使用函数的时候，不进行变更就可以实现功能。
function GetAjax(url,callback){
var xhr=new XMLHttpRequest();
xhr.open("GET",url);
xhr.send(null);
xhr.onload=function(){
if(xhr.state===200){
callback(xhr.response);
}
}
}
6、关于封装问题
1)ajax执行顺序：
a、因为ajax的回调函数执行的顺序因为网络环境的问题，是不可控的，
b、为了解决这个问题，可以使用函数嵌套函数，但是这种方式会造成回调地狱，
c、解决回调地狱的方式：promise
7、promise -----详情见Promise
8、AJAX的Promise封装
1）GET方式：
function GetAjax(url,callback){
return new Promise(function(resolve,reject){
var xhr=new XMLHttpRequest();
xhr.open("GET",url);
xhr.send(null);
xhr.onload=function(){
if(xhr.state===200){
resolve(xhr.response);
}
}
})
}
2）POST方式：
function GetAjax(url,data){
return new Promise(function(resolve,reject){
var xhr=new XMLHttpRequest();
xhr.open("POST",url);
xhr.setRequestHeader("Content-Type","application/x-www-from-urlencoded")
xhr.send(data);
xhr.onload=function(){
if(xhr.state===200){
resolve(xhr.response);
}
}
})
}
9、小案例
案例一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ajax封装问题</title>
</head>
<body>
<button id="btn1">数据一</button>
<button id="btn2">数据二</button>
<p class="txt">我是来装载数据的</p>
<script>
var otxt=document.querySelector(".txt")
var oBtn1=document.querySelector("#btn1");
var oBtn2=document.querySelector("#btn2");
oBtn1.onclick=function(){
GetAjax("./json/data1.json",function(res){
otxt.innerHTML=res;
});
}
oBtn2.onclick=function(){
GetAjax("./json/data2.json",function(res){
otxt.innerHTML=res;
});
}
function GetAjax(url,callback){
var xhr=new XMLHttpRequest();
xhr.open("GET",url);
xhr.send(null);
xhr.onload=function(){
if(xhr.status===200){
callback(xhr.response);
}
}
}
</script>
</body>
</html>
演示结果：
