This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
easyajax [2008/09/25 21:42] Joel Dare |
easyajax [2020/06/01 22:53] (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> | ||