Jump to content


AJAX and JSON

Started by davej, Apr 14 2012 10:48 PM

12 replies to this topic

#1 davej

    Invested Member

  • Members
  • PipPipPip
  • 618 posts
  • Gender:Male
  • Location:STL
  • Interests:Learning Javascript, Java, Php, Linux, C, C#, C++, VB, (X)HTML, CSS, SQL, ASP.Net

Posted 14 April 2012 - 10:48 PM

I'm still not clear on how this works. Considering the example here;

http://www.w3schools...son/default.asp

{
"employees": [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
}


What would you see as the page source if you had the browser receive this from the server with Javascript turned off? In other words Javascript sends the Ajax request to the server for this data but then does not set up a handler.

Thanks

Edited by davej, 14 April 2012 - 10:50 PM.

#2 thescientist

    Likes gettin' it on!

  • Members
  • PipPipPipPipPipPipPip
  • 7,442 posts
  • Gender:Male
  • Location:Rhode Island, USA
  • Interests:Music, programming, computers, web design, business, books, and politics.
  • Languages:HTML/CSS, JS, PHP/MySQL, XML, bash, SVN/Git, Java, Python

Posted 14 April 2012 - 10:58 PM

if Javascript was turned off, there would have been no AJAX request in the first place, and thus no (JSON) response.

Edited by thescientist, 14 April 2012 - 10:59 PM.

myTunes: www.analogstudios.net

View PostSirCharlo, on May 13 2011, 03:03 PM, said:

my {...} code {...} works in all the decent browsers. This of course means that it does not work in IE.

#3 davej

    Invested Member

  • Members
  • PipPipPip
  • 618 posts
  • Gender:Male
  • Location:STL
  • Interests:Learning Javascript, Java, Php, Linux, C, C#, C++, VB, (X)HTML, CSS, SQL, ASP.Net

Posted 15 April 2012 - 02:10 AM

View Postthescientist, on 14 April 2012 - 10:58 PM, said:

if Javascript was turned off, there would have been no AJAX request in the first place, and thus no (JSON) response.


Well, yes this would only be an artificial test case, but say the Javascript failed to set the handler up. What data actually shows up at the browser?

I guess an additional question might be to ask what the Php code that generates the above example data structure would look like.

Thanks!

Edited by davej, 15 April 2012 - 02:19 AM.

#4 thescientist

    Likes gettin' it on!

  • Members
  • PipPipPipPipPipPipPip
  • 7,442 posts
  • Gender:Male
  • Location:Rhode Island, USA
  • Interests:Music, programming, computers, web design, business, books, and politics.
  • Languages:HTML/CSS, JS, PHP/MySQL, XML, bash, SVN/Git, Java, Python

Posted 15 April 2012 - 12:07 PM

what's the real question here? I can't what you're actually trying to get at.

If you create an AJAX request, but don't set up any sort of a callback (async) or check for readystate manually, (sync) then nothing will happen, either good or bad. You might see something in the console, but there would be no affects to your script/page.

If you want to output JSON via PHP, then use json_encode. First you have to be familiar with PHP array syntax though, if you already aren't
http://www.w3schools.../php_arrays.asp
http://php.net/manua...json-encode.php
 
$array => array(
  "employees" => array(
    array("firstName" => "John", "lastName" => "Doe"),
    array("firstName"=>"Anna", "lastName"=>"Smith"),
    array("firstName"=>"Peter", "lastName"=>"Jones")
  )
);
 
echo json_encode($array);

myTunes: www.analogstudios.net

View PostSirCharlo, on May 13 2011, 03:03 PM, said:

my {...} code {...} works in all the decent browsers. This of course means that it does not work in IE.

#5 davej

    Invested Member

  • Members
  • PipPipPip
  • 618 posts
  • Gender:Male
  • Location:STL
  • Interests:Learning Javascript, Java, Php, Linux, C, C#, C++, VB, (X)HTML, CSS, SQL, ASP.Net

Posted 15 April 2012 - 05:24 PM

What I was interested in was what the raw data looks like. So will the browser ignore it because it doesn't start with <html>? Or will the browser display it? Or will the browser report an error?

Edited by davej, 15 April 2012 - 06:12 PM.

#6 Ingolme

    Foxy Mod

  • Moderator
  • PipPipPipPipPipPipPip
  • 8,514 posts
  • Gender:Male
  • Interests:Web programming, drawing, videogames, building circuits, foxes.
  • Languages:(X)HTML, CSS, Javascript, PHP, SQL, XML [DOM].

Posted 15 April 2012 - 06:04 PM

The browser will interpret it based on the headers sent from the server. If you send a "text/html" content-type header then any <tags> won't be printed and they'll be added to the DOM tree instead.

If you send it with text/plain or text/javascript the browser will print the content as it is.
Always going straight to the point, the simplest approach is always the best.

#7 boen_robot

    XSLT senior

  • Moderator
  • PipPipPipPipPipPipPip
  • 8,484 posts
  • Gender:Male
  • Location:europe://Bulgaria/Plovdiv
  • Interests:Everything having to do with computers... and science.
  • Languages:(X)HTML, CSS, XML, XSLT, Schema, PHP, JavaScript (a little), other XML based...

Posted 15 April 2012 - 06:12 PM

View Postdavej, on 15 April 2012 - 05:24 PM, said:

What I'm interested in is what the raw data looks like. Will the browser ignore it because it doesn't start with <html>? Or will the browser display it? Or will the browser report an error?

If you've requested it with AJAX - none of the above.

The raw data is available from the "responseText" property of XMLHttpRequest, once the request is actually performed. Whatever you've written will be available there in exactly the way you wrote it. If you write "<html>", the value of responseText will be "<html>". If you write "{}", responseText will be "{}", etc.

It's up to you, within JavaScript, to actually interpret that "{}" to mean either the text "{}", or something else, such as JSON. If JavaScript is not available, you wouldn't send a request to begin with, and if no callback was specified, the response is never interpreted, so whatever you had in the response would have no effect at all.

If, from your browser, directly, you open up a PHP file that outputs JSON, what you see will depend on the Content-Type header.
The greatest difficulty in programming is not in finding answers, but in asking yourself the right questions. -- If nobody has said it before, then I'd like to take credit of thinking this up (during summer of 2010).
"Complex problems often have the simplest solutions" -- Not sure who said that first.
=== My projects (all feedback welcomed) ===
XML_XSLT2Processor(0.5.3) - perform XSLT 2.0 transformations in PHP.
PEAR2_Net_Transmitter(1.0.0a3) - reliable sockets.
PEAR2_Cache_SHM(0.1.1) - persistent data storage wrapper.
=== Useful tools ===
NetBeans - full featured PHP IDE, as well as a decent code editor for other things.
Fiddler2 - The best free HTTP debugger. Performance tuning, security check, integrity check, custom requests and more, all made easy.
Gobby - That's NOT my Nickname! Look at the topic.

#8 davej

    Invested Member

  • Members
  • PipPipPip
  • 618 posts
  • Gender:Male
  • Location:STL
  • Interests:Learning Javascript, Java, Php, Linux, C, C#, C++, VB, (X)HTML, CSS, SQL, ASP.Net

Posted 15 April 2012 - 08:23 PM

So Javascript/Ajax issues a POST to the server with an identifier, perhaps a hidden input, which identifies the post as being an Ajax request, and then the server sends a response packet back. When the packet of data arrives at the browser -- how is it identified as being the response to the Ajax XMLHttpRequest ?

#9 Ingolme

    Foxy Mod

  • Moderator
  • PipPipPipPipPipPipPip
  • 8,514 posts
  • Gender:Male
  • Interests:Web programming, drawing, videogames, building circuits, foxes.
  • Languages:(X)HTML, CSS, Javascript, PHP, SQL, XML [DOM].

Posted 15 April 2012 - 08:38 PM

It's impossible to know if a request was sent with AJAX or not because it's an ordinary HTTP request like any other. You could set a request header and look for it on the server-side but people could fool that if they wanted to.
Always going straight to the point, the simplest approach is always the best.

#10 boen_robot

    XSLT senior

  • Moderator
  • PipPipPipPipPipPipPip
  • 8,484 posts
  • Gender:Male
  • Location:europe://Bulgaria/Plovdiv
  • Interests:Everything having to do with computers... and science.
  • Languages:(X)HTML, CSS, XML, XSLT, Schema, PHP, JavaScript (a little), other XML based...

Posted 15 April 2012 - 09:23 PM

View Postdavej, on 15 April 2012 - 08:23 PM, said:

So Javascript/Ajax issues a POST to the server with an identifier, perhaps a hidden input, which identifies the post as being an Ajax request, and then the server sends a response packet back. When the packet of data arrives at the browser -- how is it identified as being the response to the Ajax XMLHttpRequest ?

No. No identifier or anything like that is sent (at least not transparently; you could send such stuff if you wanted, but there's little point in doing so).

When you open up a URL directly in the browser, the browser is doing the same you're doing with an AJAX request - it sends a request and receives raw data from the server (the same data you have in responseText). The difference is that in addition to that, it automatically interprets that raw data in some fashion (HTML, plan text, image, etc.) and displays the interpretation on the screen. How exactly is the data interpreted depends on the Content-Type header of the response. JavaScript doesn't do any interpretation - it simply lets you view the raw data, allowing you to interpret it in whatever fashion you want by whatever criteria you want (not necessarily the Content-Type).

Spoiler

The greatest difficulty in programming is not in finding answers, but in asking yourself the right questions. -- If nobody has said it before, then I'd like to take credit of thinking this up (during summer of 2010).
"Complex problems often have the simplest solutions" -- Not sure who said that first.
=== My projects (all feedback welcomed) ===
XML_XSLT2Processor(0.5.3) - perform XSLT 2.0 transformations in PHP.
PEAR2_Net_Transmitter(1.0.0a3) - reliable sockets.
PEAR2_Cache_SHM(0.1.1) - persistent data storage wrapper.
=== Useful tools ===
NetBeans - full featured PHP IDE, as well as a decent code editor for other things.
Fiddler2 - The best free HTTP debugger. Performance tuning, security check, integrity check, custom requests and more, all made easy.
Gobby - That's NOT my Nickname! Look at the topic.

#11 davej

    Invested Member

  • Members
  • PipPipPip
  • 618 posts
  • Gender:Male
  • Location:STL
  • Interests:Learning Javascript, Java, Php, Linux, C, C#, C++, VB, (X)HTML, CSS, SQL, ASP.Net

Posted 16 April 2012 - 05:02 PM

So Javascript assigns a function to receive the next HTTP (port 80) packet that the browser receives, and the request is only good for that single packet.

#12 boen_robot

    XSLT senior

  • Moderator
  • PipPipPipPipPipPipPip
  • 8,484 posts
  • Gender:Male
  • Location:europe://Bulgaria/Plovdiv
  • Interests:Everything having to do with computers... and science.
  • Languages:(X)HTML, CSS, XML, XSLT, Schema, PHP, JavaScript (a little), other XML based...

Posted 16 April 2012 - 05:09 PM

View Postdavej, on 16 April 2012 - 05:02 PM, said:

So Javascript assigns a function to receive the next HTTP (port 80) packet that the browser receives, and the request is only good for that single packet.

The term is "HTTP response" (which will matter to you if you ever do anything socket or router related), but... essentially, yes.
The greatest difficulty in programming is not in finding answers, but in asking yourself the right questions. -- If nobody has said it before, then I'd like to take credit of thinking this up (during summer of 2010).
"Complex problems often have the simplest solutions" -- Not sure who said that first.
=== My projects (all feedback welcomed) ===
XML_XSLT2Processor(0.5.3) - perform XSLT 2.0 transformations in PHP.
PEAR2_Net_Transmitter(1.0.0a3) - reliable sockets.
PEAR2_Cache_SHM(0.1.1) - persistent data storage wrapper.
=== Useful tools ===
NetBeans - full featured PHP IDE, as well as a decent code editor for other things.
Fiddler2 - The best free HTTP debugger. Performance tuning, security check, integrity check, custom requests and more, all made easy.
Gobby - That's NOT my Nickname! Look at the topic.

#13 justsomeguy

    More Human Than Human

  • Moderator
  • PipPipPipPipPipPipPip
  • 24,356 posts
  • Gender:Male
  • Location:Phoenix
  • Languages:Focusing on PHP and JavaScript

Posted 16 April 2012 - 06:01 PM

The request and the response are coupled, they don't exist without each other. A request always has a response (at least in a non-error situation), and a response always started with a request. Both of them happen on a single connection. When you make a request the browser opens a connection to the server, sends the request, and keeps the connection open waiting for a response. When the server responds it goes through the same connection so the browser knows right there which request the response is for (because they happened in the same connection). After the request is sent the server closes the connection (or eventually it times out and the browser closes it).

Anything else that happens outside of that communication chain is up to you. The browser does not do anything with the response data that you haven't told it to do. If you haven't told it to do anything with the response or react to the response in any way, then it won't do anything. It's up to you to listen for the response, validate that it succeeded, get the response data, etc.
Know your history: Babbage | Lovelace | Turing | Hopper | Ritchie
ConTEXT Sublime Text Opera PHP MySQL phpMyAdmin
Use a debugger: Firefox, IE, Chrome, Safari, or Opera
Know the foundations of computer science: algorithms, machine architectures, data structures, etc. Don't just blindly copy techniques from application to application. Know what you are doing, that it works, and why it works. Don't think you know what the industry will be in five years time or what you'll be doing then, so gather a portfolio of general and useful skills. Try to write better, more principled code. Work to make "programming" more of a professional activity and less of a low-level "hacking" activity (programming is also a craft, but not just a craft). Learn from the classics in the field and the better advanced textbooks; don't be satisfied with the easily digested "how to" guides and online documentation - it's shallow.
-- Bjarne Stroustrup

He that teaches himself has a fool for a master.
-- Benjamin Franklin (paraphrased)
Back to JavaScript · Next Unread Topic →


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users

  1. W3Schools Forum
  2. → Browser Scripting
  3. → JavaScript
  4. Guidelines and Netiquette