Ajax请求

Ajax请求

什么是Ajax请求
Ajax是一种无需加载整个网页的情况下，能够更新部分网页的技术。
优点

1. 提升浏览器的加载速度
2. 实现了网页的局部刷新
3. 用于表单验证，增强用户的体验
4. 不需要插件的支持，原生 js 就可以使用

缺点

1. 因为Ajax自动更新机制，所以破坏了浏览器的前进和后退机制
2. 一个Ajax请求次数多了，也会出现浏览器页面加载缓慢的情况
3. Ajax的安全性问题不太好，可以用数据加密来解决这个问题

Ajax的用处

1. Ajax用于创造动态性更强的应用程序
2. Ajax可用于与数据进行动态通信
3. Ajax可用于与HTML文件进行交互通信

HTTP请求

• GET请求：用于获取数据，GET是从url上传递数据的（也就是网址后面的东西）存储数量比较少，明文发送 ，安全性能比较低，GET没有请求主体，使用xhr.send(null)发送请求
• POST请求：用于上传数据，POST的安全性能一般来说比GET要好，容量几乎是无限的，多用于表单,使用xhr.send(“name=abc&age=10”)

GET和POST的区别

语义化不一样

GET 倾向于从服务器获取数据
POST 倾向于向服务器提交数据

传递参数的方式

GET 请求直接在地址栏后面拼接
POST 请求在请求体里面传递

参数的大小限制

GET 请求一般不大于 2KB
POST 请求理论上没有上限

缓存能力

GET 会被浏览器主动缓存
POST 不会被浏览器主动缓存

安全性能

GET 请求相对安全性比较低
POST 请求相对安全性比较高

封装Ajax

function ajax(ops){
    ops.type = ops.type || "get";
    ops.data = ops.data || "";
    // ops.url = ops.type=="get" ? ops.url + "?" + ops.data : ops.url;
    if(ops.type=="get"){
        // 在get请求时，使用时间戳避免，缓存问题
        let t = new Date().getTime();
        ops.url = ops.url + "?__qft="+ t + "&" + ops.data;
    }
    var xhr = new XMLHttpRequest();
    xhr.open(ops.type, ops.url);
    if(ops.type == "get"){
        xhr.send();
    }else{
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.send(ops.data);
    }
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && xhr.status === 200){
            ops.success(xhr.responseText);
        }
    }
}

兼容处理

创建Ajax请求的兼容处理
// 标准浏览器
let xhr = new XMLHttpRequest()

// IE 低版本
let xhr = new ActiveXObject(‘Microsoft.XMLHTTP’)

Ajax接收响应的兼容处理
// 标准浏览器
xhr.onload = function () {
  console.log(xhr.responseText)
}
// IE 低版本
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText)
  }
}