Ajax

From Null-pointer

Contents 1 jQuery Ajax 2 Common XMLHttpRequest Object Methods 3 Common XMLHttpRequest Object Properties 4 Code Sample 5 Useful sites 6 See Also

jQuery Ajax

To perform an ajax call on a form submit.

jQuery(document).ready
(
 function()
 {
   jQuery("#myForm").submit
   (
     function()
     {
       var myButton = document.getElementById( 'myButtom' );
       var overviewId  = jQuery("#overviewId").val();
       var overviewText = jQuery("#overviewText").val();
       var pageId = <%=pageId%>

       myButton.disabled = true;
       myButton.value = "processing";

       jQuery.post
       (  
           "/overview/",
           { 
             overviewId: overviewId, overviewText: overviewText, ID: pageId
           },
           function ( data )
           {
             jQuery("#feedback").html(data); 
             myButton.disabled = false;
             myButton.value = "Update"; 
           }
       );
       return false;
     }
   );
 } 
);

<div id="feedback"></div>
<form id="myForm">
 <input type="hidden" name="overviewId" id="overviewId" value="<%=overviewId%>" />
 <input type="text" name="overviewText" id="overviewText" value="" />
 <input type="submit" id="myButton" value="Update" />
</form>

Common XMLHttpRequest Object Methods

Method	Description
abort()	Stops the current request
getAllResponseHeaders()	Returns complete set of headers (labels and values) as a string
getResponseHeader("headerLabel")	Returns the string value of a single header label
open("method", "URL"[, asyncFlag[, "userName"[, "password"]]])	Assigns destination URL, method, and other optional attributes of a pending request
send(content)	Transmits the request, optionally with postable string or DOM object data
setRequestHeader("label", "value")	Assigns a label/value pair to the header to be sent with a request

Common XMLHttpRequest Object Properties

onreadystatechange	Event handler for an event that fires at every state change
readyState	Object status integer: 0 = uninitialized 1 = loading 2 = loaded 3 = interactive 4 = complete
responseText	String version of data returned from server process
responseXML	DOM-compatible document object of data returned from server process
status	Numeric code returned by server, such as 404 for "Not Found" or 200 for "OK"
statusText	String message accompanying the status code

Code Sample

Javascript

function createXMLHttpRequest() 
{
  var ua;
 
  if(window.XMLHttpRequest) 
  {
    try 
    {
      ua = new XMLHttpRequest();
     }
     catch(e) 
    {
      ua = false;
    }
  }
  else if(window.ActiveXObject)
  {
    try 
    {
      ua = new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch(e) 
    {
      ua = false;
    }
  }
  return ua;
}

var req = createXMLHttpRequest();
var reponseTargetId = "";

function handleResponse(  ) 
{
 if(req.readyState == 4)
 {
   var response = req.responseText;
   var update = new Array();
 
   document.getElementById( reponseTargetId ).innerHTML = response;
 }
}

function getContentFor( categoryName ) 
{
  reponseTargetId = categoryName ;
  var targetURL = "/categoryResponse.jsp?categoryName=" + categoryName ;
   //alert( targetURL );
  req.open('get', targetURL );
  req.onreadystatechange = handleResponse   ;
  req.send();
  return false;
}

Useful sites

• Ajax loading gif generator

See Also

• Apple.com - The XMLHttpRequest Object