我在网上搜索了一段时间,但找不到如何使用 GitHub API 的示例来自普通的客户端 javascript(没有 Node-js、jquery 等)。我想要像验证然后推送 blob 之类的东西,尽可能简单,这样我就能理解它。不应该太复杂,我敢打赌你可以用十几行代码做到这一点,但我对 ajax、json 和 jsonp 不太了解。
您能提供一个示例来帮助我入门吗?
谢谢!
编辑:发现:http://blog.vjeux.com/category/javascript ,但我仍然对这个过程的具体步骤感到困惑。
最佳答案
如果您希望使用普通 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
的更多信息。
关于javascript - 从 javascript 使用 github API 的示例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10341135/