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 to carry data, not to display data  XML tags are not predefined. You must define your own tags

 Whenever your web browser fetches a file (a page, a picture, etc) from a web server  HTTP is a Request/Response Protocol

 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.

 AJAX is not new technology. AJAX is based on 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)

 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");

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"); }

 open(method,url,async)  xmlhttp.open("GET","ajax_info.php",true);  send(string)  xmlhttp.send();

 Sync / Async

 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;

 XMLHttpRequest is a Javascript Object  Properties  readyState  responseText  responseXML  status  statusText  Event Handler  onreadystatechange

Value Definition Uninitialized 0 Object contains no data Loading 1 Object is currently loading its data Loaded 2 Object has finished loading its data Interactive 3 User may interact with the object even though it’s not fully loaded Complete 4 Object has finished initializing

Value Definition 200 OK 400 Bad Request 401 Unathorized 403 Forbidden 404 Not Found 500 Internal Server Error

 abort()  getAllResponseHeaders()  getResponseHeader(“header name”)  open(“method”, “url”, async, [“user”, “passwd”)  open(“GET”, “myfile.xml”, true)  send(content)  setRequestHeader(“lable”, “value”)

 jqXHR object  Result of ajax request in jQuery  Properties ▪ readyState ▪ status ▪ statusText ▪ responseXML or responseText  methods ▪ setRequestHeader(name, value) ▪ getAllRequestHeaders() ▪ getResponseHeader() ▪ abort()

 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 ▪ …

 type  GET, POST, PUT, DELETE  dataType  Server response expected data type ▪ Text ▪ Script ▪ Html ▪ XML ▪ JSON

 success done  Callback function  Successful request

 cache  Caching requested page in browser  false for script and true for others by default

 data  async

 $.load()  $.get()  $.post()  $.getJSON()  $.getScript()