原生js实现ajax方法(超简单)

2023年5月27日上午10:56 • JavaScript

下面是“原生js实现ajax方法(超简单)”的完整攻略。

步骤1：创建XMLHttpRequest对象

在JavaScript中要使用Ajax发送HTTP请求，必须先创建一个XMLHttpRequest对象。该对象提供了向Web服务器发送请求和接收响应的方法。

创建XMLHttpRequest对象：

let xmlhttp;
if (window.XMLHttpRequest){
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}else{
    // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

步骤2：设置请求参数

在发送Ajax请求之前，要设置请求参数和响应方式。

设置请求参数：

xmlhttp.open("GET","/ajax/test1.txt",true);
xmlhttp.send();

如果是POST请求，则需要设置请求头Content-Type和请求体数据：

xmlhttp.open("POST","/ajax/test1.txt",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name=John&age=18");

步骤3：处理响应结果

当Ajax请求发送后，服务器响应会触发xmlhttp对象的readystatechange事件。我们可以通过该事件来处理服务器返回的响应数据。

完整的Ajax请求：

let xmlhttp;
if (window.XMLHttpRequest){
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}else{
    // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

xmlhttp.open("GET","/ajax/test1.txt",true);
xmlhttp.send();

以上代码会将服务器返回的响应数据放入id为“myDiv”的元素中。

另外，Ajax请求是异步的，即浏览器不会等待服务器响应即可继续执行后面的代码。

示例1：Ajax请求获取JSON数据

以下示例通过Ajax请求获取JSON数据并将其渲染到页面上。

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Ajax请求获取JSON数据</title>
</head>
<body>
    <ul id="users"></ul>
    <script src="ajax.js"></script>
</body>
</html>

Ajax代码：

let xmlhttp;
if (window.XMLHttpRequest){
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}else{
    // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        let users = JSON.parse(xmlhttp.responseText);
        let html = '';
        for (let i = 0; i < users.length; i++) {
            let user = users[i];
            html += '<li>' + user.name + ': ' + user.age + '</li>';
        }
        document.getElementById('users').innerHTML = html;
    }
}

xmlhttp.open('GET', 'users.json', true);
xmlhttp.send();

示例2：Ajax提交表单数据

以下示例通过Ajax提交表单数据，实现无刷新提交，并将服务器返回的结果渲染到页面上。

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Ajax提交表单数据</title>
</head>
<body>
    <form id="myForm">
        <input type="text" name="username" placeholder="请输入用户名">
        <input type="password" name="password" placeholder="请输入密码">
        <button type="submit">登录</button>
    </form>
    <div id="result"></div>
    <script src="ajax.js"></script>
</body>
</html>

Ajax代码：

let form = document.getElementById('myForm');
form.addEventListener('submit', function(e){
    e.preventDefault();
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            document.getElementById('result').innerHTML = xhr.responseText;
        }
    };
    xhr.open('POST', 'login.php', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    let data = new FormData(form);
    let params = [];
    for (let pair of data.entries()) {
        params.push(pair[0] + '=' + pair[1]);
    }
    xhr.send(params.join('&'));
});

注意事项：

使用Ajax请求时，需要设置请求头Content-Type和请求体数据，如果不设置Content-Type，浏览器会默认设置为application/x-www-form-urlencoded，导致Server端无法解析接收数据。而formData的数据格式并不是经典的key-value格式，而是multipart/Form-data格式，针对这种数据格式，php有处理函数。

$_POST = array(
    'username' => 'John',
    'password' => '123456'
);

new FormData()方法允许我们把javascript的key-value对象转化为FormData对象，这个对象可以直接以post请求方式发送数据，不需要使用上文的方法把参数通过&拼接在url后传输。

好了，以上就是“原生js实现ajax方法(超简单)”的完整攻略，希望对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：原生js实现ajax方法(超简单) - Python技术站