Transcript Week13 - Seneca College

INT222 - Internet Fundamentals
Shi, Yue (Sunny)
Office: T2095
[email protected]
SENECA COLLEGE
Outline
• AJAX
2
Request to Server
- Traditional
• Make a request to a server
-> "go" to a URL
• The user clicks on a button or a link.
• The browser creates a URL for that action and queries the
server for it.
• The server sends back a new page.
• The browser leaves the old page and displays the new page
3
Request to Server
- using AJAX
•
•
•
•
The user clicks on a button or a link.
An XMLHttpRequest object is created
A callback function is associated with that object
The request for that page is sent to the server asynchronously
(in the background).
• The server handles the request.
• The callback function modifies a part of the page dynamically
using DOM access methods.
4
AJAX
Asynchronous JavaScript And XML
• Not a new programming language.
• The art of exchanging data with a server, and
updating parts of a web page - without
reloading the whole page.
• A new technique for creating better, faster,
and more interactive web applications with
the help of XML, HTML, CSS and Java Script.
5
AJAX
Asynchronous JavaScript And XML
• Uses:
– HTML for content,
– CSS for presentation,
– DOM & JavaScript for dynamic content display.
• Conventional web application: transmits information to
and from the sever using synchronous requests.
• With AJAX when submit is pressed, JavaScript will make a
request to the server, interpret the results and update the
current screen.
6
AJAX
Asynchronous JavaScript And XML
• XML is commonly used as the format for receiving server
data, although any format, including plain text, can be used.
• AJAX is a web browser technology independent of web
server software.
• A user can continue to use the application while the client
program requests information from the server in the
background
• Intuitive and natural user interaction. No clicking required
only Mouse movement is a sufficient event trigger.
• Data-driven as opposed to page-driven.
7
Technologies Used in AJAX
• XMLHttpRequest object (to exchange data
asynchronously with a server)
• JavaScript/DOM (to display/interact with
the information)
• CSS (to style the data)
• XML (often used as the format for
transferring data)
8
AJAX Examples
• Google Suggest
– As you type, Google will offer suggestions. Use the arrow keys to
navigate the results
• Gmail
– Gmail is a new kind of webmail, built on the idea that email can be
more intuitive, efficient and useful
• Google Maps
– A user can drag the entire map by using the mouse instead of clicking
on a button or something
• Yahoo Maps (new)
– Now it's even easier and more fun to get where you're going!
• Youtube
• Facebook tabs.
9
AJAX Browser Support
• Mozilla Firefox 1.0 and above
• Microsoft Internet Explorer 5 and above
• Apple Safari 1.2 and above.
• Google Chrome
• Opera 7.6 and above
 Need to take care of different browsers.
10
How AJAX Works
11
Steps of AJAX Operation
1.
2.
3.
4.
A client event occurs
An XMLHttpRequest object is created
The XMLHttpRequest object is configured
The XMLHttpRequest object makes an asynchronous request
to the Webserver.
5. Web server returns the result containing XML document.
6. The XMLHttpRequest object processes the result.
7. The HTML DOM is updated
12
Example AJAX Code
• Ex_ajax.html
• Ex_ajax.js
• Hello.txt
13
Create an XMLHttpRequest Object
•
•
•
•
variable=new XMLHttpRequest();
variable=new ActiveXObject("Microsoft.XMLHTTP");
E.g.:
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
14
XMLHttpRequest Methods
• Send a Request To a Server
• open(method,url,async)
method: the type of request: GET or POST
url: the location of the file on the server
The file can be any kind of file, e.g., .txt, .xml, .asp and .php (which can
perform actions on the server before sending the response back).
async: true (asynchronous) or false (synchronous)
• E.g.:
– ajaxRequest.open("GET", "hello.txt", true);
• send(string)
Sends the request off to the server.
string: Only used for POST requests
• E.g.:
–
ajaxRequest.send(null);
15
GET V.S. POST
• GET is simpler and faster than POST, and can be
used in most cases.
• use POST requests when:
– A cached file is not an option (update a file or database
on the server)
– Sending a large amount of data to the server (POST has
no size limitations)
– Sending user input (which can contain unknown
characters), POST is more robust and secure than GET
16
XMLHttpRequest Properties
• Server Response
• responseText
Returns the response as a string.
• E.g.:
– document.myForm.display1.value = ajaxRequest.responseText;
• responseXML
Returns the response as XML.
17
XMLHttpRequest Properties
• onreadystatechange
An event handler for an event that fires at every
state change.
• readyState
Holds the status of the XMLHttpRequest object.
Changes from 0 to 4:
0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready
18
XMLHttpRequest Properties
• status
Returns the status as a number:
200: "OK"
404: Page not found
• statusText
Returns the status as a string:
"OK“
"Not Found"
19
• The end of the topics for the semester.
• Good luck for all your exams!
Thank you!
20
Thank you!