Entries:
Comments:
Posts:

Loading User Information from Channel 9

Something went wrong getting user information from Channel 9

Latest Achievement:

Loading User Information from MSDN

Something went wrong getting user information from MSDN

Visual Studio Achievements

Latest Achievement:

Loading Visual Studio Achievements

Something went wrong getting the Visual Studio Achievements

Using jQuery to Retrieve JSON via AJAX - 19

Download

Right click “Save as…”

AJAX allows web pages and web servers to communicate without requiring a full page refresh. JSON is a data format that closely resembles object literals in JavaScript. Most modern web applications utilize some form of AJAX and in this lesson we demonstrate how easy it is to do so via jQuery.

Tag:

Follow the Discussion

  • Ashish MishraAshish Mishra

    Really nice Series. One series for JQuery Mobile and One for Windows 8 Metro apps will be really wonderful & helpful to all.

    Regards,
    Ashish Mishra

  • PrashanthPrashanth

    Hi Bob,
    You're my Hero!!
    What I couldn't understand in numerous tutorials, you've simplified in one 16 min video. I really like your method of teaching.
    So, I am trying out a little piece of ajax call here... Please see below for my code. Nothing fancy, but I just want an assurance from the code that it is retrieving the json object right.
    However, I get an error while I try to click on the link. "Origin null is not allowed by Access-Control-Allow-Origin"

    What does this mean? And what am I doing wrong in my code?

    $(function() {
    $('#clickme').click(function() {
    $.ajax({
    url: 'data19.json',
    dataType: 'json',
    success: function(data) {
    alert('Hooray... Got it!');
    }
    });
    });
    });

    And finally, great thanks for having put together this series of videos.

  • @Ashish Mishra: If that's something you want, a Fundamentals style series for those topics, contact Channel 9 using the Feedback link in the footer (below).  They monitor those posts closely.  Thanks!  Best wishes!

    @Prashanth: Whenever I see an error message I can't decipher, I immediately go to my favorite search engine and search for it.  Invariably, it will lead me to a forum like StackOverflow . . . check out this quesiton / solution . . . I'm betting it will get you close to the solution to the issue:

    http://stackoverflow.com/questions/8456538/origin-null-is-not-allowed-by-access-control-allow-origin

    Good luck!

  • Great video. I've been doing all these on Microsoft Web Developer so the 404 error works for me since I'm running it as localhost.

     

    Awesome!

  • vasuvasu

    Hi Bob, Thanks for tutorial. I have some problem to inserting the fetched values. Please see below json structure.

    menu[
    {
    "title": "Home",
    "link": "home.html"
    },
    {
    "title": "About",
    "link": "about.html"
    },
    {
    "title": "Contact",
    "link": "contact.html"
    }
    ],
    modules[
    {
    "title": "header",
    "id": "#header"
    },
    {
    "title": "contents",
    "id": "#contents"
    },
    {
    "title": "footer",
    "id": "#footer"
    },
    ]
    I have to make 3 divs using the 'modules' values, then after the 'menu' values should come under the 'header' div. Please help me the output.

  • AtefAtef

    Hi Bob,
    Thank you very much for the excellent tutorial videos "Javascript for Beginners". At this point, I'm at video number 19. I have learned a lot and was very impressed with what you can accomplish with the javascript. You mentioned in this video, 19, that javascript can be disabled on the browser and the code will not run altogether. What will be the benefit of learning this great tool and we have to turn around and plan for another alternative, using HTML in the document only, that will not be in anyway near this great tool.
    I appreciate your response.
    Thank you,
    Atef

  • @vasu: Maybe it should be:

    menu : [ all your stuff here ]

    Or, just remove the "menu" all together.  Try one of those two.

    @Atef: Very few people actually disable JavaScript.  It used to be a bigger issue with some people's Angel corporate policy for all computers in a large company, or (b) part of your Internet security / antivirus.  Those measures were extremely Draconian, and you don't see that as much. Once in a while, someone who is extremely (overly?) cautious may disable JavaScript.  As a developer, you do what you can ... if you're working for a company, you let the management make the call on "what to do" in that case.  At least, that's what I would do.  Hope that helps.  Everything in software developments is a series trade-offs.

  • AbeAbe

    Hi Bob, Thank you very much for this tutorials, it's incredible that you share your kwoledge with us, you are an example for me, Thank you again.

    I want to know your opinion about using AJAX for navigation, like getting details for a product in a E-commerce App, whats the problem of navigate a lot and remain in the index.html? for example.

    thanks in advance!

  • @Abe: Great question.  I think there's a debate on just how much to rely on AJAX / other dynamic features for important things in your application.  Despite my enthusiasm for the technology, I hesitate to use it in most cases, especially in the scenario you described: ecommerce.

    When it comes to actually generating revenue from the internet, I think you should reduce all friction in the buying process.  If you turn away 5% of potential customers from your ecommerce site because of your technology decisions, as a business owner, I would not very much like that.  So, first and foremost, think of what you can accomplish without those cool features preferring plain, vanilla HTML as much as possible.  Make it consumable by the largest audience.

    Second, consider SEO ... can search spiders / indexers find the products you are selling if you make a single page app and do all navigating using JavaScript?  Despite how smart the search bots are, I would shy away from that, personally.

    If you are creating a "one page application" for things like TODO / task management / content management, or a dashboard for executives in your organization, or an online game that requires fresh updates from the server or something like that ... I think that is a good application of the AJAX technology.  Hope that helps!

  • KyleKyle

    Good morning,
    I would first like to thank you for taking the time to make these videos. I have learned a lot in a short amount of time.

    I am having some trouble with the data19.json file. I built it from the video and had no luck then I used the downloaded files and changed the 'data19a.json' back to 'data19.json' and I still can not get this to work. I have attempted to find some information online, but had no luck. I would greatly appreciate any feedback you may have.

  • @Kyle: Prior to changing the name to data19a.json, did it work correctly?  If so, it's probably a browser caching issue.  

    http://www.refreshyourcache.com/en/cache/

    If you've NEVER gotten this to work, it may be because AJAX only works when the data is coming from the correct domain (i.e., www.whatever.com), and trying to run this locally from your file system will not be the "correct domain".  You may have to upload to a web server (even if you only have an IP address) or run a web server locally.  I believe this is the problem I had with the example -- or no?  I'm working from memory.  If you could provide a specific time marker in the video (ex. @4:15) I could see which part you're having a problem with.  Hope that helps -- I'll try to help you through it -- it might take a few rounds to isolate the issue.

  • AliAli

    Sir Bob Tabor,
    Enjoying this series too. I can't tell how much I have learnt from these series. Thanks again. I wanted to tell you that 404 error is working in Google Chrome bt not in Internet Explorer.

    Regards,
    Ali.

  • @Ali: Ah ... interesting.  Thanks for that.  I guess IE is more secure than Chrome.   Cool

Remove this comment

Remove this thread

close

Comments Closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums,
or Contact Us and let us know.