Aims:
A browser sends an HTTP request to a server...
But a client-side script can also send a HTTP request
In the case of synchronous response handling...
In the case of asynchronous response handling...
Class exercise: Asynchronous response handling is a little more complicated to program, but synchronous response handling has a severe disadvantage. What is it?
XMLHttpRequest
objectsSummary of what your client-side script needs to do in order to send an HTTP request:
XMLHttpRequest
example
var request = new XMLHttpRequest();
request.onreadystatechange =
...some function...;
request.open("GET",
url, true);
request.setRequestHeader("User-Agent", "XMLHttpRequest");
request.setRequestHeader("Accept-Language", "en");
request.send(null);
request
)request.status
: the status code sent back by the serverrequest.getResponseHeader("...")
: to access the specified response header
request.getAllResponseHeaders()
: to access all response headers as an array
request.responseText
: to access the body of the server's response
as a string
request.responseXML
: to access the body of the server's response
as XML (inc. XHTML)
function handle_response() { // Check that the response has fully arrived if ( request.readyState == 4 ) { // Check the request was successful if ( request.status == 200 ) { // do whatever you want to do with // request.responseText or request.responseXML } } }
Ajax...
XMLHttpRequest
s),
the DOM, XHTML and CSSWhat's the idea...
XMLHttpRequest
to fetch from the server
just the content that has changedXMLHttpRequest
s were available from about 2001 but little usedXMLHttpRequest
sregister.php
from the lecture on user authenticationcheck_name_available.js
)
will
XMLHttpRequest
to the server, asking it to run a PHP
script (check_name_available.php
)check_name_available.php
<?php // Cleans a string, $str, to make it suitable for querying/ // storing in databases. // Specifically, it removes leading and trailing spaces and // adds slashes to escape single quotes, double quotes and // backslashes. function clean($str) { return mysql_real_escape_string(trim($str)); } // Include the PHP to connect to the database include('dbconnect.php'); // Get the user name $user_name = clean($_GET['user_name']); // Check whether this user name is in use $sql = "SELECT * FROM users WHERE user_name = '{$user_name}'"; $dbresult = mysql_query($sql); if ( ! $dbresult ) { die('Error in query ' . mysql_error()); } if (mysql_num_rows($dbresult) > 0) { // User name is already in use echo "false"; } else { // User name is available echo "true"; } ?>
check_name_available.js
if ( window.addEventListener ) { window.addEventListener("load", init, false); } else if ( window.attachEvent ) { window.attachEvent("onload", init); } function init() { document.getElementById("nameField").onkeypress = set_link; document.getElementById("checker").onclick = check_name_available; } function set_link() { document.getElementById("checker").innerHTML = '<a href="#">Check name is available</a>'; } function check_name_available() { var url = "check_name_available.php?user_name=" + document.getElementById("nameField").value; var request = new XMLHttpRequest(); request.onreadystatechange = function() { // Check that the response has fully arrived if ( request.readyState == 4 ) { // Check the request was successful if ( request.status == 200 ) { if ( request.responseText == 'true' ) { document.getElementById("checker").innerHTML = "Name available"; } else { document.getElementById("checker").innerHTML = "Name not available"; } } } } request.open("GET", url, true); request.send(null); }