使用原生js封装ajax
时间: 2023-09-18 19:06:32 浏览: 175
### 回答1:
使用原生 JavaScript 封装 ajax 可以这样做:
```
function ajax(method, url, data, success) {
var xhr = new XMLHttpRequest();
xhr.open(method, url, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
success(xhr.responseText);
} else {
console.error(xhr.statusText);
}
}
};
xhr.send(data);
}
```
使用方式:
```
ajax(
"POST",
"/login",
"username=admin&password=123456",
function(responseText) {
console.log(responseText);
}
);
```
其中,method 为请求的方法(POST 或 GET),url 为请求的地址,data 为请求的数据,success 为请求成功时的回调函数。
### 回答2:
原生js封装Ajax主要由以下几个步骤:
1. 创建一个XMLHttpRequest对象。可以使用var xhr = new XMLHttpRequest();语句来创建一个XMLHttpRequest对象。
2. 设置请求的方法和URL。使用xhr.open(method, url, async)方法来设置请求的方法、URL和是否异步,其中method为请求方法(例如GET或POST),url为请求的URL,async表示是否异步(true为异步,false为同步)。
3. 设置请求的头部信息。使用xhr.setRequestHeader(header, value)方法来设置请求头部信息,可根据需要设置Content-Type、Authorization等等。
4. 监听请求状态变化。使用xhr.onreadystatechange = function(){}语句监听请求状态的变化,当请求状态发生变化时,执行相应的处理。
5. 发送请求。使用xhr.send(data)方法发送请求,其中data为请求的数据,可以为null或者是一个字符串。
6. 处理返回结果。在监听请求状态变化的函数中,根据请求的状态和返回的结果进行相应的处理。例如,当请求状态为4且状态码为200时,表示请求成功,可以通过xhr.responseText获取响应的数据。
7. 销毁XMLHttpRequest对象。请求完成后,使用xhr = null;语句将XMLHttpRequest对象置为空,以便释放内存。
通过以上步骤,就可以封装一个基本的Ajax函数。可以根据需要添加错误处理、超时设置、数据格式转换等功能,以满足不同场景的需求。
### 回答3:
在原生JavaScript中封装Ajax可以通过XMLHttpRequest来实现。下面是一个简单的Ajax封装函数的示例:
```javascript
function ajax(method, url, data, callback) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
callback(xhr.responseText);
}
};
xhr.open(method, url, true);
if (method === 'POST') {
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
}
xhr.send(data);
}
```
上述函数接受四个参数:请求方法(method)、请求URL(url)、请求数据(data)和回调函数(callback)。其中,method参数可以是'GET'或者'POST',url参数是请求的目标URL,data参数是要发送的数据(如果是'POST'请求),callback参数是请求成功后要执行的回调函数。
函数内部创建了一个XMLHttpRequest对象,并通过onreadystatechange事件监听请求的状态变化。当请求状态为4且状态码为200时,表示请求已完成,可以获取到返回的数据,此时调用回调函数。
使用open方法打开请求,参数为请求方法、URL和是否异步请求。如果是POST请求,还需要调用setRequestHeader方法设置请求头的Content-Type。
最后,调用send方法发送请求数据。根据请求方法不同,send方法的参数也不同。
通过上述封装,可以方便地使用原生JavaScript进行Ajax请求,并根据请求结果执行相应的操作。
阅读全文