up vote -1 down vote favorite

This question may be conceptual (not programming oriented) but i feel i need to understand how these work together in order to program correctly.

what I know:
1) php is a programming language which can be used with html
2) javascript is called from html
3) json is used to convert php array to javascript array
4) ajax is a way to call json

so my questions are...
1) which has the priority? i.e. is javascript codes called before php?
2) when you have ajax in javascript requesting for json.. when is that called? is that after php?

I am confused how things work with each other like in steps which goes first and last.

share|improve this question

closed as off topic by Polish Prince, LittleBobbyTables, Luc M, mdm, Hanlet Escaño 8 hours ago

Questions on Stack Overflow are expected to relate to programming or software development within the scope defined in the FAQ. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about closed questions here.

3 Answers

up vote 5 down vote accepted

I'm going to correct all the inaccuracies in what you've said. Looks like you're self-taught (isn't a bad thing, by the way).

  • HTML is a mark-up language.
  • PHP is a server-side processing language that can (if needed) output HTML
  • JavaScript is a client-side processing language that can (if needed) modify the document object model (the HTML document, if you prefer, though not strictly accurate)
  • JSON is a mark-up language. Typically used to transfer data.
  • AJAX is a JavaScript technique commonly used to trigger server-side processes from the client without refreshing the page.

So, PHP "builds" your HTML, and JavaScript allows you to enrich it. AJAX is a subset of JS functions (xmlHTTPRequest & co), which allows you to ping PHP pages (or others!) to get data back from them. If they output JSON, you can parse this JSON object to get an object back.

Typical example:

testpage.html

<!doctype html>
<head>
<title>Test page</title>
</head>
<body>
<textarea id="test""></textarea><button id="mybtn">Test</button>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
 $(function() {
  $("#mybtn").click(function() {
   $.ajax({
       url: "page.php",
       type: "GET",
       dataType: "json",
       success: function(d) {
          $("#test").text(d.randomNumber);
       } 
    });
    return false;
   });
  });
  </script>
 </body>
</html>

page.php

<?php echo json_encode(array("randomNumber" => rand(1,10))); ?>

If you run it (I've taken the freedom of hosting it at http://www.sebrenauld.co.uk/testpage.html ), when you click the button, you'll see a random number in the textarea.

What actually happens when you click that button?

When you click the button, your browser fires a request to /page.php via GET. This request returns a JSON object, which jQuery automatically interprets as the d object. jQuery then fires the success callback, which updates the form. Voila!

Any questions, don't hesitate. I'm here to help.

share|improve this answer
thank you very much! as clear as it can get. i understand it now – ealeon 11 hours ago
up vote 1 down vote

Here's a broad overview of how these pieces fit together:

Server vs Client

To understand all the pieces, you need to understand the difference between the server and the client.

When you open a webpage by typing an address into your browser's address bar, clicking a link, etc, your web browser sends a request to another computer sitting somewhere else where the web page you want is stored. It is essentially asking that computer for the webpage, and that computer gets to decide what you get back. We refer to this computer as the "server", since it is "serving" you the webpage.

Once the server does whatever processing it needs to do, it sends the page back to your browser. Your browser then interprets the data you get back and displays it to you in a pretty way (assuming the web designer made it pretty). We refer to your browser as the "client".

Now for the specific technologies you asked about:

PHP

PHP is referred to as a "server-side" language. This means it runs on the server to help produce the webpage that will be sent back to your browser. It runs before your browser ever sees it.

JavaScript

JavaScript is called a "client-side" language. It runs within your browser, changing things, loading new information, making the page interactive. It never runs until the page is loaded (sometimes as the page is loading, but never until your broswer begins interpreting the page). An important thing to remember is that PHP can generate JavaScript within the HTML it produces, since that's where JavaScript lives anyway.

JSON

JSON is an acronym standing for "JavaScript Object Notation". JSON is not a language; it is an element of JavaScript. JSON doesn't do anything; it is a way to represent data in an organized, useful way.

PHP can "print" a JSON object within a block of JavaScript as a way of passing data directly to the client in a useful format. PHP objects can be "dumped" to JSON using a function such as json_encode(), which, generally speaking, returns a JSON representation of a complex array or object.

Note that JSON is much more than just an array. Please look into this more.

AJAX

AJAX is another acronym standing for "Asynchronous JavaScript And XML". (It's a somewhat misleading name, since XML is not necessarily a part of the process and is becoming increasingly rare these days, so don't worry about that part of the name.)

In short, AJAX is also not a language in and of itself; it's more of a technique within JavaScript of requesting more information/data from the server without having to reload the whole webpage.

One of the more common uses of AJAX is, like you said, to request a JSON object from the server. This is by no means the only use for AJAX, but it is a common one, especially within interactive applications.

Priority

Short answer: PHP comes before JavaScript, since it lives on the server; JSON and AJAX are elements of the JavaScript language, so they happen within JavaScript, in the browser.

Whenever your JavaScript makes an AJAX call to request some JSON from the server, there's a good change that PHP will be the language used to interpret the request and send the JSON back to your browser.

--

Hopefully that helps. You should check out resources like Zend and the Mozilla Developer Network. Here are some good places to start:

share|improve this answer
up vote 1 down vote
  • PHP is a dynamic programming language which can produce HTML - it runs on the server
  • JavaScript is a dynamic programming language which runs on the client (browser)
  • JSON is JavaScript Object Notation and isn't specific to PHP, though it can be used to print PHP arrays into JavaScript arrays using PHP.
  • AJAX is a way to make asynchronous requests and receive responses in JavaScript.
  • PHP must produce the HTML containing the tags required to invoke JavaScript, so it comes first.
  • PHP is invoked at the start when producing the page. An AJAX request can call a URL where PHP code resides. JavaScript on the orignal page can be running while PHP is producing the response.
share|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.