ajax joining javascript and php 1. asynchronous javascript and xml (without having to refresh) 2
TRANSCRIPT
Web Technologies HTML: Powerful but static CSS: decouples presentation from
structure CGI/PHP
Dynamic image creation database management complex calculations dynamic web content creation
CGI problems: In need of seamless integration Slow response
3
Web Technologies cont’d Flash:
Advantage: Visually impressive movies as web sites,
applications, . . . Impressive results from professional designer Powerful tool for professional developer
Disadvantage: few have both skills
DHTML: HTML + CSS + JavaScript Needs more demanding skills from
developers Example: Gowey’s snow
4
Desktop App vs. InternetIssues Desktop Web application
Cross-platform compatibility
difficult simpler to port between browsers
Stability of deployment difficult only a few large-scale browsers
Code maintenance:patch
reinstall package/Install patch;Who are affected?
Single code baseAccessible by all
Speed real-time slow connection speed
Deliverability none Need to refresh/ response
Other problems NA non-cooperating browsers;non-standard browsers
5
Solution: AJAXPopularized by Google’s Gmail in 3/2004
Read messages without page reload Tag messages without page reload Change folders Spell check of messages while being typed Compose messages Check for new mail regularly View news headlines without page reload Search messages without a page reload Add messages to a quick group and view without page reload Save drafts automatically URL does not change when content is updated Feedback to users
Coined by James Garrett 2/2005
Flickr
6
What does AJAX give us?
Making server-side requests with seamless page-loading
Little to no need for full page refreshes.
7
Traditional server request/response model
Web Server
Web page
New Content
On
Web Page
Server Request
Server Response
8
AJAX internet request/response model
Web Server
Web page
Request/Response1
Request/Response2
Multiple server requests can be made from the page without incurring a further page refresh
Request/Response3
9
Http Requests/Responses When a http request is sent, headers
are passed along to let web server know exactly what it is to be serving and how to handle the request.
Most headers are optional The host header is absolutely required
to let the server know what to serve up. Server then decides what response to
return
10
Code Description
200 OK Returned if the document or file in question is found and served correctly
304 NotModified
Returned if a browser has indicated that it has a local, cached copy, and theserver’s copy has not changed from this cached copy
401Unauthorized
Generated if the request in question requires authorization to access therequested document
403 Forbidden Returned if the requested document does not have proper permissions to beaccessed by the requester
404 Not Found Sent back if the file that is attempting to be accessed could not be found (e.g. ifit doesn’t exist)
500 InternalServer Error
Returned if the server that is being contacted has a problem
503 ServiceUnavailable
Generated if the server is too overwhelmed to handle the request
Common Http Response Codes
11
Method
Description
GET The most common means of sending a request; simply requests a specific resource from the server
HEADSimilar to a GET request, except that the response will come
back without the response body; useful for retrieving headers
POST Allows a request to send along user-submitted data (ideal for web-based forms)
PUT Transfers a version of the file request in question
DELETE Sends a request to remove the specified document
TRACE Sends back a copy of the request in order to monitor its progress
OPTIONS Returns a full list of available methods; useful for checking on what methods a server supports
CONNECT A proxy-based request used for SSL tunneling
Http Request Methods
12
What is AJAX really? AJAX is really just a concept A XMLHttpRequest object on the client
side AJAX describes the interaction of the
client-side XMLHttpRequest object with server–side scripts.
XMLHttpRequest object is instantiated and handled differently by two types of browsers: Microsoft IE creates the object as an ActiveX
control Firefox and Safari as a basic JavaScript object
13
XMLHttpRequest behavior
XMLHttpRequest works in the background without the prerequisite page refresh
Once an instance of the XMLHttpRequest object has been created, methods are available to the user
14
XMLHttpRequest Object methods Method Description
abort() Cancels the current request
getAllResponseHeaders() Returns all HTTP headers as a String type variable
getResponseHeader() Returns the value of the HTTP header specified in the method
open() Specifies the different attributes necessary to make a connection to the server; allows you to make selections such as GET and POST, whether to connect asynchronously, and which URL to connect to
setRequestHeader() Adds a label/value pair to the header when sent
send() Sends the current request15
XMLHttpRequest Methods
abort() To stop the request prematurely. Used when you are concerned about
the length of the connection
16
XMLHttpRequest Methods getAllResponseHeaders() To get the full information on all
HTTP headers that are being passed. Date: Thu, 26 Nov 2009 15:47:06 GMT Server: Apache/2.0.53 (Win32) PHP/5.0.3 X-Powered-By: PHP/5.0.3 Content-Length: 527 Keep-Alive: timeout=15, max=98 Connection: Keep-alive Content-Type: text/html
17
XMLHttpRequest Methods getResponseHeader(“headername”)
To obtain the content of a particular piece of the header.
Useful to retrieve a part of the generally large string obtained from a set of headers.
Example: to retrieve size of requested document
getResponseHeader(“Content-Length”)
18
XMLHttpRequest Methods open(“method”, “URL” [, isAsync [[,
“username”][, “password”]]]) to open a connection to a particular file on the server. method parameter : "GET", "POST", or "PUT" (use "GET" when
requesting data and use "POST" when sending data (especially if the length of the data is greater than 512 bytes).
isAsync boolean - specifies whether the request should be handled asynchronously or not. “true” means that script processing carries on after the send() method, without waiting for a response. “false” means that the script waits for a response before continuing script processing. Default is true.
Not all the arguments in the function are required and can be customized depending on the situation.
19
XMLHttpRequest Methods
setRequestHeader(“label”, “value”) To give the header a string label and
the value of the label May only be invoked after the open() Must be used before the send()
20
XMLHttpRequest Methods
send(“content”) Method to send the request to the
server. If request was sent asynchronously, the
response will come back immediately; otherwise after the response is received.
The parameter “content” is optional Helpful for processing forms – to pass the
values of form elements
21
XMLHttpRequest Properties
onreadystatechange readyState responseText responseXML Status statusText
22
XMLHttpRequest PropertiesProperty Description
onreadystatechange
Used as an event handler for events that trigger upon state changes
readyState contains the current state of the object (0: un-initialized, 1: loading, 2: loaded, 3: interactive, 4: complete)
responseText Returns the response in string format
responseXML Returns the response in proper XML format
status Returns the status of the request in numericalformat (regular page errors are returned, suchas the number 404, which refers to a not founderror)
statusText Returns the status of the request, but in stringformat (e.g. a 404 error would return the stringNot Found). 23
onreadystatechange
Event handler that triggers certain block of code of functions when the state changes
Example: When state changes to complete,
execute a function
24
readyState property Provides a description of the part of
process that the current request is Useful for creating individual actions
based on the state of the request Example:
Execute some code when readySate is loading Stop executing when readyState is complete
25
responseText property
responseText property is returned when the request is processed
Example: request a script, the output of the script is returned through this property
Note: most scripts use this property to pass output to the innerHTML property of an element
26
Status property
Status property determines the response code – see table of response codes
If the file requested could not be found, the status set to 404
28
responseText
statusText
Textual representation of the status property
Example if status is set to 404, statusText is set to Not Found
29
Example 1
Cross-Browser Usage Accommodating differences between
IE and other browsers Sending a Request to the Server See ex01/ex1.html
30
Check if Browser is IE
Create a boolean variable to check for a valid Internet Explorer instance.
var xmlhttp = false; Use
try catch clauses to check new ActiveXObject
to see if browser is IE31
//Create a boolean variable to check for a valid Internet Explorer instance.
var xmlhttp = false;
//Check if we are using IE.try { //If the Javascript version is greater than 5. xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); alert ("You are using Microsoft Internet Explorer.");} catch (e) { //If not, then use the older active x object. try {
//If we are using Internet Explorer. xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); alert ("You are using Microsoft Internet Explorer");} catch (E) { //Else we must be using a non-IE browser. xmlhttp = false;}
}
32
//If we are using a non-IE browser, create a javascript instance of the object.
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {xmlhttp = new XMLHttpRequest();alert ("You are not using Microsoft Internet Explorer");
}
33
Sending a Request to the Server
Must validate for a proper response Must decide whether to use the GET or
POST method to do so. To retrieve information from the server, use
GET. To send info to server, GET is not very good due to inherent size limitations
To send information to the server, use POST Confirm several things:
what page you want to connect to what area to load the page or script into: object
id
38
Sending a Request to the Server
function makerequest(serverPage, objID) { var obj = document.getElementById(objID); xmlhttp.open("GET", serverPage); xmlhttp.onreadystatechange = function() { // validate for a proper response
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { obj.innerHTML = xmlhttp.responseText; } } xmlhttp.send(null);}
39
Summary
Create a new XMLHttpRequest object
Use the object to fire a script and Load it into the appropriate
element on the page
40
Using Ajax for Navigation Dynamically load content into a page via the Ajax
method Since Ajax loads the content exactly where you ask it to,
without refreshing the page, you must note exactly where you are loading content.
Problem: people don’t realize that anything has happened on the page.
Hence for Ajax to be used for navigation, not all page layouts will react well to such functionality
Recommendation: For pages that rely upon navigational menus on top of
screen (rather than bottom, in the content, or on the sides) loading the content below it seems to function best.
41
Example 2: ajax/ex02/test.html
ajax/ex02/test.html is a variant of ajax/ex01/ex1.html Cross-browser usage
more detailed in IE checks Checks non-IE browsers first
Open() method Send(null) in both cases Single link vs multiple links
43
Example ex03a
Expanding and Contracting Content Hiding content and exposing it based on
link clicks ( or hovers, or button presses)
Create access to a large amount of content without cluttering the screen. Add a lot of information in a small amount
of space
44
Example ex03a cont’d Use AJAX to expand and contract a
calendar based upon link clicks Components in C:\wamp\www\ajax\
ex03a: HTML ex3_1.html JavaScript functions.js PHP calendar.php note the flag display_errors = Off in php.ini
45
ex3_1.html
A + image or – image A link: “My Calendar” Clicking on the image or “My
Calendar” shows or hides the calendar of the current month On click, calls showHideCalendar()
function in functions.js
47
functions.js
Create ActiveXObject object or XMLHttpRequest object depending on client’s browser
showHideCalendar() function If showCalendar variable is true,
make an Ajax call to the server to fetch the calendar.php script
48
calendar.php
Uses the date() function to determine beginning and end dates of current month
Build the calendar
49
Incremental improvements
Ex03a is rather plain Add some color – CSS Add a task recording mechanism Autcomplete
See Ex03b
50
Example 3 Program Structure Ex03b.html includes:
JavaScript functions.js CSS styles.css Components
Create tasks Auto complete – type w, displays Wing
Huen Task box Toggle to show/hide Calendar Calendar
51
Calendar.php with server-side scripting and AJAX
Get the month and year of today Create a table with the proper
month Color
Normal color Mouseover and mouseout color Today’s color
Alternate years and months52
Improvements made to ex03a
Presentation: styles.css Autocomplete: JavaScript function autocomplete()
to call PHP script autocomplete.php list of hard-coded names in autocomplete.php for
matches On pressing w, “Wing Huen” is displayed. There are two names starting with J, both names will be
prompted when j or J is pressed Task Creation: Add some more functions to
functions.js createform function to call another PHP script
theform.php PHP theform.php
57
JavaScript functions.js Create XMLHttpRequest object xmlhttp
Cross-browser detection Show calendar
var obj = document.getElementById(objID); var serverPage = "calendar.php"; xmlhttp.open("GET", serverPage); obj.innerHTML = xmlhttp.responseText;
Hide calendar document.getElementById(objID).innerHTML = "";
58
Auto-Complete Gmail
When entering email address of receiver, Gmail searches the list of contacts (with AJAX) and drops down a list of all matches
Select one to fill requested field In Ex03b:
Feed a list of objects to an array Display them based on what the user has
entered The user elects a name by clicking
59
Additional functions in functions.js of ex3_1b
Createform() Displays a hidden div beside the cursor Loads a file theform.php through AJAX
Support functions to cleanup and fetch closetask() hides the task window findPosX() and findPosY() return X and Y
positions for the auto-complete functionality
60
Major JS functions for Auto-Complete
autocomplete() checks for the currently inputted string
in text box (via onkeypress event) Passes the string (sstring) to the script
autocomplete.php via $_GET and AJAX If inputted string matches any of the
built-in names, display them for user to select
Setvalue() sets a value to the object for autocomplete div
61
Form Validation in ex3_1c To validate username
Add a Submit button to call JS function validateform
validateform uses AJAX to access PHP script validator.php
validator.php contains the same list of valid usernames, simulating a DB
If a match is found, submit the form If no match, display an error seamlessly The form stays populated
62
Tool Tips in ex03d a little box with information appearing above a properly
placed cursor. In non-Ajax enabled web-sites, they are hard coded or
potentially loaded through some server-side tricks Will use Ajax to dynamically display a box with all
currently assigned tasks when a user hovers over a certain date.
PHP script would have to scour the database and return any instances of tasks associated with said key.
Will just use an array of tasks for now Changes:
calling a checkfortasks function, fired by the onmouseover event
hidetask function, that fires on the onmouseout event Effect: the current date that a user is hovering over will be
passed to the appropriate functions which are located in the functions.js file
65
JS checkfortasks() -> PHP taskchecker.php checkfortasks function will accept a date
and pass it along (via Ajax) to taskchecker.php
taskchecker.php would usually read from a DB and show the appropriate tasks for the current date in a dynamically created hovering div
To simplify, we will use an associative array.
Put in the associative array in $tasks of taskchecker.php
66
function checkfortasks (thedate, e) {theObject = document.getElementById("taskbox");theObject.style.visibility = "visible";
var posx = 0;var posy = 0;
posx = e.clientX + document.body.scrollLeft;posy = e.clientY + document.body.scrollTop;
theObject.style.left = posx + "px";theObject.style.top = posy + "px";
serverPage = "taskchecker.php?thedate=" + thedate;objID = "taskbox";
var obj = document.getElementById(objID);xmlhttp.open("GET", serverPage);xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {obj.innerHTML = xmlhttp.responseText;
}}
xmlhttp.send(null);} 67
<?php//taskchecker.php//Actual Task dates normally be loaded from a
database.$tasks = array ("2007-11-22" => 'Thanksgiving.',
"2007-11-23" => 'Shopping!!!', "2007-11-19" => 'CS346 Exam2', "2007-11-26" => 'Study AJAX', "2007-11-28" => 'AJAX class 2', "2007-11-30" => 'AJAX class 3');
$outputarr = array ();
//Run through and check for any matches.while ($ele = each ($tasks)){
if ($ele['key'] == $_GET['thedate']){$outputarr[] = $ele['value'];
}}
taskchecker.php part 1
68
//If we have any matches...if (count ($outputarr) > 0) {?> <div class="taskchecker"> <div class="tcpadding"><?php for ($i = 0; $i < count ($outputarr); $i++) {
echo $outputarr[$i] . "<br />"; }?> </div> </div><?php }?>
Taskchecker.php part 2
69
function hidetask () {tObject = document.getElementById("taskbox");
tObject.style.visibility = "hidden";tObject.style.height = "0px";tObject.style.width = "0px";
}
70
Integrating Javascript, AJAX, PHP and MySQL Ex4_1.php grabs a random entry from
DB and displays it in an empty field(div) Disables the slot if already filled. Clicking a field in Ex4_1.php calls JS
function grabword Grabword runs AJAX
to retrieve a random item from DB and display it in the field or
disable the field if filled
72
mysql> show databases;+--------------------+| Database |+--------------------+| information_schema || books || cs346 || mailinglist || mysql || products || testdb1 |+--------------------+7 rows in set (0.14 sec)
From MySQL Console
73
mysql> create database ex04a;Query OK, 1 row affected (0.08 sec)
mysql> show databases;+--------------------+| Database |+--------------------+| information_schema || books || cs346 || ex04a || mailinglist || mysql || products || testdb1 |+--------------------+8 rows in set (0.02 sec)
Create a database in WAMPOn cs346, no need to create a database. Just use the one created for you.
74
mysql> use ex04a;Database changedmysql> create table block ( -> blockid int NOT NULL PRIMARY KEY, -> content varchar(20) -> );Query OK, 0 rows affected (0.27 sec)
mysql> show tables;+-----------------+| Tables_in_ex04a |+-----------------+| block |+-----------------+1 row in set (0.00 sec)
Create a table called block in database ex04a
75
mysql> describe block;+---------+-------------+------+-----+---------+-------+| Field | Type | Null | Key | Default | Extra |+---------+-------------+------+-----+---------+-------+| blockid | int(11) | NO | PRI | NULL | || content | varchar(20) | YES | | NULL | |+---------+-------------+------+-----+---------+-------+2 rows in set (0.00 sec)
Check the schema
76
mysql> insert into block values (1, 'frying');Query OK, 1 row affected (0.02 sec)
mysql> insert into block values (2, 'awaits');Query OK, 1 row affected (0.00 sec)
mysql> insert into block values (3, 'similar');Query OK, 1 row affected (0.00 sec)
mysql> insert into block values (4, 'invade');Query OK, 1 row affected (0.00 sec)
mysql> insert into block values (5, 'profiles');Query OK, 1 row affected (0.02 sec)
mysql> insert into block values (6, 'clothes');Query OK, 1 row affected (0.00 sec)
mysql> insert into block values (7, 'riding');Query OK, 1 row affected (0.00 sec)
mysql> insert into block values (8, 'postpone');Query OK, 1 row affected (0.00 sec)
INSERT the entries
77
mysql> select * from block;+---------+----------+| blockid | content |+---------+----------+| 1 | frying || 2 | awaits || 3 | similar || 4 | invade || 5 | profiles || 6 | clothes || 7 | riding || 8 | postpone |+---------+----------+8 rows in set (0.00 sec)
Query the table with a SELECT statement
78
Sequence of events Ex4_1.php displays 8 fields On clicking any field, grabword() in
functions.js is called If field is empty, run AJAX call to
wordgrabber.php to fill it, otherwise blank the field
wordgrabber.php queries the database $querystr = "SELECT content FROM
block ORDER BY RAND() LIMIT 1";79