从原生JavaScript创建网络请求：处理参数与发起GET、POST请求

一、背景

在使用原生JavaScript发起网络请求时，我们经常需要将用户传递的参数对象转化为查询字符串格式，以便提交给服务器。
本文将介绍如何通过原生JavaScript处理用户传递的参数，并正确发起GET和POST请求。

二、处理用户参数

为了将用户传递的参数对象转化为查询字符串，我们需要定义一个`resolveData`函数。
该函数接收一个参数对象，遍历对象中的键值对，将键和值用=进行拼接，然后将所得的值添加到一个空数组中。
最后，用&符号将数组的每一项进行分割，并返回结果字符串。

```javascript
function resolveData(params) {
let arr = []; // 用于存储拼接后的键值对
for (let key in params) {
if (params.hasOwnProperty(key)) { // 确保只遍历对象自身的属性，不包括原型链上的属性
arr.push(key += + params[key]); // 将键和值用=拼接，并添加到数组中
}
}
return arr.join(&);// 用&分割数组，并返回结果字符串
}
```
三、发起GET请求

接下来，我们需要定义一个`itheima`函数，用于接收用户传递的配置对象参数，并创建XMLHttpRequest对象。
将用户传递的参数传递给`resolveData`函数进行处理，得到查询字符串。
再根据配置对象中的method字段判断是GET请求还是POST请求，并调用相应的函数。

以下是发起GET请求的部分代码：

```javascript
function itheima(config) {
let xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象
letparams = resolveData(config.params); // 处理参数，得到查询字符串
let url = config.url + (params ? ? + params: ); // 拼接URL
let method = config.method.toUpperCase(); // 将method转换为大写

if (method === GET){ // 如果是GET请求
xhr.open(method, url); // 调用open方法，设置请求方法和URL
xhr.send(); //调用send方法发送请求
}
// 其他处理逻辑...
}
```
四、发起POST请求

与GET请求不同，POST请求需要设置Content-Type头来指定请求主体的MIME类型。
同时，POST请求在发送数据时还需要将参数添加到请求主体中。
以下是发起POST请求的部分代码：

```javascript
// 在itheima函数中继续添加以下代码...
if (method === POST) { // 如果是POST请求
xhr.setRequestHeader(Content-Type, application/x-www-form-urlencoded); // 设置Content-Type头
xhr.open(method, url); // 调用open方法，设置请求方法和URL
xhr.send(params); // 调用send方法发送请求，同时将参数添加到请求主体中
}
```
五、监听事件

最后，我们还需要为XMLHttpRequest对象添加事件监听，以便在请求完成或出错时进行相应的处理。以下是添加事件监听的代码：

```javascript
// 在itheima函数中继续添加以下代码...
xhr.onload = function() { // 请求成功完成时触发
// 处理响应数据...
};
xhr.onerror = function() { // 请求出错时触发
// 处理错误...
};
```
六、总结

本文介绍了如何使用原生JavaScript处理用户传递的参数，并正确发起GET和POST请求。
通过定义`resolveData`函数将参数对象转化为查询字符串，然后在`itheima`函数中创建XMLHttpRequest对象，根据配置对象中的method字段判断是GET请求还是POST请求，并调用相应的函数。
最后，为XMLHttpRequest对象添加事件监听以处理请求完成或出错时的情况。

标签： 对象、 函数、 xhr、 options、 method、 过来、 参数、 请求、 传递、

本文地址： https://www.gosl.cn/zxzxwz/0594d30eb07db9eeca5d.html

上一篇：mysql查询销量前五mysql查询销量前十...
下一篇：游戏动作设计外包招聘探索最佳合作机会...