简单聊一聊原生Ajax与JQuery Ajax

2023年5月19日下午8:56 • JavaScript

一、原生Ajax

什么是原生Ajax？

Ajax是Asynchronous JavaScript and XML的缩写，即异步的JavaScript和XML。AJAX 允许网页在不重新加载的情况下更新部分内容。原生Ajax是指使用JavaScript的XMLHttpRequest对象操作Web服务器执行异步数据交换（通常与JSON和XML数据格式一起使用）的技术。

原生Ajax的优点：

原生Ajax无需安装任何插件和框架，开发成本较低；
可以完全控制请求及响应的过程。

实现原生Ajax的关键步骤：

创建XMLHttpRequest对象：var xhr = new XMLHttpRequest();
设置请求参数：

xhr.open('GET', url, true);// 指定请求方式、请求地址、是否异步处理
xhr.onreadystatechange = function() {// readyState变化时的回调函数
    if(xhr.readyState === 4) {// 请求已完成
        if(xhr.status === 200) {// 请求成功
            // 处理响应的数据
        }else {// 请求失败
            console.error('Error：' + xhr.status);
        }
    }
}

// 设置请求头（默认情况下，原生AJAX不会自动设置请求头，如果需要设置请求头，在调用open()之后但在调用send()之前设置）
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");

发送请求：xhr.send(data);

示例1：原生Ajax获取JSON格式的数据

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>原生AJAX获取JSON格式的数据</title>
<script>
function getJSON() {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'data.json', true);
    xhr.onreadystatechange = function(e) {
        if(xhr.readyState === 4) {
            if(xhr.status === 200) {
                const data = JSON.parse(xhr.responseText);
                console.log(data);
            }else {
                console.error(xhr.statusText);
            }
        }        
    }
    xhr.send();
}
</script>
</head>
<body>
<button onclick="getJSON()">获取数据</button>
</body>
</html>

示例2：原生Ajax上传文件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>原生AJAX上传文件</title>
</head>
<body>
<h3>上传文件：</h3>
<form enctype="multipart/form-data">
    <input type="file" name="file" id="file">
    <button onclick="uploadFile()">上传</button>
</form>
<div id="result"></div>
<script>
function uploadFile() {
    const xhr = new XMLHttpRequest();
    const formData = new FormData();//构造表单数据对象
    const file = document.getElementById("file").files[0];//获取上传的文件
    formData.append('file', file);
    xhr.open('POST', 'upload.php', true);
    xhr.onreadystatechange = function(e) {
        if(xhr.readyState === 4) {
            if(xhr.status === 200) {
                const data = xhr.responseText;
                document.getElementById('result').innerHTML = data;
            }else {
                console.error(xhr.statusText);
            }
        }        
    }
    xhr.send(formData);//发送表单数据
}
</script>
</body>
</html>

二、JQuery Ajax

什么是JQuery Ajax？

JQuery Ajax是基于JQuery的AJAX模块，可以通过JQuery的方法轻松地发送Ajax请求。

JQuery Ajax的优点：

简单易用，代码量少；
隐藏了浏览器兼容性问题和异步调用的复杂性；
可以使用Promise等功能，简化回调函数的编写。

实现JQuery Ajax的关键步骤：

选择请求方式:
$.get(url, data, success(data,status,xhr), dataType)
$.post(url, data, success(data,status,xhr), dataType)
$.ajax(settings)
设置请求参数：
url: 待请求的地址
data: 待发送Key/value参数，可直接发送对象，jQuery会自动将对象序列化为对象字符串格式发送到服务器上
success(data, textStatus, jqXHR): 请求成功后的回调函数
dataType: 返回数据类型，支持xml、json、script、或者html，默认自动判断（经常用json）

示例3：JQuery Ajax获取JSON格式的数据

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery AJAX获取JSON格式的数据</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$.getJSON('data.json', function(data) {
    console.log(data);
});
</script>
</head>
<body>
</body>
</html>

示例4：JQuery Ajax上传文件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery AJAX上传文件</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<h3>上传文件：</h3>
<form enctype="multipart/form-data">
    <input type="file" name="file" id="file">
    <button id="uploadBtn">上传</button>
</form>
<div id="result"></div>
<script>
$(function(){
    $("#uploadBtn").click(function(){
        var formData = new FormData();
        var file = $('#file')[0].files[0];
        formData.append("file", file);
        $.ajax({
            url: 'upload.php',
            type: 'POST',
            data: formData,
            contentType: false,//不要设置成multipart/form-data，因为这样jquery会帮我们生成一个boundary，但是服务器无法解析
            processData: false,// 不需要对数据做任何处理
            success:function(data) {
                $('#result').html(data);
            },
            error:function(statusText) {
                console.log(statusText);
            }
        });
    });
})
</script>
</body>
</html>

以上是"简单聊一聊原生Ajax与JQuery Ajax"的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：简单聊一聊原生Ajax与JQuery Ajax - Python技术站