SLIDE 1
Introduction to Document Object Model Every thing in browsing - - PowerPoint PPT Presentation
Introduction to Document Object Model Every thing in browsing - - PowerPoint PPT Presentation
Introduction to Document Object Model Every thing in browsing window is Object DOM is an API for valid HTML and well formed XML documents EXtensible Markup Language XML is a markup language much like HTML XML was designed
SLIDE 2
SLIDE 3
EXtensible Markup Language XML is a markup language much like HTML XML was designed to carry data, not to
display data
XML tags are not predefined. You must define
your own tags
SLIDE 4
Whenever your web browser fetches a file (a
page, a picture, etc) from a web server
HTTP is a Request/Response Protocol
SLIDE 5
AJAX = Asynchronous Javascript and XML AJAX allows web pages to be updated
asynchronously by exchanging small amounts of data with the server behind the scenes.
AJAX was made popular in 2005 by Google,
with Google Suggest.
SLIDE 6
AJAX is not new technology. AJAX is based
- n internet standards:
- 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)
SLIDE 7
SLIDE 8
All modern browsers support the
XMLHttpRequest object
- IE7+, Firefox, Chrome, Safari, and Opera
- IE5 and IE6 use an ActiveXObject
variable=new XMLHttpRequest(); variable=new ActiveXObject("Microsoft.XMLHTTP");
SLIDE 9
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"); }
SLIDE 10
open(method,url,async)
- xmlhttp.open("GET","ajax_info.php",true);
send(string)
- xmlhttp.send();
SLIDE 11
Sync / Async
SLIDE 12
Response by text
- document.getElementById("myDiv").innerHTML=xml
http.responseText;
Response by XML
- xmlDoc=xmlhttp.responseXML;
txt=""; x=xmlDoc.getElementsByTagName("ARTIST"); for (i=0;i<x.length;i++) { txt=txt + x[i].childNodes[0].nodeValue + "<br>"; } document.getElementById("myDiv").innerHTML=txt;
SLIDE 13
XMLHttpRequest is a Javascript Object Properties
- readyState
- responseText
- responseXML
- status
- statusText
Event Handler
- onreadystatechange
SLIDE 14
Value Definition Uninitialized Object contains no data 1 Loading Object is currently loading its data 2 Loaded Object has finished loading its data 3 Interactive User may interact with the object even though it’s not fully loaded 4 Complete Object has finished initializing
SLIDE 15
Value Definition 200 OK 400 Bad Request 401 Unathorized 403 Forbidden 404 Not Found 500 Internal Server Error
SLIDE 16
abort() getAllResponseHeaders() getResponseHeader(“header name”) open(“method”, “url”, async, [“user”,
“passwd”)
- open(“GET”, “myfile.xml”, true)
send(content) setRequestHeader(“lable”, “value”)
SLIDE 17
SLIDE 18
SLIDE 19
SLIDE 20
jqXHR object
- Result of ajax request in jQuery
- Properties
▪ readyState ▪ status ▪ statusText ▪ responseXML or responseText
- methods
▪ setRequestHeader(name, value) ▪ getAllRequestHeaders() ▪ getResponseHeader() ▪ abort()
SLIDE 21
jQuery.ajax() $.ajax()
- Sending asynchronous request
- $.ajax( url, [settings])
- Settings
▪ async:false [default ‐> true] ▪ beforeSend(jqXHR, settings) ▪ complete(jqXHR, textStatus)
▪ textStatus ‐> success, notmodified, error, timeout, abort, parsererror
▪ …
SLIDE 22
SLIDE 23
type
- GET, POST, PUT, DELETE
dataType
- Server response expected data type
▪ Text ▪ Script ▪ Html ▪ XML ▪ JSON
SLIDE 24
success
done
- Callback function
- Successful request
SLIDE 25
cache
- Caching requested page in browser
- false for script and true for others by default
SLIDE 26
data async
SLIDE 27