Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
easyajax [2008/09/25 21:42]
Joel Dare
easyajax [2008/11/20 15:16] (current)
Line 1: Line 1:
 +====== EasyAjax ======
 +
 +This is (probably) a temporary document.  ​
 +
 +This is an ajax library I'm writing, to make ajax easier. The library consists of two user functions.  ​
 +
 +===== Syntax =====
 +
 +  ajaxSetup();​
 +
 +  ajaxStart(myObj,​ myMode, myUrl, myFunc);
 +
 +===== Example =====
 +
 +<​code>​
 +// Setup the ajax object
 +var myAjax;
 +myAjax = ajaxSetup();​
 +
 +// Create an example function that will be executed onclick
 +function example() {
 +  ajaxStart(myAjax,​ '​GET',​ '​hello.php?​r='​ + randFoo(), '​sayHello(myAjax)'​);​
 +  return false;
 +}
 +
 +// Setup a function that will be executed when we get a result
 +function sayHello(myObj) {
 +  // Show the response
 +  alert(myObj.responseText);​
 +}
 +</​code>​
 +
 +===== Breakdown =====
 +
 +The ajaxSetup() function sets up the AJAX request and returns the resulting object. ​ The library does this in a way that works under Firefox, IE, and Safari.
 +
 +  // Setup the ajax object
 +  var myAjax;
 +  myAjax = ajaxSetup();​
 +
 +The ajaxStart() function requests a web page and sends the result to any function you specify. Typically it is executed from another function that is triggered by some event, such as an onclick event.
 +
 +// Create an example function that will be executed onclick
 +function example() {
 +  ajaxStart(myAjax,​ '​GET',​ '​hello.php',​ '​sayHello(myAjax)'​);​
 +  return false;
 +}
 +
 +  - myAjax is the object that was returned by ajaxSetup.
 +  - '​GET'​ is the mode, this can be either '​GET'​ or '​PUT'​.
 +  - '​hello.php'​ is the URL to request. ​ We add a random number to prevent caching.
 +  - The last string is the function to execute.
 +
 +===== The Library =====
 +
 +Here is the complete source code for the library.
 +
 +<​code>​
 + // Setup the AJAX (xmlHttp object)
 + function ajaxSetup()
 + {
 + // Setup the object
 + var myObj;
 + // Try Firefox, Opera 8.0+, and Safari
 + try 
 + {
 + myObj=new XMLHttpRequest();​
 + }
 + // Deal with exceptions
 + catch (e)
 + {
 + // Try Internet Explorer
 + try
 + {
 + myObj=new ActiveXObject("​Msxml2.XMLHTTP"​);​
 + }
 +   catch (e)
 + {
 + // Try older IE's (not mobile)
 + try
 + {
 + myObj=new ActiveXObject("​Microsoft.XMLHTTP"​);​
 + }
 + // Ooops, bad news
 + catch (e)
 + {
 + alert("​Your browser does not support AJAX!"​);​
 + return false;
 + }
 + }
 + }
 + // Return the object
 + return myObj;
 + }
 +
 + function ajaxStart(myObj,​ myMode, myUrl, myFunc) {
 + myObj.open(myMode,​ myUrl, false); // Setup a URL to open
 + myObj.send(null);​ // Send the request
 + myObj.onreadystatechange=eval('​ajaxReady(myObj,​ myFunc)'​);​ // This MUST be after open & send
 + return false;
 + }
 +
 + function ajaxReady(myObj,​ myFunc) {
 + if(myObj.readyState==4)
 + {
 + eval(myFunc);​
 + }
 + }
 +
 + // Generate a random number, later used to prevent caching
 + function randFoo() {
 + var num = Math.floor((9999999999-4)*Math.random()) + 1;
 + return num;
 + }
 +</​code>​
  
 

comments powered by Disqus
easyajax.txt ยท Last modified: 2008/11/20 15:16 (external edit)