当前位置：首页 > news >正文

原生javascript中的ajax通信技术

news 2025/7/27 22:43:31

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();