使用原生JavaScript写AJAX实例是一个非常常见的前端开发技巧。下面是该攻略的完整步骤:
一、定义AJAX对象
使用原生JavaScript实现AJAX请求需要创建一个XMLHttpRequest对象(简称XHR)。使用XHR对象来与服务器交互数据,可以不用刷新页面就能更新数据。创建XHR对象的代码如下:
let xhr = new XMLHttpRequest();
二、实现一个AJAX请求
当XHR对象创建成功后,我们需要使用open函数打开一个请求连接,然后通过send函数发送一个GET或POST请求,如下所示:
let xhr = new XMLHttpRequest();
xhr.open('GET', 'url地址', true);
xhr.send();
其中,第一个参数是请求的类型,可以是 "GET" 或 "POST"。第二个参数是请求的URL地址。第三个参数指定了请求是否异步处理。如果这个参数是true(默认),JavaScript会继续执行,而不等待来自服务器的响应。
发送一个POST请求的代码如下:
let xhr = new XMLHttpRequest();
xhr.open('POST', 'url地址', true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send('name1=value1&name2=value2');
上述代码中,setRequestHeader 函数设置了 HTTP 请求头部信息。send() 函数之前,需要将参数格式化成类似name=value的形式,然后才能发送。
三、监听AJAX事件并处理响应
当XHR对象接收到服务器返回的响应后,我们需要监听XHR对象的readystatechange事件,并处理响应,如下:
let xhr = new XMLHttpRequest();
xhr.open('GET', 'url地址', true);
xhr.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
//TODO: 处理成功响应
} else if (this.readyState === 4 && this.status !== 200) {
//TODO: 处理错误响应
}
};
xhr.send();
在 onreadystatechange 函数中,我们需要检查readyState和status属性,以确定服务器是否成功响应。readyState 为 4 表示请求已完成,而status 为 200 表示响应成功。
下面给出一个完整的示例:
let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.github.com/users/octocat', true);
xhr.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send();
以上示例是从GitHub的API中获取用户octorcat的JSON数据,并将其打印到控制台。
再给出一个POST请求的示例:
let xhr = new XMLHttpRequest();
xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts', true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 201) {
console.log(xhr.responseText);
} else if (this.readyState === 4 && this.status !== 201) {
console.log('请求出错');
}
};
xhr.send('title=foo&body=bar&userId=1');
以上示例是向JSONPlaceholder发送一个包含标题、主体和用户ID的POST请求,并将响应打印到控制台。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:使用原生js写ajax实例(推荐) - Python技术站