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. HTML)
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, HTML and CSS
What's the idea…
XMLHttpRequest
to
fetch from the server just the content that has changed
XMLHttpRequest
s were available from about 2001
but little used
XMLHttpRequest
s
register.php
from the lecture on
user authentication
check_name_available.js
) will
XMLHttpRequest
to the server,
asking it to run a PHP script
(check_name_available.php
)
check_name_available.php
require_once( 'validation_functions.php' ); $errors = array(); // Connect to database $dbconnection = mysqli_connect( $host, $username, $password, $dbname ); if ( ! $dbconnection ) { die("problem"); } // Get the user name $username = get_required_string( $_GET, 'username', 'Username', 30, $errors ); if ( count($errors) > 0 ) { die("error"); } // Check whether this user name is in use $sql_retrieve = "SELECT * FROM users WHERE username = '{$username}'"; $dbretrieve_result = mysqli_query( $dbconnection, $sql_retrieve ); if ( ! $dbretrieve_result ) { die("problem"); } if ( mysqli_num_rows( $dbretrieve_result ) > 0 ) { // User name is already in use echo "in_use"; } else { // User name is available echo "available"; }
check_name_available.js
if ( window.addEventListener ) { window.addEventListener("load", init, false); } else if ( window.attachEvent ) { window.attachEvent("onload", init); } function init() { document.getElementById("username").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?username=" + document.getElementById("username").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 == 'available' ) { document.getElementById("checker").innerHTML = "Name available"; } else if ( request.responseText == 'in_use' ) { document.getElementById("checker").innerHTML = "Name not available"; } } } } request.open("GET", url, true); request.send(null); }