AJAX
Download
1 / 12

AJAX - PowerPoint PPT Presentation


  • 85 Views
  • Uploaded on

AJAX. Asynchronous JavaScript & XML A short introduction. AJAX intro. AJAX uses asynchronous data transfer (based on XMLHttpRequest ) between the browser and the web - server, allowing to request smaller bits of information from the server than the full-reload ;

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' AJAX' - chadwick-barrera


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Ajax

AJAX

Asynchronous JavaScript & XML

A short introduction


Ajax intro
AJAX intro

  • AJAX uses asynchronous data transfer (based on XMLHttpRequest ) between the browser and the web-server, allowing to

    • request smaller bits of information from the server than the full-reload;

    • request additional information from other pages where the result should be “embedded” into the current page;

    • execute an action on the serverwithout moving to the next page (so if fail then you don’t have to go back: consider for example submitting data).


Ajax shift of client server communication
AJAX shift of client-server communication

  • Standard method

    Client(Web broswer)

    Server

We could say that pages are not connected


Ajax shift of client server communication1
AJAX shift of client-server communication

  • AJAX method

    Client(Web broswer)

    Server

The page stays the same


Ajax

<script type="text/javascript">function ajaxFunction()

{var xmlHttp;

try {// Firefox, Opera 8.0+, SafarixmlHttp=new XMLHttpRequest();}

catch (e) {// Internet Explorertry {xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");}

catch (e) {try {xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}

catch (e) {alert("Your browser does not support AJAX!");return false;}}}

xmlHttp.onreadystatechange=function() {

if(xmlHttp.readyState==4)

{

document.FormA.timeCtrl.value=xmlHttp.responseText;

}

}

xmlHttp.open("GET",“a.php",true);

xmlHttp.send(null);}</script>

A function to be executed on call-back.

Call asyncronously


Readystate
Readystate

function() { if(xmlHttp.readyState==4)

{

... }

}

0 - the request is not initialized

1 - the request has been set up

2 - the request has been sent

3 - the request is in process

4 - the request is complete


Status
Status

  • There is also a status that can be controlled after a result is returned. It will contain either

    • 200 - everything worked (returned) fine

    • or the error code, for example:

      • 404 - the page is not found....

      • 500 (Internal Server Error)

        if(xmlHttp.readyState == 4) {

        if(xmlHttp.status == 200)

        alert(xmlHttp.responseText);

        else

        alert("Error code: " + xmlHttp.status);

        }


Response text
Response text

function() {

if(xmlHttp.readyState==4)

{

....value=xmlHttp.responseText;

}

}

responseText is data which is send back from the server. Usually it is processes somehow or appears in a certain place, therefore (usually) it doesn’t contain “<html><body>” tags.


On ready state change
On ready state change

Here a function that should be called defined. Notice that the function can be defined in differently ways accordingly to JavaSript standards

  • An inline definition

    xmlHttp.onreadystatechange=function() {

    if(xmlHttp.readyState==4)

    {

    ...;

    }

    }

  • Outside definition:

    xmlHttp.onreadystatechange=functionA;

    The function is declared somewhere else


Calling server
Calling server

xmlHttp.open("GET",“a.php",true);

xmlHttp.send(null);

Here we have a simple example, where the first parameter defines method (as in forms), the second sets an address to be called (as an action in forms) and the third one specifies that the call should be asynchronous.

Calling a server with parameters

var act=“a.php”

act=act + “?” + “arg1name=“ + “arg1value”

act=act + “&” + “arg2name=“ + “arg2value”

xmlHttp.open("GET",act,true);

xmlHttp.send(null);

Sends the request


Calling server1
Calling server

  • “Post” method example:

    parameters are not attached to the url but is served via the send method

    Calling a server with parameters

    var act=“a.php”

    var param=“arg1name=“ + “arg1value”

    param=param + “&” + “arg2name=“ + “arg2value”

    xmlHttp.open("POST",act,true);

    xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    xmlHttp.setRequestHeader("Content-length", params.length);

    xmlHttp.send(param);


Xml as a response
XML as a response

  • If a server posts xml

    <% response.contenttype="text/xml“

    response.write("<?xml version='1.0' encoding='ISO-8859-1'?>") response.write("<company>")

    response.write("<compname>A</compname>")

    response.write("<manager>Leo V</manager>")

    response.write("</company>")

    %>

  • Then the AJAX client should use another property

    function() {

    if(xmlHttp.readyState==4)

    {

    var postedback=xmlHttp.responseXML; //usually responseXML.documentElement

    }

    }