Javascript发送AJAX请求实例代码

当需要通过Javascript与服务器进行异步数据交互时，就需要使用AJAX技术。本篇攻略将提供一个基本的AJAX请求代码示例以及一个带参数的AJAX请求代码示例。

AJAX请求示例

步骤一：创建XMLHttpRequest对象

AJAX通过XMLHttpRequest对象与服务器进行数据交互。在Javascript中，可以通过以下代码创建XMLHttpRequest对象：

var xhr = new XMLHttpRequest();

步骤二：设置服务器请求参数

设置请求参数，包括请求方式、请求地址、请求是否异步等等。以下代码展示了GET方式请求一个JSON数据的示例：

xhr.open('GET', 'http://example.com/json', true);
xhr.responseType = 'json';

步骤三：发送AJAX请求

使用XMLHttpRequest对象的send方法来发送异步请求，以下是一个完整的AJAX请求示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/json', true);
xhr.responseType = 'json';

xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.response);
  } else {
    console.error('请求出错');
  }
};

xhr.send();

示例说明

以上示例展示了一个基本的AJAX请求的步骤，包括创建XHR对象、设置请求参数和发送请求。在XHR对象的onload事件中，分别判断请求是否成功，如果成功则输出响应结果。

带参数的AJAX请求示例

在实际应用场景中，通常需要传递参数给服务器，以下是一个使用POST方式请求带参数的AJAX请求示例：

步骤一：创建XMLHttpRequest对象

同样需要创建XMLHttpRequest对象，使用以下代码创建：

var xhr = new XMLHttpRequest();

步骤二：设置服务器请求参数

设置请求参数，包括请求方式、请求地址、请求是否异步等等。以下代码展示了POST方式请求一个JSON数据的示例：

xhr.open('POST', 'http://example.com/json', true);
xhr.setRequestHeader('Content-Type', 'application/json');

在设置请求参数时，还需要设置请求头部信息，因为是 POST 请求，需要设置请求头部的 Content-Type 值为 application/json。当传递的参数为 JSON 类型时，Content-Type 必须设定为 application/json，否则无法解析参数。

步骤三：发送AJAX请求

在发送请求前，还需要首先将传递的参数序列化为 JSON 字符串，然后在调用send方法时传入该字符串。以下是一个完整的AJAX请求示例：

var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://example.com/json', true);
xhr.setRequestHeader('Content-Type', 'application/json');

var data = {
  "name": "小明",
  "age": 22
};
xhr.send(JSON.stringify(data));

xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.response);
  } else {
    console.error('请求出错');
  }
};

示例说明

以上示例展示了一个POST方式的AJAX请求的步骤，包括创建XHR对象、设置请求参数（包括设置请求头部）和发送请求（传入 JSON 字符串）。在XHR对象的onload事件中，分别判断请求是否成功，如果成功则输出响应结果。