学习记录：原生封装AJAX

原生封装AJAX

1.什么是AJAX?
2.实现简单原理？
3.如何实现封装？
4.需要注意问题？
5.AJAX的优缺点？

AJAX

AJAX: Asynchronous Javascript And XML (异步的JS和XML)
是一种前后端数据交互的手段。

实现原理

基于Ajax的核心对象 xmlHttpRequest ，异步发送一个HTTP请求，去后端服务器获取数据，带回给前端浏览器，然后用javascript来操作DOM而对页面进行更新。

实现封装

函数封装原则：不变的固定写在函数内，变化的部分作为参数传入

AJAX发送流程

1. 初始化XHR
2. 调用该对象的 open 方法
3. 服务器响应处理（同步/异步）
4. 请求结束后，执行相关代码

此处封装一个函数，让函数帮忙发送AJAX，我们只需传入相关参数即可

 - [ ] List item

var QF = {
    get(url, data, callback) {
        // data是一个对象  假如用户传递的是 {a: 1, b: 2,c: 3, d: 4}
        // 我们要把它格式化成 a=1&b=2&c=3&d=4 这种querystring字符串
        var querystring = "";
        for (var i in data) {
            querystring += i + "=" + data[i] + "&"; 
        }
        querystring = querystring.slice(0, -1);
        // 1 初始化xhr
        var xhr = new XMLHttpRequest();
        // 2 监听状态
        xhr.onreadystatechange = function () {
        // xhr.readyState 是一个属性 共有5个值
        // 0  未初始化
        // 1  调用了open方法
        // 2  已经接收到响应头
        // 3  解析了一部分数据 不一定解析完毕
        // 4  解析完毕全部数据 数据可以使用了
            if (xhr.readyState === 4) {
                var obj = JSON.parse(xhr.responseText);
                callback(obj);
            }
        }
        // 3 open
        xhr.open("get" , url + "?" + querystring, true);
        // 4 send
        xhr.send();
    },

    post(url, data, callback) {
        var querystring = "";
        for (var i in data) {
            querystring += i + "=" + data[i] + "&";
        }
        querystring = querystring.slice(0, -1);
        // 1 初始化xhr 
        var xhr = new XMLHttpRequest();
        // 2 监听状态
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 304)) {
            	// State HTTP 状态码
                // 1开头的表示继续
                // 2开头的表示成功
                // 3开头的表示缓存或者重定向 
                // 4开头的表示资源错误
                // 5开头的表示服务器错误
                callback(JSON.parse(xhr.responseText));
            }
        }
        // 3 open
        xhr.open("post" , url, true);
        // 将请求头内容更改 改为表单的内容类型 
        xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded;charset=utf-8")
        // 4 send
        xhr.send(querystring);
    }
}

//在htm中引入封装好AJAX的js文件，然后传递参数就可以发送ajax了
var info = {username: "wanglaowu111", password: "123123123"};
        // QF.get("http://localhost/03.php", info, function(data) {
        //     console.log(1)
        // })

        QF.post('http://localhost/post.php', info, function(data) {
            console.log(data)
        });

注意问题

• send 负责往请求正文中添加数据 如果是post请求 就把数据往send 里传递
• AJAX不是一门技术，是一整套技术体系 包含HTML、CSS、DOM、BOM、JSON等
• AJAX兼容性很好，兼容到IE5

GET 和 POST 区别

GET:

没有请求正文
信息会挂在URL上，安全性不足
信息量不大，首地址栏的长度限制
触发方式多：img\video\a标签\表单\script标签\ajax

POST:

有请求正文
信息放在请求正文上，安全性较高
信息量没有限制
触发方式只有：表单\ajax

考虑兼容性

if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else if (window.ActiveXObject) {
                xhr = new ActiveXObject("Microsoft.XMLHttp");
            } else {
                throw new Error("您的浏览器不支持AJAX，请升级！");
            }

AJAX的优缺点

优点：
1.减少用户等待时间，提高用户体验
2.使用异步的方式与服务器通信，不需要中断操作
3.按需取数据，可以最大程度的减少冗余请求和响应
4.页面无需刷新，在页面内与服务器通信

缺点：
1.浏览器机制的破坏——干掉了Back和History功能
2.存在安全问题——如跨站点脚步攻击、SQL注入攻击等
3.对搜索引擎的支持比较弱。