Aug 08

Ajax: An Overview #65

  • Ajax: dynamically changes a portion of the current web-page without refreshing the total web-page. Resembles the way IFrame works. So far I know, google uses IFrame to display/refresh maps in web-pages
  • XMLHttpRequest is the object that serves the purpose of Ajax
  • The way it works: create an instance of the XMLHttpRequest object, send request to the back-end web-page that will do some processing and perhaps return some data, receive the response data, dynamically change the content of the target area, you may need to get a reference to the target area using DOM, after sending request – you have to wait for the response to come back
  • create an instance of the XMLHttpRequest object: It varies for the different browsers. IE provides ActiveX Control for the purpose. A sample code can be as follows:
  •   function getAjaxObject(){    var ajaxObject = false;    if (window.XMLHttpRequest){         ajaxObject = new XMLHttpRequest();    }else if (window.ActiveXObject) {      try{        ajaxObject = new ActiveXObject("Msxml2.XMLHTTP");      }catch(e){         try{          ajaxObject = new ActiveXObject("Microsoft.XMLHTTP");         }catch(e){           ajaxObject = false;         }      }    }    return ajaxObject;   }
  • XMLHttpRequest has three core components. onreadystatechange – event to notify response has come or identify server activity, open – method , send method
  • use of onreadystatechange 
    if (ajaxObject){//takeAction - reference to a function   ajaxObject.onreadystatechange = takeAction; }
  • Open method specifies the server side script to handle the request, data to send to the server, method of sending (GET, POST) : Required: type of request (first argument), location of the file in the server (2nd argument)
  • Open method: third argument: true = processing will be done asynchronously, false = synchronous processing – browser will stop processing until response comes [true is usually better]
  • send : send method initiates the request : also passes data to the server
  • For GET method the argument can be set to null, for POSt method the argument can be a query string such as “id=500&name=keith&age=18”
  • use setRequestHeader() – to provide metadata
  • Sample code: 
     var ajaxObject = getAjaxObject(); if (ajaxObject ){    ajaxObject.onreadystatechange = takeAction;     ajaxObject.open("POST","file.jsp", true);    ajaxObject.setRequestHeader("Content-type", "application/x-www-form-urlencoded");    ajaxObject.send("id=500&name=keith&age=18"); }
  • How to receive and process the response:
  • The readyState property indicates the current status of the request. 0 – Uninitialized, 1 – Loading, 2 – Loaded, 3 – interactive, 4 – complete
  • each time the value of readyState changes onreadystatechange – event is triggered. At value 4, we can collect the response and change the web-page dynamically
  • Sample: 
     function takeAction(ajaxObject){  if (ajaxObject.readyState == 4) {     //do something with the response  } }
  • status is another property to consider – it indicates the status of sending request like 404 – not found, 200 = success, 304 = not modified
  • The prev function 
     function takeAction(ajaxObject){  if (ajaxObject.readyState == 4) {     if (ajaxObject.status == 200 || ajaxObject.status == 304){ //response was sent succesfully           //do something with the response     }  } }
  • responseText is the response from the server
  •  function takeAction(ajaxObject){  if (ajaxObject.readyState == 4) {     if (ajaxObject.status == 200 || ajaxObject.status == 304){ //response was sent succesfully           //do something with the response          alert(ajaxObject.responseText);     }  } }
  • responseXML can be used when the response was sent as xml and the response header is “text/xml”
  • All together 
      function getAjaxObject(){    var ajaxObject = false;    if (window.XMLHttpRequest){         ajaxObject = new XMLHttpRequest();    }else if (window.ActiveXObject) {      try{        ajaxObject = new ActiveXObject("Msxml2.XMLHTTP");      }catch(e){         try{          ajaxObject = new ActiveXObject("Microsoft.XMLHTTP");         }catch(e){           ajaxObject = false;         }      }    }    return ajaxObject;   }  function entryPoint(){    var ajaxObject = getAjaxObject();     if (ajaxObject ){    ajaxObject.onreadystatechange = function(){      takeAction(ajaxObject);     };    ajaxObject.open("POST","file.jsp", true);    ajaxObject.setRequestHeader("Content-type", "application/x-www-form-urlencoded");    ajaxObject.send("id=500&name=keith&age=18"); } } function takeAction(ajaxObject){  if (ajaxObject.readyState == 4) {     if (ajaxObject.status == 200 || ajaxObject.status == 304){ //response was sent succesfully           //do something with the response          alert(ajaxObject.responseText);          var testDiv = document.getElementById("test");          testDiv.innerText = ajaxObject.responseText;      }  } }
  • Processing Response Data
  • The usual practice: response data can be in one of three formats: XML, JSON, HTML. And may be plain text.
  • XML is the most common. example receive: var data = ajaxObject.responseXML; Here we can use the DOM functions to parse the XML data
  • Example: 
    var data = ajaxObject.responseXML;data.getElementsByTagName("name")data.getElementsByTagName("name")[0]data.getElementsByTagName("name")[0].firstChilddata.getElementsByTagName("name")[0].firstChild.nodeValueSimilarly, you can use other DOM functions
  • To change the contents of the web-page dynamically, you can use the DOM methods like — create, set, innerText, innerHtml (use carefully) methods. Check the JavaScript DOM article [846] in this web-site. adding and removing childs/elements may be required in some situations – DOM also supports that
  • You can also send data as JSON from the server side like: JSON format:
    {“person”:{ “name”:”Keith Tang”, “school”:”uofm” }}
  • Receiving and extracting information from JSON: [content type will be text] 
     var data = eval('('+ ajaxObject.responseText +')'); var name = data.person.name; var school = data.person.school;
  • Response data as HTML
  • The response can come as HTML. This may be useful, if only one area of the web-page is affected and we want to put the HTML response in that area. Otherwise it may not be great. Also, we need to use innerHTML method that was introduced by IE and later adopted by others. Still, it’s not a standard (W3C)
  • Example: The content type of response data should be text/html 
           if (ajaxObject.status == 200 || ajaxObject.status == 304){ //response was sent succesfully           //do something with the response          alert(ajaxObject.responseText);          var testDiv = document.getElementById("test");          testDiv.innerHTML = ajaxObject.responseText;      }

From: http://sitestree.com/?p=4969
Categories:65
Tags:
Post Data:2009-03-30 16:04:56

    Shop Online: <a href='https://www.ShopForSoul.com/' target='new' rel="noopener">https://www.ShopForSoul.com/</a>
    (Big Data, Cloud, Security, Machine Learning): Courses: <a href='http://Training.SitesTree.com' target='new' rel="noopener"> http://Training.SitesTree.com</a> 
    In Bengali: <a href='http://Bangla.SaLearningSchool.com' target='new' rel="noopener">http://Bangla.SaLearningSchool.com</a>
    <a href='http://SitesTree.com' target='new' rel="noopener">http://SitesTree.com</a>
    8112223 Canada Inc./JustEtc: <a href='http://JustEtc.net' target='new' rel="noopener">http://JustEtc.net (Software/Web/Mobile/Big-Data/Machine Learning) </a>
    Shop Online: <a href='https://www.ShopForSoul.com'> https://www.ShopForSoul.com/</a>
    Medium: <a href='https://medium.com/@SayedAhmedCanada' target='new' rel="noopener"> https://medium.com/@SayedAhmedCanada </a>