AJAX（2） - 创建 XMLHttpRequest 对象

XMLHttpRequest 是 AJAX 的基础。

---

XMLHttpRequest 对象

所有当代欣赏器均支持 XMLHttpRequest 对象（IE5 和 IE6 利用 ActiveXObject）。
XMLHttpRequest 用于在后台与服务器互换数据。这意味着可以在不重新加载整个网页的环境下，对网页的某部门进行更新。

---

创建 XMLHttpRequest 对象

所有当代欣赏器（IE7+、Edge、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
创建 XMLHttpRequest 对象的语法：

1. var xhr = new XMLHttpRequest();

复制代码

老版本的 Internet Explorer （IE5 和 IE6）利用 ActiveX 对象：

1. var xhr = new ActiveXObject("Microsoft.XMLHTTP");

复制代码

为了应对所有的当代欣赏器，包罗 IE5 和 IE6（现在应该很少人利用了），请检查欣赏器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

1. var xmlhttp;
2. if (window.XMLHttpRequest) {
3.     //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
4.     xmlhttp=new XMLHttpRequest();
5. } else {
6.     // IE6, IE5 浏览器执行代码
7.     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
8. }

复制代码

创建一个 XMLHttpRequest 对象的示例：

1. // 创建 XMLHttpRequest 对象
2. var xhr = new XMLHttpRequest();
4. // 配置请求
5. xhr.open('GET', 'https://api.example.com/data', true);
7. // 设置请求头（如果需要的话）
8. // xhr.setRequestHeader('Content-Type', 'application/json');
10. // 定义回调函数
11. xhr.onload = function () {
12.     if (xhr.status >= 200 && xhr.status < 300) {
13.         // 请求成功，处理响应
14.         console.log('Response:', xhr.responseText);
15.     } else {
16.         // 处理错误
17.         console.error('Error:', xhr.statusText);
18.     }
19. };
21. // 处理网络错误
22. xhr.onerror = function () {
23.     console.error('Request failed');
24. };
26. // 发送请求
27. xhr.send();

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。