JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例

JavaScript原生xmlHttp与jQuery的ajax方法都是用来进行异步数据请求的工具。其中，ajax方法还支持多种数据格式，包括json格式。下面，我们将详细讲解JavaScript原生xmlHttp与jQuery的ajax方法json数据格式的使用攻略。

1. JavaScript原生xmlHttp的使用方法

1.1 创建XMLHttpRequest对象

要使用xmlHttp发送异步数据请求，我们需要先创建一个XMLHttpRequest对象。代码如下：

var xhr = new XMLHttpRequest();

1.2 发送异步数据请求

用XMLHttpRequest对象发送异步数据请求有两种方式：GET和POST。代码如下：

// GET请求
xhr.open('GET', 'http://example.com/api/data', true);
xhr.send();

// POST请求
xhr.open('POST', 'http://example.com/api/data', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('name=John&age=25');

在发送异步数据请求时，我们可以根据需要设置请求的方法、URL、请求头、请求体等参数。

1.3 处理响应数据

发送异步数据请求后，当服务器有响应时，我们需要对响应数据进行处理。代码如下：

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    console.log(data);
  }
}

在处理响应数据时，我们需要判断响应状态和响应码。如果响应状态是4（请求完成），响应码是200（正常），则说明服务器成功返回了响应数据。我们可以将响应数据json字符串转成JavaScript对象，然后对其进行处理。

2. jQuery的ajax方法的使用方法

2.1 发送异步数据请求

使用jQuery的ajax方法发送异步数据请求，我们可以使用以下代码：

$.ajax({
  url: 'http://example.com/api/data',
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    console.log(data);
  },
  error: function(xhr, status, error) {
    console.error(status + ': ' + error);
  }
});

在发送异步数据请求时，我们需要将请求的URL、请求方法、数据类型等参数传入$.ajax方法中，以及定义请求成功和请求失败的回调函数。

2.2 处理响应数据

发送异步数据请求后，当服务器有响应时，我们可以在success回调函数中对响应数据进行处理。

success: function(data) {
  console.log(data);
}

与JavaScript原生xmlHttp相比，使用jQuery的ajax方法发送异步数据请求更加简便，同时也提供了更多可配置项。

3. 示例说明

下面，我们将分别使用JavaScript原生xmlHttp和jQuery的ajax方法获取GitHub API返回的JSON数据，并解析并输出到控制台。

3.1 JavaScript原生xmlHttp的示例代码

var xhr = new XMLHttpRequest();

xhr.open('GET', 'https://api.github.com/repositories', true);

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    console.log(data);
  }
}

xhr.send();

3.2 jQuery的ajax方法的示例代码

$.ajax({
  url: 'https://api.github.com/repositories',
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    console.log(data);
  },
  error: function(xhr, status, error) {
    console.error(status + ': ' + error);
  }
});

以上示例代码分别演示了如何使用JavaScript原生xmlHttp和jQuery的ajax方法获取GitHub API返回的JSON数据，并对其进行解析并输出到控制台。