从javascript使用github API的示例

Question

我已经在网上搜索了一段时间,但是找不到如何从普通客户端javascript(没有node-js,jquery等)使用GitHub API的示例.我想要一些像authenticate那样的东西,然后推送一个blob,尽可能简单地让我理解它.不应该太复杂,我打赌你可以用十几行代码做到这一点,但我不太了解ajax,json和jsonp.

你能提供一个让我入门的例子吗？

谢谢!

编辑:发现这个:http://blog.vjeux.com/category/javascript,但我仍然感到困惑的是这个过程的步骤是什么.

Answer 1

如果您希望使用vanilla JavaScript(即没有框架),则需要使用该XMLHttpRequest对象.该XMLHttpRequest规定AJAX实现的核心.

尽管有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:标题和状态在a之后可用send()
• 3 LOADING:responseText仍在下载
• 4 DONE:Wahoo!

完成所有操作后,您可以检查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!

有关详细信息,请参阅W3C规范和Mozilla开发人员网络XMLHttpRequest.