javascript - 从 javascript 使用 github API 的示例

Question

我在网上搜索了一段时间，但找不到如何使用 GitHub API 的示例来自普通的客户端 javascript(没有 Node-js、jquery 等)。我想要像验证然后推送 blob 之类的东西，尽可能简单，这样我就能理解它。不应该太复杂，我敢打赌你可以用十几行代码做到这一点，但我对 ajax、json 和 jsonp 不太了解。

您能提供一个示例来帮助我入门吗？

谢谢!

编辑:发现:http://blog.vjeux.com/category/javascript ，但我仍然对这个过程的具体步骤感到困惑。

Answer 1

如果您希望使用普通 JavaScript(即无框架)，则需要使用 XMLHttpRequest 对象。 XMLHttpRequest 提供 AJAX 实现的核心。

尽管有 XMLHttp 前缀，但您并不局限于 XML 或 HTTP。您可以检索任何数据类型(例如 JSON)并使用其他协议(protocol)，例如 FTP。

假设我们想从 GitHub GET 您的用户信息。从浏览器中，我们可以通过访问 https://api.github.com/users/funchal 轻松发出请求。 。在 JavaScript 中发送 HTTP 请求与使用 XMLHttpRequest 一样简单:

// Create a new request object
var request = new XMLHttpRequest();

// Initialize a request
request.open('get', 'https://api.github.com/users/funchal')
// Send it
request.send()

如果您从 JavaScript 控制台尝试一下，您可能会感到有点失望:什么都不会立即发生。您必须等待服务器响应您的请求。从创建实例化请求对象到服务器响应，该对象将经历一系列状态更改，由 readyState 属性的值表示:

• 0 未发送:open() 未调用
• 1 OPENED:send() 未调用
• 2 HEADERS_RECIEVED: header 和状态在 send() 后可用
• 3 LOADING:responseText 仍在下载
• 4 完成:哇哦!

所有完成后，您可以检查数据的 response 属性:

request.readyState // => 4 (We've waited enough)
request.response // => "{whatever}"

使用 XMLHttpRequest#open() 时，您有几个选项需要考虑。这是方法签名:

void open(
   DOMString method,
   DOMString url,
   optional boolean async,
   optional DOMString user,
   optional DOMString password
);

第三个参数默认为 true，指示是否应异步进行响应。如果您将其设置为 false，则必须等到响应完成后 #send() 返回，并且您将付出阻止您的整个计划。因此，我们以异步方式进行编码，以便我们的程序即使在等待时也能保持响应。这种异步性是通过使用事件监听器(也称为事件处理程序)和回调函数来实现的。

假设我们只想在响应到达后将其转储到控制台。我们首先需要创建一个要执行 onload 的回调函数:

function dumpResponse() {
  // `this` will refer to the `XMLHTTPRequest` object that executes this function
  console.log(this.responseText);
}

然后我们将此回调设置为 XMLHttpRequest 接口(interface)定义的 onload 事件的监听器/处理程序:

var request = new XMLHttpRequest();
// Set the event handler
request.onload = dumpResponse;
// Initialize the request
request.open('get', 'https://api.github.com/users/funchal', true)
// Fire away!
request.send()

现在，由于您将以字符串形式接收数据，因此您需要使用 JSON.parse() 解析该字符串以执行任何有意义的操作。假设我想调试您拥有的公共(public)存储库的数量以及您的名字。我可以使用这个函数将字符串解析为 JSON，然后我可以提取我想要的属性:

function printRepoCount() {
  var responseObj = JSON.parse(this.responseText);
  console.log(responseObj.name + " has " + responseObj.public_repos + " public repositories!");
}
var request = new XMLHttpRequest();
request.onload = printRepoCount;
request.open('get', 'https://api.github.com/users/funchal', true)
request.send()
// => Giovanni Funchal has 8 public repositories!

参见the W3C spec和 Mozilla Developer Network有关 XMLHttpRequest 的更多信息。