<think>好的，用户现在想用
Ajax发送GET
请求并处理
服务器返回的
数据。之前他们提供了两个引用，一个是
POST请求的例子，另一个是GET
请求的示例。我需要结合这两个例子，给出一个清晰的解决方案。
首先，用户明确说想发送GET
请求，所以应该参考引用[2]中的GET示例。引用[2]里的代码用了XMLHttpRequest对象，设置了open方法为GET，并带有查询参数。不过用户可能需要更详细的步骤说明。我需要分步骤讲解，包括创建XHR对象、初始化
请求、发送
请求、处理响应这几个部分。同时要注意处理可能出现的兼容性问题，比如旧版IE的ActiveXObject，不过现在可能不太需要，但可以提一下。
处理
服务器返回的
数据部分，用户之前的回答里提到了JSON和XML的处理，但这次用户可能只需要基础的处理，比如responseText。不过最好还是涵盖JSON解析的情况，因为常见。还要注意引用标记，比如在步骤中提到设置
请求头和发送的时候，引用对应的例子。比如在初始化
请求时，引用[2]中的例子是直接在URL里加参数，而
POST是在send里发送
数据，但这里用户需要GET，所以参数在URL里。另外，用户可能希望代码示例是完整的，比如包括事件监听的绑定，像onreadystatechange的处理，以及状态码检查。需要确保代码示例中的状态判断正确，比如readyState为4，status为200。可能还需要提到现代的方法，比如
使用fetch API，但用户的问题是关于
Ajax的，所以重点在XMLHttpRequest。不过可以简要对比，作为相关问题中的一个问题。
最后要生成相关问题，参考之前的例子，比如如何处理错误、JSON解析问题、参数传递等。确保问题与当前主题相关，并且能帮助用户深入理解。</think>### 如何用
Ajax发送GET
请求并处理
数据
#### 一、基础实现步骤
1. **创建XMLHttpRequest对象**
使用`XMLHttpRequest`构造函数创建通信对象，兼容旧版IE需特殊处理[^2]：
```
javascript
let xhr;
if
(window.XMLHttpRequest
) {
xhr = new XMLHttpRequest
(); // 现代浏览器
} else {
xhr = new ActiveXObject
("Microsoft.XMLHTTP"
); // IE5/6
}
```
2. **初始化
请求**
通过`open
()`方法设置
请求类型为GET，并指定目标URL（参数直接拼接在URL中）[^2]：
```
javascript
const params = new URLSearchParams
({ age: 18, name: "John" }
);
xhr.open
("GET", `http://api.example.com/data?${params}`, true
); // 异步
请求
```
3. **发送
请求**
调用`send
()`方法
发起请求，GET
请求无需传递
请求体
数据[^2]：
```
javascript
xhr.send
(); // 参数已包含在URL中
```
4. **处理响应
数据**
监听`onreadystatechange`事件，验证状态后处理
数据：
```
javascript
xhr.onreadystatechange = function
() {
if
(xhr.readyState === 4
) { //
请求完成
if
(xhr.status >= 200 && xhr.status < 300
) { // HTTP成功状态码
const data = JSON.parse
(xhr.responseText
); // 解析JSON
数据
console.log
("
服务器返回:", data
);
} else {
console.error
("
请求失败，状态码:", xhr.status
);
}
}
};
```
#### 二、完整代码示例
```html
<button id="fetchBtn">获取
数据</button>
<div id="output"></div>
<script>
document.getElementById
("fetchBtn"
).addEventListener
("click", function
() {
const xhr = new XMLHttpRequest
();
xhr.open
("GET", "https://api.example.com/users?id=123", true
);
xhr.onreadystatechange = function
() {
if
(xhr.readyState === 4
) {
if
(xhr.status === 200
) {
try {
const userData = JSON.parse
(xhr.responseText
);
document.getElementById
("output"
).innerHTML = `
用户名: ${userData.name}<br>
邮箱: ${userData.email}
`;
} catch
(e
) {
console.error
("JSON解析错误:", e
);
}
} else {
console.error
("
请求失败，状态码:", xhr.status
);
}
}
};
xhr.send
();
}
);
</script>
```
#### 三、关键注意事项
1. **URL参数编码**
使用`encodeURIComponent`处理特殊字符，防止URL注入：
```
javascript
const city = "New York&state=NY";
const safeCity = encodeURIComponent
(city
); // 输出: New%20York%26state%3DNY
```
2. **异步控制**
通过`Promise`封装实现链式调用：
```
javascript
function
ajaxGet
(url
) {
return new Promise
((resolve, reject
) => {
const xhr = new XMLHttpRequest
();
xhr.open
("GET", url
);
xhr.onload =
() => resolve
(JSON.parse
(xhr.responseText
));
xhr.onerror =
() => reject
(xhr.statusText
);
xhr.send
();
}
);
}
ajaxGet
("/api/data"
)
.then
(data => console.log
(data
))
.catch
(err => console.error
(err
));
```
#### 四、响应
数据处理技巧
|
数据类型 | 处理方法 | 示例场景 |
|----------|-----------------------------------|--------------------------|
| JSON | `JSON.parse
(xhr.responseText
)` | REST API接口
数据 |
| 纯文本 | 直接
使用`xhr.responseText` | 日志信息、简单状态返回 |
| XML | `xhr.responseXML`配合DOM操作 | 传统SOAP接口 |
---
###
超级会员免费看
本文介绍了使用jQuery的$.get(), $.post()和$.ajax()方法向服务器发起Ajax请求，特别是重点讲解了如何通过$.post()进行POST提交数据。详细阐述了各个方法的参数和用法，包括请求URL、携带数据及成功回调函数。"
103356926,8220036,Python列表统计与操作：count、index与sum,"['Python', '编程', '数据操作']
订阅专栏 解锁全文
扫一扫
1454
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
