ajax详解(逆战班)

ajax详解

什么是ajax?

• AJAX 是一种用于创建快速动态网页的技术
• AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。(重点)
• Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术

ajax的优点与缺点

ajax的优点

• 能在不更新整个页面的前提下实现局部更新
• 提升 Web 程序的性能（按需传递数据）
• 减轻服务器和带宽的负担

ajax的缺点

• AJAX没有Back(后退)和History（前进）功能，即对浏览器机制的破坏
• 对搜索引擎的支持比较弱（AJAX会增大网络数据的流量，从而降低整个系统的性能）

ajax常用状态码

状态码	说明
1**	请求收到，继续处理
2**	操作成功收到，分析、接受
3**	完成此请求必须进一步处理
4**	请求包含一个错误语法或不能完成
5**	服务器执行一个完全有效请求失败
101	客户要求服务器根据请求转换HTTP协议版本
200	交易成功
304	客户端已经执行了GET，但文件未变化
306	前一版本HTTP中使用的代码，现行版本中不再使用
400	错误请求，如语法错误
403	请求不允许
404	没有发现文件、查询或URl
405	用户在Request-Line字段定义的方法不允许
500	服务器产生内部错误
505	服务器不支持或拒绝支请求头中指定的HTTP版本

封装ajax请求

get请求

const util = {

    /**
   //    * ajax get请求
   //    * @param {string} url 请求的地址
   //    * @param {object} query 请求所要携带的参数
   //    * @param {function} fn 请求数据返回之后的回调
   //    * @param {boolean}  [isJson] 请求的数据是否为json，默认为true
   //    */
    get(url, query, fn, isJson = true) {
        //判断是否传入参数
        if (query) {
            url += '?'
            for (var key in query) {
                url += `${key}=${query[key]}&`
            }
            //多出一个&，所以截取
            url = url.slice(0, -1)
        }

        //1、创建一个核心对象
        let xhr = new XMLHttpRequest();
        //2、打开
        xhr.open('get', url)
        //3、send 发送请求
        xhr.send();
        //4、监听状态xhr.onreadystatechange
        xhr.onreadystatechange = function () {
            //判断是否响应
            if (xhr.readyState === 4) {
                //代表数据是否正确响应
                if (xhr.status === 200) {
                    let respText = isJson ? JSON.parse(xhr.responseText) : xhr.responseText;
                    // 逻辑短路，fn有效才调用
                    fn && fn(respText)
                }
            }
        }
    }
}

 let btu = document.getElementById('btu')
    btu.onclick = function () {
        util.get('http://www.xiongmaoyouxuan.com/api/tab/1?start=0', null, success => {
            console.log(success)
        })

    }