Using jQuery to Retrieve JSON via AJAX - 19

Sign in to queue

Description

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:

JavaScript

Embed

Download

The Discussion

  • User profile image
    Ashish 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

  • User profile image
    Prashanth

    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.

  • User profile image
    BobTabor

    @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!

  • User profile image
    Phasefirest​orm

    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!

  • User profile image
    vasu

    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.

  • User profile image
    Atef

    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

  • User profile image
    BobTabor

    @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.

  • User profile image
    Abe

    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!

  • User profile image
    BobTabor

    @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!

  • User profile image
    Kyle

    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.

  • User profile image
    BobTabor

    @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.

  • User profile image
    Ali

    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.

  • User profile image
    BobTabor

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

  • User profile image
    vandana

    Helo,
    when we click the button the list of json objects should display using jquery from search field..can u plz help me out

Add Your 2 Cents