Вопрос по javascript – Пример использования github API из javascript

17

Я искал в Интернете в течение некоторого времени и не смог найти пример того, как использоватьGitHub API из простого клиентского JavaScript (без node-js, jquery и т. д.). Я хотел что-то вроде аутентификации, затем толкнуть блоб, проще говоря, чтобы я мог это понять. Не должно быть слишком сложно, держу пари, что вы можете сделать это с помощью дюжины строк кода, но я не знаю много о ajax, json и jsonp.

Можете ли вы привести пример, чтобы я начал?

Спасибо!

edit: нашел это:http://blog.vjeux.com/category/javascript, но я все еще не понимаю, какие именно этапы этого процесса.

Добавить ответ со ссылками. Это будет с благодарностью. У меня есть некоторое представление о них как о концепциях, но я никогда ничего не реализовывал, используя эти методы. Giovanni Funchal

Ваш Ответ

1   ответ
24

вам нужно поэкспериментировать сXMLHttpRequest объект.XMLHttpRequest обеспечивает ядро для реализаций AJAX.

Несмотря наXMLHttp префикс, вы не ограничены XML или HTTP. Вы можете извлечь любой тип данных (например, JSON) и использовать другие протоколы, такие как FTP.

Скажи, что мы хотели быGET Ваша информация пользователя от GitHub. Из браузера мы можем легко сделать запрос, посетивhttps://api.github.com/users/funchal. Sending an HTTP request in JavaScript is just as simple with 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() uncalled 1 OPENED: send() uncalled 2 HEADERS_RECIEVED: headers and status are available after a send() 3 LOADING: the responseText is still downloading 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() вернуться, и вы заплатите цену за блокировку всей вашей программы. Таким образом, мы кодируем вasynchronous мода так, что наша программа остается отзывчивой, даже когда мы ждем. Эта асинхронность достигается использованием и прослушивателей событий (обработчиков событий a.k.a.) и функций обратного вызова.

Скажем, мы хотим просто сбросить ответ на консоль, как только он прибудет. Сначала нам нужно создать функцию обратного вызова, которую мы хотели бы выполнить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.

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceededcurl -u username https://api.github.com/user.

Похожие вопросы