Ajax--记录

一、什么是Ajax技术

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。它是一套综合了多项技术的浏览器端网页开发技术。这些技术包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest。通过在浏览器与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新，减轻了服务器的负担，增强用户体验。但是也存在缺陷，AJAX大量使用了Javascript和AJAX引擎，而这个取决于浏览器的支持；AJAX更新页面内容的时候并没有刷新整个页面，因此，网页的后退功能是失效的；对搜索引擎支持不好。

 

二、Ajax请求--get四部曲、post五部曲

1、get

 

<script>

    // get四部曲：                                                                   
    const xhr = new XMLHttpRequest();
    xhr.open('get', "url地址?参数名1=参数值1&参数名2=参数值2")
    xhr.send();
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            let data = JSON.parse(xhr.responseText);
        }
    }
</script>

 

2、post

 

 // post五部曲：
    const xhr = new XMLHttpRequest();
    xhr.open('post', "url地址")
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    xhr.send('参数名1=参数值1&参数名2=参数值2')
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            let data = JSON.parse(xhr.responseText)
        }
    }

3、Ajax封装--无注释版

 

  /*
    Ajax请求封装
    Created By Lilian Yang On 2021/01/06
*/

function paraStr(data) {
    let str = '';
    for (let key in data) {
        str += '&' + key + '=' + data[key]
    }
    return str.substr(1);
}
$http = {
    ajax: function (options) {
        const defaultValue = {
            type: 'get',
            data: {},
        }
        const parameter = Object.assign({}, defaultValue, options);
        const type = parameter.type.toLowerCase();
        const url = parameter.url;
        const data = parameter.data;
        const success = parameter.success;
        const xhr = new XMLHttpRequest();
        let strParameter = paraStr(data);
        if (type === 'get') {
            xhr.open(type, strParameter ? url + '?' + strParameter : url);
            xhr.send();
        }
        if (type === 'post') {
            xhr.open(type, url);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.send(strParameter);
        }
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                let data = JSON.parse(xhr.responseText);
                success(data)
            }
        }
    },
    get: function (url, success) {
        this.ajax({
            type: 'get',
            url: url,
            success: success,
        })
    },
    post: function (url, data, success) {
        this.ajax({
            type: 'post',
            url: url,
            data: data,
            success: success,
        })
    },

}

 

4、Ajax封装--注释版

 

   /*
    Ajax请求封装
    Created By Lilian Yang On 2021/01/06
*/

// 对象拼接为参数所需的字符串
function paraStr(data) {
    let str = '';
    for (let key in data) {
        str += '&' + key + '=' + data[key]
    }
    return str.substr(1);
}
$http = {

    ajax: function (options) {
        // 配置默认参数
        const defaultValue = {
            type: 'get',
            data: {},
        }
        // 合并参数
        const parameter = Object.assign({}, defaultValue, options);

        // 获取每项参数
        const type = parameter.type.toLowerCase();
        const url = parameter.url;
        const data = parameter.data;
        const success = parameter.success;

        // 常见ajax
        const xhr = new XMLHttpRequest();

        // 对象转为字符串
        let strParameter = paraStr(data);

        // 判断
        if (type === 'get') {
            xhr.open(type, strParameter ? url + '?' + strParameter : url);     //拼接
            xhr.send();
        }
        // 判断
        if (type === 'post') {
            xhr.open(type, url);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');  //设置请求头
            xhr.send(strParameter);
        }

        // 监听状态变化   接收数据
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                let data = JSON.parse(xhr.responseText);
                success(data)
            }
        }
    },
    get: function (url, success) {
        // 调用上面的ajax
        this.ajax({
            type: 'get',    //默认配置请求类型为get
            url: url,
            success: success,
        })
    },
    post: function (url, data, success) {
        // 调用上面的ajax
        this.ajax({
            type: 'post',    //默认配置请求类型为post
            url: url,
            data: data,
            success: success,
        })
    },

}

 

　

5、调用操作

  <script>
        $http.ajax(
            {
                type: 'get',
                url: url,
                data: {
                    参数名1: 参数值1,
                    参数名2: 参数值2,
                },
                success: function (result) {
                    console.log('后台响应结果：', result);
                }
            }
        )
              $http.post(url,data,
            function (result) {
                console.log("后台响应数据：", result)
            })
       $http.get(url, function (result) {
            console.log("后台响应数据：", result);
        })
    </script>