<?php // RAY_ajax_server.php
error_reporting(E_ALL);
date_default_timezone_set('America/Chicago');
// START THE OUTPUT BUFFER TO CAPTURE THE var_dump() DISPLAY
ob_start();
// MAKE THE OUTPUT EASY TO READ
echo '<pre>';
// SEND BACK THE DATE...
echo date('r');
echo PHP_EOL;
// ... AND THE GET-REQUEST VARIABLES
echo 'GET: ';
var_dump($_GET);
// ... AND THE POST-REQUEST VARIABLES
echo 'POST: ';
var_dump($_POST);
echo '</pre>';
echo PHP_EOL;
// CAPTURE THE OUTPUT BUFFER
$response = ob_get_clean();
// SEND THE CONTENTS OF THE OUTPUT BUFFER
die($response);
When you run that script from the browser you see something like this:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
This loads the latest version of the "minified" jQuery library. The jQuery library is a very large and elaborate JavaScript library. We choose the "minified" version because it uses minimalist syntax and variable names to shrink the size of the code, and thereby improve the performance of your web page by reducing the time it takes to load the jQuery file.
$(document).ready(function(){
This tells jQuery to wait until the document is ready. The reason for this waiting period is because inline JavaScript (not part of a function) is run as soon as the browser encounters the code. By waiting, we ensure that all of the needed parts of the web page have been loaded. The document.ready event occurs after the onLoad event, but usually before the entire web page is loaded. Images, for example, do not have to finish loading before the document is ready. As a practical matter, this is frequently the first line of jQuery code.
$("#signal").click(function(){
This tells jQuery to run the following function when there is a mouse click in the page element named with the id="signal" attribute. If you look into the HTML below, you can see this element on line 23.
indata = $("#xinput").val();
This copies the value from the page element with the id="xinput" attribute and assigns it to the JavaScript variable named "indata."
$.post("RAY_ajax_server.php", {myArg:indata}, function(response){
This makes a POST-method request to the URL Ray_Ajax_Server.php, passing the input data in a request argument named "myArg" and receives the response from the server in a JavaScript variable named "response."
$("#output p#target").html(response);
This tells jQuery to select the page element identified by the id="output" and look inside it for the
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<title>Ajax Example Using jQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
$("#signal").click(function(){
indata = $("#xinput").val();
$.post("RAY_ajax_server.php", {myArg:indata}, function(response){
$("#output p#target").html(response);
});
});
});
</script>
</head>
<body>
<input id="xinput" value="Enter your name here" />
<div id="signal">This is not a link, but Click Me Anyway!</div>
<div id="output">
<p id="static">This element remains unchanged</p>
<p id="target">This element gets the AJAX response</p>
</div>
</body>
</html>
Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.
Comments (3)
Commented:
-Matt
Commented:
Commented: