32

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

你能提供一个例子让我开始吗？

谢谢！

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

4

1 回答 1

32

如果您希望使用 vanilla JavaScript（即没有框架），您需要使用该XMLHttpRequest对象。为XMLHttpRequestAJAX 实现提供了核心。

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

假设我们想GET从 GitHub 获取您的用户信息。在浏览器中，我们可以通过访问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 UNSENT：open()未调用
  • 1 OPENED：send()未调用
  • 2 HEADERS_RECIEVED：标题和状态在之后可用send()
  • 3 LOADING：responseText还在下载中
  • 4 DONE：哇哦！

全部完成后，您可以检查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);
}

然后我们将此回调设置为接口onload定义的事件的侦听器/处理程序XMLHttpRequest：

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()以执行任何有意义的操作。假设我想调试您拥有的公共存储库的数量以及您的姓名。我可以使用这个函数将字符串解析成 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!

有关. _ _ _ _XMLHttpRequest

于 2013-08-23T05:19:39.483 回答