Differences
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> | ||