StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
16825593
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
6
CommunityOwnedDate
CreationDate
2013-05-29T23:30:56.593
FavoriteCount
0
LastActivityDate
2018-03-01T01:03:52.387
LastEditDate
2018-03-01T01:03:52.387
LastEditorUserId
7848065
OwnerUserId
1348195
ParentId
14220321
PostTypeId
2
Score
895
ViewCount
0
LastEditorDisplayName
text
Body
<h1>If you're not using jQuery in your code, this answer is for you</h1> Your code should be something along the lines of this: <pre><code>function foo() { var httpRequest = new XMLHttpRequest(); httpRequest.open('GET', "/echo/json"); httpRequest.send(); return httpRequest.responseText; } var result = foo(); // always ends up being 'undefined' </code></pre> Felix Kling did a fine job writing an answer for people using jQuery for AJAX, I've decided to provide an alternative for people who aren't. (<a href="https://stackoverflow.com/a/30180679/1348195">Note, for those using the new <code>fetch</code> API, Angular or promises I've added another answer below</a>) <hr> <h1>What you're facing</h1> This is a short summary of "Explanation of the problem" from the other answer, if you're not sure after reading this, read that. The A in AJAX stands for asynchronous. That means sending the request (or rather receiving the response) is taken out of the normal execution flow. In your example, <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest#send%28%29" rel="noreferrer"><code>.send</code></a> returns immediately and the next statement, <code>return result;</code>, is executed before the function you passed as <code>success</code> callback was even called. This means when you're returning, the listener you've defined did not execute yet, which means the value you're returning has not been defined. Here is a simple analogy <pre><code>function getFive(){ var a; setTimeout(function(){ a=5; },10); return a; } </code></pre> <a href="http://jsfiddle.net/7RK3k/" rel="noreferrer">(Fiddle)</a> The value of <code>a</code> returned is <code>undefined</code> since the <code>a=5</code> part has not executed yet. AJAX acts like this, you're returning the value before the server got the chance to tell your browser what that value is. One possible solution to this problem is to code re-actively , telling your program what to do when the calculation completed. <pre><code>function onComplete(a){ // When the code completes, do this alert(a); } function getFive(whenDone){ var a; setTimeout(function(){ a=5; whenDone(a); },10); } </code></pre> This is called <a href="http://en.wikipedia.org/wiki/Continuation-passing_style" rel="noreferrer">CPS</a>. Basically, we're passing <code>getFive</code> an action to perform when it completes, we're telling our code how to react when an event completes (like our AJAX call, or in this case the timeout). Usage would be: <pre><code>getFive(onComplete); </code></pre> Which should alert "5" to the screen. <a href="http://jsfiddle.net/PAjZR/" rel="noreferrer">(Fiddle)</a>. <h1>Possible solutions</h1> There are basically two ways how to solve this: <ol> <li>Make the AJAX call synchronous (lets call it SJAX).</li> <li>Restructure your code to work properly with callbacks.</li> </ol> <h2>1. Synchronous AJAX - Don't do it!!</h2> As for synchronous AJAX, don't do it! Felix's answer raises some compelling arguments about why it's a bad idea. To sum it up, it'll freeze the user's browser until the server returns the response and create a very bad user experience. Here is another short summary taken from MDN on why: <blockquote> XMLHttpRequest supports both synchronous and asynchronous communications. In general, however, asynchronous requests should be preferred to synchronous requests for performance reasons. In short, synchronous requests block the execution of code... ...this can cause serious issues... </blockquote> If you have to do it, you can pass a flag: <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests#Synchronous_request" rel="noreferrer">Here is how:</a> <pre><code>var request = new XMLHttpRequest(); request.open('GET', 'yourURL', false); // `false` makes the request synchronous request.send(null); if (request.status === 200) {// That's HTTP for 'ok' console.log(request.responseText); } </code></pre> <h2>2. Restructure code</h2> Let your function accept a callback. In the example code <code>foo</code> can be made to accept a callback. We'll be telling our code how to react when <code>foo</code> completes. So: <pre><code>var result = foo(); // code that depends on `result` goes here </code></pre> Becomes: <pre><code>foo(function(result) { // code that depends on `result` }); </code></pre> Here we passed an anonymous function, but we could just as easily pass a reference to an existing function, making it look like: <pre><code>function myHandler(result) { // code that depends on `result` } foo(myHandler); </code></pre> For more details on how this sort of callback design is done, check Felix's answer. Now, let's define foo itself to act accordingly <pre><code>function foo(callback) { var httpRequest = new XMLHttpRequest(); httpRequest.onload = function(){ // when the request is loaded callback(httpRequest.responseText);// we're calling our method }; httpRequest.open('GET', "/echo/json"); httpRequest.send(); } </code></pre> <a href="http://jsfiddle.net/DAcWT/" rel="noreferrer">(fiddle)</a> We have now made our foo function accept an action to run when the AJAX completes successfully, we can extend this further by checking if the response status is not 200 and acting accordingly (create a fail handler and such). Effectively solving our issue. If you're still having a hard time understanding this <a href="https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started" rel="noreferrer">read the AJAX getting started guide</a> at MDN.
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POHow do I return the response from an asynchronous call?
 singulars
 PostTypePostTypeId
 PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USBenjamin Gruenbaum
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
2. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
3. VO
 singulars
 PostPostId
 PO
 UserUserId
 This table or related slice is empty.
 VoteTypeVoteTypeId
 VTUpMod
CommentsPostId

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.