AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。也就是实现前后端交互的功能。以下是使用AJAX的基本步骤和代码演示:
1.创建一个XMLHttpRequest对象:
var xhr = new XMLHttpRequest();
2. 初始化请求:
xhr.open('GET', 'https://api.example.com/data', true);
这里的第一个参数是请求类型(如GET、POST等),第二个参数是请求的URL(浏览器地址),第三个参数表示是否异步(true为异步(大多),false为同步)。
3.设置请求完成时的回调函数:
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// 请求成功,处理返回的数据
// 可以在这里对请求的数据进行处理
console.log(xhr.responseText);
}
};
4.发送请求数据:
(1)POST请求
xhr.send(obj);
在用这个方法的时候通常与这个方法**xhr.setRequestHeader()**一起用,也就是设置请求头的,代码演示:
xhr.setRequestHeader("Content-Type", "application/json") //设置请求的数据类型为json
xhr.send(JSON.stringify({
phone: mobile
}))
(2)GET请求
数据一般都在初始化请求里面的地址url中
示例:比如说我要向服务端传递一个mobile电话号,此时是GET请求就应该写在初始化请求里面的地址url中,如下所示第二个参数url
xhr.open('get', "http://192.168.1.9:3000/check-phone?phone="+mobile, true)
5.完整代码:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// 请求成功,处理返回的数据
console.log(xhr.responseText);
}
};
xhr.send();