【Ajax】笔记-Ajax案例准备与请求基本操作

// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
 
// 准备要发送的数据
var urlEncodedData = '';
var urlEncodedDataPairs = [];
var name = encodeURIComponent('Your Name');
var age = encodeURIComponent('100');
urlEncodedDataPairs.push('name=' + name);
urlEncodedDataPairs.push('age=' + age);
urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+');
 
// 配置请求
xhr.open('POST', 'https://example.com/api/data');
 
// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 
// 监听请求状态变化
xhr.onload = function() {
    if (this.status == 200) {
        // 请求成功
        console.log(this.responseText);
    } else {
        // 请求失败
        console.error(this.statusText);
    }
};
 
// 发送请求
xhr.send(urlEncodedData);

这段代码演示了如何使用原生JavaScript创建一个AJAX POST请求，并发送URL编码后的数据到服务器。代码中包含了创建XMLHttpRequest对象、准备数据、设置请求、监听响应和发送请求的全过程。