Page 1

1/2/2008

AJAX o Asynchronous JavaScript And Xml o Asynchronous applications make the requests using a JavaScript object, and not a Form Submit process. o Advantages: o Multi-processing o Speed o No full page refresh

¹

Concepts • • • • •

How to Use it Useful Scripts References Useful Tools Appendix

JavaScript

How to Use It – The Basics of the process 1.Create a JavaScript function that handles the request: o o o

Calls the Requester creator script Sets eDeveloper Server, Application, Program and Parameters Makes the Asynchronous call

2.Hook an event to call the function above: o

3.Update the part of the page with the new data o

AJAX >

1


1/2/2008

1.Create a JavaScript function that handles the request o

On a JavaScript function, calls the createRequest():

function getCustomerInfo() { createRequest() ... }

o

Add a variable to hold the eDeveloper call on the web server:

function getCustomerInfo() { createRequest() var url ="/eDevScripts/mgrqispi101.dll" ... }

AJAX > How to Use It > The Basics of the Process

1.Create a JavaScript function that handles the request o

Add two other variables to hold the application name and the program name :

function getCustomerInfo() { createRequest() var url ="/eDevScripts/mgrqispi101.dll"; var appname = "myApp"; var prgname = "GetCustomerInfo"; ... }

o

Next we need to open the request:

function getCustomerInfo() { createRequest() var url ="/eDevScripts/mgrqispi101.dll"; var appname = "myApp"; var prgname = "GetCustomerInfo"; request.open("GET", url, true); ... }

The last parameter defines if the call is Asynchronous or not. AJAX > How to Use It > The Basics of the Process

1.Create a JavaScript function that handles the request o

Next we send the request to the server:

function getCustomerInfo() { createRequest() var url ="/eDevScripts/mgrqispi101.dll"; var appname = "myApp"; var prgname = "GetCustomerInfo"; request.open("GET", url, true); request.send(null); ... } •

Notes: o The request.send is passing null in this case because we don't want to pass any parameter here (in this case). Other examples coming on the next slides.

AJAX > How to Use It > The Basics of the Process

2


1/2/2008

2.Hook an event to call the function o

We want to go and get the customer info when the user click on the button [Get Customer Info]:

... <input type="button" id="b1" value="Get Customer Info" onclick="getCustomerInfo()">

...

AJAX > How to Use It > The Basics of the Process

3.Update the part of the page with the new data o Define a function that gets the response from the server and updates the part of the page you want to refresh: function useResult(){ var msg = request.responseText; var msgDiv = document.getElementById("message"); replaceText(msgDiv, msg); }

â&#x20AC;˘

Notes: o responseText is a property where the Browser puts the result sent back by the server.

AJAX > How to Use It > The Basics of the Process

3.Update the part of the page with the new data o Update the function in step 1 to call the one above when the result comes back from the server: function getCustomerInfo() { createRequest() var url ="/eDevScripts/mgrqispi101.dll"; var appname = "myApp"; var prgname = "GetCustomerInfo"; request.open("GET", url, true); request.onreadystatechange=useResult; request.send(null); }

â&#x20AC;˘

Notes: o Note the assignment of the function useResult to the onreadystatechange event is done without () it's =useResult; and not =useResult(); o See more details on onreadystatechange here.

AJAX > How to Use It > The Basics of the Process

3


1/2/2008

Use JavaScript to pass the data o Here we receive a parameter in the function and pass various parameters in request.send: function updateCustomer(iClientISN){ createRequest(); var url = "/eDevScripts/mgrqispi101.dll"; var appname = "myApp"; var prgname = "UpdateCustomers"; request.open("GET", url, true); request.send(appname,prgname,iClientISN); }

AJAX > How to Use It > Other Ways

Declaring all in the url o

You can declare the full path or use variables to hold the program name. Using variables add flexibility to the calls (see examples later):

function getCustomerInfo() { createRequest() var url = "/eDevScripts/mgrqispi101.dll?APPNAME=myApp&PRG NAME=GetCustomerInfo&ARGUMENTS=ClienISN";

... }

AJAX > How to Use It > Other Ways

Passing multiple parameters o

Pass them as csv:

function getCustomerInfo() { createRequest() var url = "/eDevScripts/mgrqispi101.dll?APPNAME=myApp&P RGNAME=GetCustomerInfo&ARGUMENTS=ClienISN,param2 ,Param3";

... }

AJAX > How to Use It > Other Ways

4


1/2/2008

Declare variables and call createRequest() right in the beginning o

:

<script type="text/javascript"> var clientISN; var clientCode; var clienteName; createRequest(); ...

AJAX > How to Use It > Other Ways

Use the animated gifs to give feedback o

:

function updateCustomer(iClientISN){ document.getElementById("processing").src="/eDe vScripts/ajax-loader.gif"; createRequest(); var url = "/eDevScripts/mgrqispi101.dll"; var appname = "myApp"; var prgname = "UpdateCustomers"; request.open("GET", url, true); request.onreadystatechange=useResult; request.send(appname,prgname,iClientISN); } function useResult(){ var msg = request.responseText; var msgDiv = document.getElementById("message"); replaceText(msgDiv, msg); document.getElementById("processing").src="/eDe vScripts/static.gif"; } AJAX > How to Use It > Other Ways

Loading variables with values function updateVariables(){ cliISN = document.getElementById("clientISN").value; cliCode = document.getElementById("clientCode").value; cliName = document.getElementById("clientName").value; urlData = "-N" + escape(cliISN) + ",-N" + escape(cliCode)+",-A"+ escape(cliName); } function updateCustomer(iClientISN){ document.getElementById("processing").src="/eDevScripts/aj ax-loader.gif"; updateVariables(); var fullUrl = "/eDevScripts/mgrqispi101.dll" + "?APPNAME=myApp&PRGNAME=UpdateCustomers&ARGUMENTS=" + urlData; request.open("GET", url, true); request.onreadystatechange=useResult; request.send(null); }

â&#x20AC;˘

Notes: o The escape() function translates the data into a valid format that can be passed in the url.

AJAX > How to Use It > Other Ways

5


1/2/2008

Avoiding Browsers URL cache function updateCustomer(iClientISN){ document.getElementById("processing").src="/eDevScripts/aj ax-loader.gif"; updateVariables(); var fullUrl = "/eDevScripts/mgrqispi101.dll" + "?APPNAME=myApp&PRGNAME=UpdateCustomers&ARGUMENTS=" + urlData + ",-Adummy=" + new Date().getTime(); request.open("GET", url, true); request.onreadystatechange=useResult; request.send(null); }

AJAX > How to Use It > Other Ways

Useful Scripts o The Request Creator: var request = null; function createRequest() { try { request = new XMLHttpRequest(); } catch (trymicrosoft) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (othermicrosoft) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (failed) { request = null; } } } if (request == null) alert("Error creating request object!"); } AJAX >

Useful Scripts o Some text functions: function replaceText(element, text) { if (element != null) { clearText(element); var newNode = document.createTextNode(text); element.appendChild(newNode); } } function clearText(element) { if (element != null) { if (element.childNodes) { for (var i = 0; i < element.childNodes.length; i++) { var childNode = element.childNodes[i]; element.removeChild(childNode); } } } } AJAX >

6


1/2/2008

References o Craig Martins’ “Practical Magic”: o http://craigmartin.com/practicalmagic/ o Head Rush AJAX @ amazon.co.uk o http://www.amazon.co.uk/Head-RushAjax-First/dp/0596102259 o Animated gifs @ google.com/images:

AJAX >

Useful Tools o Firebug for Firefox o http://www.getfirebug.com/ o http://www.getfirebug.com/docs.html

o Internet Explorer Developer Toolbar for IE ohttp://www.microsoft.com/downloads/d etails.aspx?FamilyID=E59C3964-672D4511-BB3E2D5E1DB91038&displaylang=en o Firefox Web Developer Toolbar ohttps://addons.mozilla.org/enUS/firefox/addon/60 o(Mostly for CSS) AJAX >

Appendix •

request.onreadystatechange

request.responseText

o… o Contains the information returned by the server.

AJAX >

7


1/2/2008

Appendix •

request.readystate o Contains the current status of the request. It can be: o 0 – Uninitialized o 1 – Loading o 2 – Loaded o 3 – Interactive o 4 – Complete

AJAX >

Appendix •

request.status o Contains the last http status code returned by the server for that request o It's a big list. Some examples are: o 200 Ok o 201 created o 400 bad request o 403 forbidden o 500 internal server error

AJAX >

Appendix – Parameter Types • • • • • •

-A = Alpha -N = Integers -U = Null -F = Float -D = Double -L = Boolean

AJAX >

8

Test  

test of ajax