在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:learn-co-students/js-ajax-intro-to-ajax-readme-cb-000开源软件地址:https://github.com/learn-co-students/js-ajax-intro-to-ajax-readme-cb-000开源编程语言:HTML 97.6%开源软件介绍:JavaScript XHRThe XMLHttpRequest object, or XHR, is a JavaScript API that allows us to transfer data between a client and a server. This makes it possible to request and receive web page updates without refreshing, leading to an improved experience for users. In this lesson, we will be exploring the use of XHR by using it to access GitHub. Objectives
XMLHttpRequestXMLHttpRequest was named at a time when XML was all the rage, but it can be used with any type of data, including JSON, which is the current de facto standard.
XHR helps us write dynamic programs by allowing us to fetch data from a server based on user events, and update parts of pages without requiring a full-page refresh. This provides users with a smooth, engaging experience that doesn't require them to stop what they're doing to get new information. Using XHR to Get Data from a ServerWe're going to be making a simple Github repository browser using the Github API.
Code along in the provided Creating the XHR RequestThe first thing we want to do is get a list of our public repositories. A
little research on the Github List Repositories API tells us
we can request a user's public repositories via a Top-tip: API documentation will often use a colon to precede a dynamic
value in a RESTful URL, like First, let's add a link to our HTML so we can trigger the request. <div>
<h3>Repositories</h3>
<a href="#" onclick="getRepositories()">Get Repositories</a>
</div> Then let's create our function getRepositories() {
const req = new XMLHttpRequest();
req.open('GET', 'https://api.github.com/users/octocat/repos');
req.send();
} Here, we're creating a new instance of an Now that our request is set up and ready to go, we call Let's open Something happened! If we examine the request in the inspector, we should see a response that looks something like this: [
{
id: 18221276,
name: 'git-consortium',
full_name: 'octocat/git-consortium',
owner: {
login: 'octocat',
id: 583231,
avatar_url: 'https://avatars.githubusercontent.com/u/583231?v=3',
gravatar_id: '',
url: 'https://api.github.com/users/octocat',
html_url: 'https://github.com/octocat',
followers_url: 'https://api.github.com/users/octocat/followers',
following_url:
'https://api.github.com/users/octocat/following{/other_user}',
gists_url: 'https://api.github.com/users/octocat/gists{/gist_id}',
starred_url:
'https://api.github.com/users/octocat/starred{/owner}{/repo}',
subscriptions_url: 'https://api.github.com/users/octocat/subscriptions',
organizations_url: 'https://api.github.com/users/octocat/orgs',
repos_url: 'https://api.github.com/users/octocat/repos',
events_url: 'https://api.github.com/users/octocat/events{/privacy}',
received_events_url:
'https://api.github.com/users/octocat/received_events',
type: 'User',
site_admin: false
}
}
//... more!
]; It worked! We successfully fetched data from a remote resource with XHR without reloading our page! Now that we have the request part down, we need to figure out how to capture this response so we can do something with it. Handling the XHR ResponseThe second part of XHR is handling the response once we've made the request. We
do this by defining an event listener on the request to listen for the function showRepositories() {
//this is set to the XMLHttpRequest object that fired the event
console.log(this.responseText);
}
function getRepositories() {
const req = new XMLHttpRequest();
req.addEventListener('load', showRepositories);
req.open('GET', 'https://api.github.com/users/octocat/repos');
req.send();
} When we add the event listener to our Now that we know how to access the response, let's do something with it. Parsing the XHR ResponseSince the Github API deals strictly in JSON, we know that our response will be well-formed JSON, so it should be easy for us to work with. Let's parse this response and list out the repositories on the page. We'll start by giving ourselves a place in the DOM to put the data. <div>
<h3>Repositories</h3>
<a href="#" onclick="getRepositories()">Get Repositories</a>
<div id="repositories"></div>
</div> Then let's start by simply listing the repository names. function showRepositories() {
console.log(this.responseText);
let repoList = '<ul>';
for (var i = 0; i < this.responseText.length; i++) {
repoList += '<li>' + this.responseText[i]['name'] + '</li>';
}
repoList += '</ul>';
document.getElementById('repositories').innerHTML = repoList;
} Now if we reload and click our link... Okay not quite what we expected. While it might be fun to have a list of a
million The key lies in the The way we tell the interpreter that we're working with JSON is to parse it with function showRepositories() {
var repos = JSON.parse(this.responseText);
console.log(repos);
const repoList = `<ul>${repos
.map(r => '<li>' + r.name + '</li>')
.join('')}</ul>`;
document.getElementById('repositories').innerHTML = repoList;
} Now we're properly parsing the text into an array of objects that we can work with. If we reload and try it again, we should get our list of repository names. Okay, let's take this a step further and set ourselves up to make another XHR request based on our data. We want to be able to list the commits for any given repository. Again, we don't want to just re-query the server for each repository as we're processing that data, we just want to respond to the user asking for a specific repo's commits. Let's go back into the Github API docs for commits and check it out. We can see that we can make another We know we'll need an element to click for each repository on our page that
will request that repository's commits. So we'll need to add a "Get Commits"
link to our output in We'll start by adding the link to our repository output. function showRepositories() {
var repos = JSON.parse(this.responseText);
console.log(repos);
const repoList = `<ul>${repos
.map(
r =>
'<li>' +
r.name +
' - <a href="#" data-repo="' +
r.name +
'" onclick="getCommits(this)">Get Commits</a></li>'
)
.join('')}</ul>`;
document.getElementById('repositories').innerHTML = repoList;
} Let's look more closely at this line: The first interesting thing is that we're using a data attribute
to hold the repo name. Data attributes make it super easy to pass data around
between DOM elements and JS, so rather than jump through hoops trying to set
and query The second thing is our Now that that's out of the way, let's set up our function getCommits(el) {
const name = el.dataset.repo;
const req = new XMLHttpRequest();
req.addEventListener('load', showCommits);
req.open('GET', 'https://api.github.com/repos/octocat/' + name + '/commits');
req.send();
} Here we grab that Let's create a place in our HTML to put the commits. <div>
<h3>Commits</h3>
<div id="commits"></div>
</div> Finally, let's handle that request with our callback function. We can look at the docs for this API call to see the JSON structure and know what values we want to pull out, then display them on the page. function showCommits() {
const commits = JSON.parse(this.responseText);
const commitsList = `<ul>${commits
.map(
commit =>
'<li><strong>' +
commit.author.login +
'</strong> - ' +
commit.commit.message +
'</li>'
)
.join('')}</ul>`;
document.getElementById('commits').innerHTML = commitsList;
} Reload it and check it out. Now we can load repositories, then see commits for any repository dynamically without refreshing the page or reloading the repository list! SummaryWe learned what the Resources |
2022-08-15
2022-08-17
2022-09-23
2023-10-27
2022-08-18
请发表评论