2017-12-14
513
As we mentioned, Ajax libraries are linked to from the script tag. You can either host the Ajax files on your local server or link to them from a cloud server such as Google. Below is an example of linking an Ajax library to a file hosted on the local web server.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.min.js">
</script>
</head>
<body>
<div>
This is where your Ajax content is shown.
</div>
</body>
</html>
Notice we added a "type" property to the script tag element. This lets the HTML engine know that you're linking an Ajax library. In this example, the linked library is jQuery, which is probably the most common Ajax library for making database calls to the web server asynchronously.
We've also created a div tag with the default text "This is where your Ajax content is shown." This text is shown by default to the user, but you'll probably have a button or user input element that changes this content to something that matches the response from the user. For instance, you could have a button that displays content based on input from a web server. Again, the input is request asynchronously, so the page does not reload in the browser. Instead, the button makes a call to the JavaScript library and displays the response in the div element. Let's add this functionality to the previous HTML example.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.min.js">
</script>
<script type="text/javascript">
function displayValue (value)
{
xmlhttp.open("POST","getName.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("userinput=" + value);
var response=xmlhttp.responseText;
document.getElementById("ajaxResponse").innerHTML = response;
}
</script>
</head>
<body>
<div id="ajaxResponse" >
This is where your Ajax content is shown.
</div>
<button type="button" onclick="displayValue('John')">Change It</button>
</body>
</html>
Normally, you would use a value that's dynamically entered by the user, but for this example, we pass a static value to the "displayValue" function. When the user presses the button, the value "John" is passed to the function that in turn passes the value to a php server processing page named "getName.php." Creating PHP code is beyond the scope of this lesson, but the input is taken as a form post in the PHP code. The PHP page sends back an HTML response to the JavaScript Ajax function and the result displays in the div we've named "ajaxResponse." The code also sets the request header, so the web server knows you're posting a form POST object when it sees the Ajax request.
The xmlHttp variable contains the Ajax send and response containers. Incidentally, you can also use the form "GET" functionality that passes the value to the PHP processing page in the page's querystring. The way you use Ajax to pass variables depends on the PHP code in the processing page. Most processing pages use the form POST function, because the values don't display in the querystring and it's more secure.
You might wonder what makes this code different from other JavaScript code, but the important advantage for Ajax versus regular JavaScript is the ability to send input to a processing page on the web server without reloading the entire page. When the user clicks the button, the page does nothing in the UI except call the PHP page. When the page is finished processing, the new text and HTML are displayed in the div. The look for the user is that the div's content changes immediately after clicking the button as if it happened on the front-end. This is especially useful when you have several HTML elements that require additional input before the full form can be processed.
Using Ajax is similar to using JavaScript syntax, but it takes some time to get used to the way the asynchronous page calls work. Use this example to get started with dynamic content based on Ajax calls. You can also use JavaScript syntax within your Ajax functions, because Ajax is actually a JavaScript library. In other words, you can mix JavaScript and Ajax to create a fully function web page.
