XMLHttpRequest对象和Ajax请求-编程入门课：Javascript从入门到实战

当前位置:　首页>> 技术小册>> 编程入门课：Javascript从入门到实战

JavaScript中的XMLHttpRequest对象和Ajax请求是实现异步数据交互的重要组成部分。XMLHttpRequest对象提供了向服务器发送HTTP请求并接收响应的能力，而Ajax请求则是利用XMLHttpRequest对象实现无需刷新整个页面的异步数据交互。

XMLHttpRequest对象
XMLHttpRequest对象是通过JavaScript代码向服务器发送HTTP请求和接收响应的核心对象。在创建XMLHttpRequest对象之前，我们需要先了解一下XMLHttpRequest对象的构造函数和属性。

构造函数
XMLHttpRequest对象的构造函数如下：

```
var xhr = new XMLHttpRequest();
```
属性
XMLHttpRequest对象有以下一些重要的属性：

readyState: 表示请求的状态，有5个可选值：
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status: 表示响应的HTTP状态码，常见的值有200、404、500等。
responseText: 服务器响应的文本内容。
responseXML: 服务器响应的XML文档对象。
onreadystatechange: 当请求状态发生变化时的回调函数。
方法
XMLHttpRequest对象有以下一些重要的方法：

open(method, url, async): 初始化请求，参数分别是请求的方法（GET或POST）、请求的URL和是否异步。
send(data): 发送请求，参数是请求的数据。
setRequestHeader(header, value): 设置请求头，参数分别是请求头的名称和值。
Ajax请求
Ajax请求是指利用XMLHttpRequest对象向服务器发送HTTP请求并接收响应的异步数据交互。通过Ajax请求，我们可以实现无需刷新整个页面的数据交互，大大提高了用户的体验和页面的交互性。

下面是一个简单的Ajax请求的例子：

```
var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var data = xhr.responseText;
    console.log(data);
  }
};
xhr.send();
```
在这个例子中，我们创建了一个XMLHttpRequest对象，并向服务器发送了一个GET请求。当请求状态发生变化时，我们判断请求状态和响应状态码是否满足要求，如果满足要求，则从响应中获取数据并进行处理。

在实际开发中，我们通常会将Ajax请求封装成一个函数，以便在多个地方复用。下面是一个简单的Ajax请求封装函数的例子：

```
function ajax(options) {
  var xhr = new XMLHttpRequest();
  xhr.open(options.method || 'GET', options.url, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var data = xhr.responseText;
      if (options.success) {
        options.success(data);
      }
    }
  };
  xhr.send(options.data || null);
}
```

这个例子中，我们将Ajax请求封装成了一个名为ajax的函数，并接受一个options对象作为参数。options对象包含以下属性：

method: 请求的方法，默认为GET。
url: 请求的URL。
data: 请求的数据，默认为null。
success: 请求成功时的回调函数，参数是服务器响应的数据。
使用这个封装函数可以简化我们的代码，提高代码的可读性和可维护性。下面是一个使用这个函数的例子：

```
ajax({
  url: '/api/data',
  success: function(data) {
    console.log(data);
  }
});
```
在这个例子中，我们调用了ajax函数，并传入了一个options对象。由于我们只需要获取服务器响应的数据，所以我们只传了一个success属性作为回调函数。当服务器响应成功后，回调函数就会被调用，并将服务器响应的数据作为参数传递给它。

除了GET请求外，我们还可以使用POST请求向服务器发送数据。下面是一个使用POST请求的例子：

```
ajax({
  method: 'POST',
  url: '/api/data',
  data: {
    name: '张三',
    age: 18
  },
  success: function(data) {
    console.log(data);
  }
});
```
在这个例子中，我们指定了请求方法为POST，并向服务器发送了一个名为data的对象。当服务器响应成功后，回调函数就会被调用，并将服务器响应的数据作为参数传递给它。

该分类下的相关小册推荐：

WebSocket入门与案例实战

KnockoutJS入门指南

ES6入门指南

剑指javascript-ES6

剑指javascript

零基础学JavaScript

深入学习前端重构知识体系

web前端开发性能优化实战

Javascript编程指南

JavaScript入门与进阶

JavaScript面试指南

Flutter核心技术与实战