Scribd
Upload
2 views

12_PHP_Lecture

Uploaded by

Sardarwali Samim
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

12_PHP_Lecture

Uploaded by

Sardarwali Samim
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 25

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

You might also like