详解JavaScript原生封装ajax请求和Jquery中的ajax请求

什么是Ajax?

Ajax即“Asynchronous JavaScript And XML”，是一种异步的网页开发技术。通过Ajax技术，我们可以不用刷新整个页面，即可与服务器进行少量的数据的交互。

如何使用Ajax?

使用Ajax主要包含以下几个步骤：
1. 创建XMLHttpRequest对象
2. 绑定readystatechange事件处理函数
3. 指定请求方式、请求地址、是否异步、请求数据等参数
4. 发送异步请求
5. 在readystatechange事件处理函数中解析返回的数据

原生JavaScript封装ajax请求

以下是使用原生JavaScript封装ajax请求的示例代码：

function ajax(options) {
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if(xhr.readyState === 4 && xhr.status === 200) {
            options.success(xhr.responseText);
        } else {
            options.fail(xhr.responseText);
        }
    };
    xhr.open(options.type || "GET", options.url);
    xhr.send(options.data || null);
}

使用方法：

ajax({
    type: "POST",
    url: "/api/login",
    data: {username: "admin", password: "123456"},
    success: function (data) {
        console.log("登录成功: ", data);
    },
    fail: function (data) {
        console.error("登录失败: ", data);
    }
});

Jquery中的ajax请求

Jquery是一个著名的JavaScript库，其中最主要的功能就是简化操作DOM和发起Ajax请求的过程。下面是Jquery中发起Ajax请求的示例代码：

$.ajax({
    type: "POST",
    url: "/api/login",
    data: {username: "admin", password: "123456"},
    success: function (data) {
        console.log("登录成功: ", data);
    },
    error: function (xhr) {
        console.error("登录失败: ", xhr.responseText);
    }
});

和原生JavaScript封装ajax请求相比，Jquery更加简洁易用。使用Jquery中的ajax请求不仅能够省去大量的重复代码，还能够兼容各种浏览器。

Ajax的一些注意点

在使用Ajax进行开发时，需要注意以下几点：

遵守同源策略：即Ajax请求的地址必须与当前页面处于同一域名下，否则浏览器会报跨域的错误。
安全性：Ajax请求不适合拿来做敏感数据的传输，因为它很容易被篡改。
Ajax对搜索引擎不友好：如果页面采用了Ajax技术进行开发，那么搜索引擎只能获取到初始页面的内容，无法获取到通过Ajax动态加载的内容。

示例

下面给出一个完整的示例，模拟一个简单的留言板功能。点击“提交留言”按钮时，通过Ajax请求将留言发送到服务器，然后动态添加一条新的留言到页面中。

前端代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>留言板</title>
    <script src="./jquery.js"></script>
    <script>
        $(function () {
            $('#submitBtn').click(function () {
                $.ajax({
                    type: 'POST',
                    url: '/api/write-message',
                    data: {
                        'username': $('#username').val(),
                        'message': $('#message').val()
                    },
                    success: function (responseText) {
                        let data = JSON.parse(responseText);
                        if(data.code === 0) {
                            alert('留言成功!');
                            $('#username').val('');
                            $('#message').val('');
                            $('#messageList').prepend('<div class="message-item"><div class="username">' + data.username + ':</div><div class="message">' + data.message + '</div></div>');
                        } else {
                            alert('留言失败: ' + data.msg);
                        }
                    },
                    error: function (xhr) {
                        console.error(xhr.responseText);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <input type="text" id="username" placeholder="请输入用户名"/><br/>
    <input type="text" id="message" placeholder="请输入留言内容"/><br/>
    <button id="submitBtn">提交留言</button><br/>
    <div id="messageList"></div>
</body>
</html>

后端代码：

from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/api/write-message', methods=['POST'])
def write_message():
    username = request.form.get('username')
    message = request.form.get('message')
    if not username or not message:
        return jsonify({'code': 1, 'msg': '用户名或留言内容为空'})
    # 将留言保存到数据库中
    # ...
    return jsonify({'code': 0, 'username': username, 'message': message})

if __name__ == '__main__':
    app.run()

在上面的示例中，当用户点击“提交留言”按钮时，页面会发送一个POST请求到/api/write-message接口。接口会将接收到的用户名和留言内容保存到数据库中，然后返回一个JSON格式的数据表示留言是否成功。如果留言成功，前端会动态添加一条新的留言到页面中。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：详解JavaScript原生封装ajax请求和Jquery中的ajax请求 - Python技术站