Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Asynchronous HTTP request generation in JavaScript (AJAX) A motivating example • Suppose we have a table which was created like this create table cs4408demo (name varchar(60), url varchar(255)); • Suppose we have a utility for adding entries to this table • It might be implemented as on the next slide http://student.cs.ucc.ie/cs1064/jabowen/IPSC/cs4408/addOrg.php <html><head><title> Add Organization utility </title></head><body> <?php if ( ($name) && ($url) ) { $db = mysql_connect("localhost","myUserName","myPassword"); mysql_select_db("stories",$db); $query = "select * from cs4408demo where name='$name'"; $result=mysql_query($query,$db); if ($row=mysql_fetch_array($result)) { echo "Organization already in database"; } else { $query = "insert into cs4408demo (name,url) values ('$name','$url')"; mysql_query($query,$db); echo "Data stored"; } } else {?> <form method=post action="<?php echo $PHP_SELF; ?>"> <p>Name of organization: <input type=text name=name></p> <p>URL of organization's website: <input type=text name=url></p> <button type=submit>Store details in database</button> </form><?php } ?> </body></html> The form looks like this A completed form If the organization is new, the data are stored in the database If the organization is old, the data are rejected When is the check made? • In the above scenario, the user must fill in all the data on the form and submit the form before he learns that he is wasting his time When would it be better to make the check? • It would be better if the user could learn as soon as possible that he is duplicating data that are already in the database • It would be better if could learn this while he is still filling in the form • That is, we can the browser to check the database while the user is still filling in the form Javascript HTTP Request objects • Javascript provides an object class for making HTTP requests • Unfortunately, it has two different names: – In Microsoft browsers it is implemented as an ActiveXObject class called Microsoft.XMLHTTP – In other browsers it is a Javascript object class called XMLHttpRequest() What good are these Javascript HTTP objects? • Suppose we had a separate PHP program which could be called to see if an organization is already in the database • We could use a Javascript HTTP Request object to call this program – immediately after the user has filled in the organization's name on the form – and while he is still filling the rest of the form • If the response to this request says the organization is already present, he could be warned alerted before he submits the form The checkOrg.php program • http://student.cs.ucc.ie/cs1064/jabowen/IPSC/cs4408/checkOrg.php <?php $db = mysql_connect("localhost","myUserName","`myPassword"); mysql_select_db("stories",$db); $query = "select * from cs4408demo where name='$name'"; $result=mysql_query($query,$db); if ($row=mysql_fetch_array($result)) { echo "Organization already in database"; } else { echo "Organization is new"; } ?> Example call Another example call • We could use a Javascript HTTP Request object to call this program • Then we could use a Javascript string search to see if the source code for the response page contains the word already or the word new • If the response page contains the word already, we could alert the user that he is duplicating existing data Example duplication warning Improved utility for adding organizations to database • It is here: http://student.cs.ucc.ie/cs1064/jabowen/IPSC/cs4408/addOrg2.php First part of program is unchanged <html><head><title>Add Organization utility</title></head><body> <?php if ( ($name) && ($url) ) { $db = mysql_connect("localhost","myUserName","myPassword"); mysql_select_db("stories",$db); $query = "select * from cs4408demo where name='$name'"; $result=mysql_query($query,$db); if ($row=mysql_fetch_array($result)) { echo "Organization already in database"; } else { $query = "insert into cs4408demo (name,url) values ('$name','$url')"; mysql_query($query,$db); echo "Data stored"; } } Second part of program is changed else {?> <form method=post action="<?php echo $PHP_SELF; ?>"> <p>Name of organization: <input type=text name=name onChange='check(this.value)' ></p> <p>URL of organization's website: <input type=text name=url></p> <button type=submit>Store details in database</button> </form> <script> ... This will be defined on next few slides ... </script> <?php } ?> </body></html> Second part of program (contd.) function check(name) { if (window.XMLHttpRequest) // Mozilla, Safari, ... { http_request = new XMLHttpRequest(); } else if (window.ActiveXObject) // IE { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } http_request.onreadystatechange = handleResponse; url='http://student.cs.ucc.ie/cs1064/jabowen/IPSC/cs4408/checkOrg.php'+'?name='+name; http_request.open('GET', url,true); http_request.send(null); } function handleResponse() { if (http_request.readyState == 4) //response received { response=http_request.responseText; if (response.search('already') != -1) { alert('Organization already in database'); } } } Second part of program (contd.) function check(name) { if (window.XMLHttpRequest) // Mozilla, Safari, ... { http_request = new XMLHttpRequest(); } else if (window.ActiveXObject) // IE { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } http_request.onreadystatechange = handleResponse; url='http://student.cs.ucc.ie/cs1064/jabowen/IPSC/cs4408/checkOrg.php'+'?name='+name; http_request.open('GET', url,true); http_request.send(null); } function handleResponse() { if (http_request.readyState == 4) //response received { response=http_request.responseText; if (response.search('already') != -1) { alert('Organization already in database'); } } } AJAX methods • abort() Stops the current • requestgetAllResponseHeaders() Returns complete set of headers (labels and values) as a string • getResponseHeader("headerLabel") Returns the string value of a single header label • open("method", "URL"[, asyncFlag[, "userName"[, "password"]]]) Assigns destination URL, method, and other optional attributes of a pending request • send(content) Transmits the request, optionally with postable string or DOM object data • setRequestHeader("label", "value") Assigns a label/value pair to the header to be sent with a request AJAX Properties • onreadystatechange Event handler for an event that fires at every state change • readyState Object status integer: 0 = uninitialized 1 = loading 2 = loaded 3 = interactive 4 = complete • responseText String version of data returned from server process • response XMLDOM-compatible document object of data returned from server process • status Numeric code returned by server, such as 404 for "Not Found" or 200 for "OK" • statusText String message accompanying the status code A "bug" in AJAX • AJAX implementations appear to be overeager to cache responses to requests • In most cases, this does not matter • In those cases where it causes a problem, this over-eager caching can be overcome by inserting a time-stamp into each request • Example on next page Preventing over-eager caching • Suppose the JavaScript variable url already contains the web address and data we want to use in our request • We can prevent caching problems by making each request unique, by giving each request a time-stamp • Here is an example: now = new Date(); url = url+'&time='+now.getTime(); http_request.open('GET', url,true); http_request.send(null);