Ajax学习笔记

2024-01-18 09:34:46

Ajax

它是浏览器提供的一套方法，可以实现页面无刷新更新数据（即实现在用户浏览网页的过程中，局部更新页面中的数据），提高用户浏览网站应用的体验。
注意：ajax技术需要运行在网站环境中生效，要能以localhost域名的方式打开页面。

Ajax应用场景

1.页面上拉加载更多数据
2.列表数据无刷新分页
3.表单项离开焦点数据验证
4.搜索框提示文字下拉列表

Ajax运行原理及实现

Ajax 相当于浏览器发送请求与接收响应的代理人，由Ajax帮助浏览器发送请求、接收服务器端响应到客户端的数据，当它接收到响应的数据，再使用dom方法将服务器端发送的数据内容添加到页面中，以实现边浏览页面边刷新数据，从而提高用户体验。

1.Ajax入门

//app.js
app.get('/first', (req, res) => {
    res.send('hello ajax');
});

//html文件的<script>标签中
        //1.创建ajax对象
        var xhr = new XMLHttpRequest();
        //2.告诉ajax对象向哪、以什么方式发送请求
        //open(请求方式，请求地址)
        xhr.open('get', 'http://localhost:8888/first');
        //3.发送请求
        xhr.send();
        //4.获取服务器端响应到客户端的数据
        //请求响应时间不确定，因此无法在send后直接拿到数据
        //此处用onload监听xhr事件
        xhr.onload = function() {
            //xhr.responseText保存服务器端返回给客户的数据
            console.log(xhr.responseText);
        }

2.服务器端响应的数据类型

实际开发中，服务器端大多数情况下会以 JSON 对象作为响应数据的格式。当客户端拿到响应数据时，要将 JSON 数据和 HTML 字符串进行拼接，然后将拼接的结果展示在页面中。

但是在 http 请求与响应的过程中，无论是请求参数还是响应内容，如果是对象类型，最终都会被转换为对象字符串进行传输。

因此我们最后需要对返回的数据使用JSON.parse()将 json 字符串转换为json对象。

Ajax错误处理

网络畅通，服务器端能接收到请求，服务器端返回的结果不是预期结果。
可以判断服务器端返回的状态码，分别进行处理。xhr.status 获取http状态码
网络畅通，服务器端没有接收到请求，返回404状态码。
检查请求地址是否错误。
网络畅通，服务器端能接收到请求，服务器端返回500状态码。
服务器端错误，找后端程序员进行沟通。
网络中断，请求无法发送到服务器端。
会触发xhr对象下面的onerror事件，在onerror事件处理函数中对错误进行处理。

封装ajax函数

1.将重复执行的代码封装：
（1）创建ajax对象
（2）配置ajax对象
（3）发送请求
（4）监听xhr对象下的onload事件，需要对http状态码进行判断，需要对响应数据类型进行判断

2.请求参数
（1）请求参数的位置：将请求参数传递到ajax函数内部，在函数内部根据请求方式的不同将请求参数放置在不同的位置（get放在请求地址的后面，post放在send方法中）
（2）请求参数传递的格式：用户传递json格式的数据更为方便，在ajax内部再进行字符串拼接以及转换处理
（3）根据请求参数类型响应对应数据格式

3.设置在调用ajax函数时部分参数的默认值

//ajax函数封装
function ajax(options) {
    //存储默认值
    var defaults = {
        type: 'get',
        url: '',
        data: {},
        header: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        success: function() {},
        error: function() {}
    }

    //对象覆盖,会影响原对象
    Object.assign(defaults, options);
    //1.创建ajax对象
    var xhr = new XMLHttpRequest();

    //拼接请求参数的变量
    var params = '';
    for (var attr in defaults.data) {
        params += attr + "=" + defaults.data[attr] + '&';
    }
    //截取参数最后的&符
    params = params.substr(0, params.length - 1);

    //判断请求参数,如果请求方式是get
    if (defaults.type == 'get') {
        defaults.url = defaults.url + '?' + params;
    }

    //2.配置ajax对象(请求方式、请求地址开始无法确定)
    xhr.open(defaults.type, defaults.url);

    //3.发送请求
    //判断请求参数,如果请求方式是post
    if (defaults.type == 'post') {
        //用户希望向服务器端传递的请求参数类型
        var contentType = defaults.header['Content-Type'];
        //设置请求参数格式的类型
        xhr.setRequestHeader('Content-Type', contentType);
        //判断用户希望向服务器端传递的请求参数类型
        if (contentType == 'application/json') {
            //向服务器端传递json格式参数
            xhr.send(JSON.stringify(defaults.data));
        } else {
            //向服务器端传递普通类型请求参数
            xhr.send(params);
        }
    } else {
        xhr.send();
    }

    //4.监听xhr对象下的onload事件
    //当xhr对象接收完响应数据后触发
    xhr.onload = function() {
        //获取响应头中的数据类型
        var dataType = xhr.getResponseHeader('Content-Type');
        //服务器端返回的数据
        var responseText = xhr.responseText;

        //如果响应类型包含json
        if (dataType.includes('application/json')) {
            //字符串转换成json格式对象
            responseText = JSON.parse(responseText);
        }

        if (xhr.status == 200) {
            //请求成功
            defaults.success(responseText, xhr);
        } else {
            //请求失败
            //xhr.responseText此时传递错误信息
            defaults.error(responseText, xhr);
        }
    }
}

//ajax函数使用
ajax({
    type: 'get', //请求方式
    url: 'http://localhost:8888/responseData', //请求地址
    data: {
        name: 'zhangsan',
        age: 20
    },
    header: {
        'Content-Type': 'application/json'
    },
    success: function(data) {
        console.log('success函数');
        console.log(data);
    },
    error: function(data, xhr) {
        console.log('这里是error函数' + data);
        console.log(xhr);
    }
});

码农公寓