iFour Consultancy
AJAX
web Engineering ||
winter 2017
wahidullah Mudaser Lecture 12
[email protected]
AJAX
OUTLINE
What’s Ajax?
JavaScript in 10 minutes
DOM and XMLHttpRequest
Programming Ajax with Mochikit
Ajax Pitfalls
Ajax in gnizr
Asynchronous JavaScript And XML
The idea is to enable interactive Web pages without requiring the browser to
refresh.
Modify the page content,
without refreshing the page
“Give me some data”
JavaScript
code
“Here, data”
Web Server
Browser
Ajax vs. tradition HTTP paradigm
In the tradition HTTP world
Every request results in a new page loading
Dynamic pages are created on the server-side
Data, format and styling are done on the server
In the Ajax world
The result of an Ajax call may only change a small parts of an existing HTML page
Server sets up the page structure, JavaScript code performs the content creation
Data, format and styling are done via JavaScript (CSS and XHTML)
Ajax is a 3-Legged Stool
Ajax
CSS
XHTML JavaScript
JavaScript in 10 Minutes
Say “hello world”
What’s ‘document’?
Write into HTML <body/>
‘document’ is a predefined JavaScript variable that represents the
entire HTML document.
You can read from and write to the current document via this
‘document’ variable.
Loading JavaScript code
Two ways to load your JS code
Inline within the same HTML document
From a separate file on the server
e.g., Replace ‘xxx.js’ with http://path/to/myprogram.js
Define variables
Define Array and Associative Array
Function
Assign Function to a Variable
In JavaScript, you can assign function to a variable.
Additional Resource
JavaScript Tutorial
/http://www.w3schools.com/js/
PPK on JavaScript
http://www.quirksmode.org/
I love it!
DOM and XMLHttpRequest
DOM
Document Object Model
All XHTML doc are XML doc
DOM is a process-model for XML
For reading and writing XML doc
We can use DOM to manipulate XHTML
DOM Tree
http://flickr.com/photos/13571173@N00/411653343/
An XML DOM (not XHTML)
<bookstore>
<book category=“c1”>
<title lang=“en”>Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
</bookstore>
HTML DOM Tree – an example
XMLHttpRequest
Is a specification
Defines an API that provides scripted client functionality for transferring data
between a client and a server.
The XMLHttpRequest object is used to exchange data with a server behind the
scenes.
This means that it is possible to update parts of a web page, without reloading the
whole page. Modify the page content, without
refreshing the page
“Give me some data”
JavaScript
code
“Here, data.”
Web Server
Browser
Done via XMLHttpRequest
Clarification
Use XMLHttpRequest to send and receive data from servers via HTTP
Data sent and received can be any text format, not just XML.
Works over HTTP and HTTPS
All modern browsers (Chrome, IE7+, Firefox, Safari, and Opera) have a built-in
XMLHttpRequest object.
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
Send a Request To a Server
we use the open() and send() methods of the XMLHttpRequest object:
AJAX exmple
Questions?
http://www.ifourtechnolab.com/ ASP.NET Software Development Companies India
