JavaScript
  Home arrow JavaScript arrow Page 2 - Parsing AJAX Responses with JavaScript and...
Dev Articles Forums 
ADO.NET  
Apache  
ASP  
ASP.NET  
C#  
C++  
ColdFusion  
COM/COM+  
Delphi-Kylix  
Design Usability  
Development Cycles  
DHTML  
Embedded Tools  
Flash  
Graphic Design  
HTML  
IIS  
Interviews  
Java  
JavaScript  
MySQL  
Oracle  
Photoshop  
PHP  
Reviews  
Ruby-on-Rails  
SQL  
SQL Server  
Style Sheets  
VB.Net  
Visual Basic  
Web Authoring  
Web Services  
Web Standards  
XML  
Mobile Linux 
App Generation ROI 
IBM® developerWorks 
Sun Developer Network 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
JAVASCRIPT

Parsing AJAX Responses with JavaScript and the innerHTML Property
By: Alejandro Gervasio
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 3 stars3 stars3 stars3 stars3 stars / 6
    2007-10-30

    Table of Contents:
  • Parsing AJAX Responses with JavaScript and the innerHTML Property
  • Working with HTTP XML Request objects
  • Parsing web server responses
  • The full source code of the sample AJAX application

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    ADVERTISEMENT


    Parsing AJAX Responses with JavaScript and the innerHTML Property - Working with HTTP XML Request objects


    (Page 2 of 4 )

    In order to demonstrate how to parse web server responses via the popular "responseText" property of AJAX, I'm first going to define a short JavaScript function. It will be tasked with sending HTTP requests via an XML HTTP Request object to a specified URL on the server.

    Having said that, here's the complete definition for this brand new function:

    function sendHttpRequest(url,callbackFunc,respXml){

    var xmlobj=null;

    try{

      xmlobj=new XMLHttpRequest();

    }

    catch(e){

      try{

        xmlobj=new ActiveXObject("Microsoft.XMLHTTP");

    }

    catch(e){

      alert('AJAX is not supported by your browser!');

       return false;

      }

     }

    xmlobj.onreadystatechange=function(){

      if(xmlobj.readyState==4){

      if(xmlobj.status==200){

    respXml?eval(callbackFunc+'(xmlobj.responseXML)'):eval
    (callbackFunc+'(xmlobj.responseText)');

      }

     }

    }

    // open socket connection

      xmlobj.open('GET',url,true);

    // send http header

    xmlobj.setRequestHeader('Content-Type','plain/text; charset=UTF-
    8');

    // send http request

      xmlobj.send(null);

     }

    The signature that corresponds to the above function should be familiar to you, since I already used in some of my previous articles on AJAX. As you can see, the prior "sendHttpRequest()" JavaScript function accepts a few straightforward input arguments, such as the name of the file to fetch on the server, and then the name of the callback function that will be invoked when the request has been successfully triggered, and finally a Boolean flag that indicates whether or not the respective server response should be evaluated as XML. Quite simple to grasp, right?

    Okay, so I built a JavaScript function that's capable of performing an HTTP request to a given web server. What's next? Good question. Assuming that you had no major problems understanding how the previous JavaScript function works, it's time to develop a basic hands-on example. In this example, some database records, previously fetched from a sample MySQL table via AJAX, will be parsed properly in the client by using the "innerHTML" JavaScript property.

    To see how this example will be created, click on the link below and keep reading.

    More JavaScript Articles
    More By Alejandro Gervasio


       · Over the course of this initial installment of the series, the JavaScript...
     

    JAVASCRIPT ARTICLES

    - Using Click Interceptions with a Database-Dr...
    - Using JavaScript Click Interceptions in an I...
    - Using Click Interceptions with JavaScript
    - QuickSort in Action
    - Quicksort
    - Using Mod_Security to Protect Your Server
    - Detecting and Countering Server Intrusions
    - Securing Your Web Server
    - Building a Secure Web Server
    - Protecting the Server
    - Book Review: Learning the Yahoo! User Interf...
    - Dynamically Generate a Selection List in a R...
    - Intergrate DWR into Your Java Web Application
    - Detect Browser Compatibility with the Reques...
    - Using the EXT JS Date Picker Widget






    © 2003-2008 by Developer Shed. All rights reserved. DS Cluster 6 hosted by Hostway
    Stay green...Green IT