Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Ajax

    Enviado por

    Jc Santoyo
    12 visualizações20 páginas
    Ajax is a name given to a set of tools that were previously existing. XMLHttpRequest, a class usable in JavaScript, was first used by Google in 2005. Ajax can selectively modify a part of a page displayed by the browser, and update it without the need for a complete page refresh.

    Descrição original:

    Direitos autorais

    © Attribution Non-Commercial (BY-NC)

    Formatos disponíveis

    PPT, PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento
    Ajax is a name given to a set of tools that were previously existing. XMLHttpRequest, a class usable in JavaScript, was first used by Google in 2005. Ajax can selectively modify a part of a page displayed by the browser, and update it without the need for a complete page refresh.

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PPT, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    12 visualizações20 páginas

    Ajax

    Enviado por

    Jc Santoyo
    Ajax is a name given to a set of tools that were previously existing. XMLHttpRequest, a class usable in JavaScript, was first used by Google in 2005. Ajax can selectively modify a part of a page displayed by the browser, and update it without the need for a complete page refresh.

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PPT, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 20

    AJAX

    Asynchronous JavaScript and XML

    Swetha

    Brief History

    Ajax is only a name given to a set of tools that were previously existing. The main part is XMLHttpRequest, a class usable in JavaScript , that was implemented into Internet Explorer since the 4.0 version. XMLHttpRequest was first used by Google in 2005 in Gmail and GoogleMaps.

    Why AJAX?

    Provide means for a web page to communicate with the server without a complete page refresh. Ajax can selectively modify a part of a page displayed by the browser, and update it without the need to reload the whole document with all images, menus, etc... Save server resources.

    AJAX Technologies

    HTML and CSS for presenting JavaScript for local processing DOM (Document Object Model) to access data inside the page (example: using getElementById) or to access elements of XML file (using getElementByTagName) XMLHttpRequest class to read or send data on the server asynchronously Any Scripting language on the server (example: ASP, PHP) XML and XSLT to process the data if returned in XML form.

    Browser Support

    AJAX requires different piece of code for different browsers to create XMLHttpRequest object. To create this, we need try and catch technique. Try and Catch: Basically it attempts to "try" a piece of code and if that piece causes an error it "catches" the error and keeps going. Normally when an error occurs the code will stop running, however, the "catch" eats up the error and lets the code continue.

    XMLHttpRequest class

    readyState property values

    GET, POST and HEAD


    GET is used to send information to the server as part of the URL . POST is used to send information as an enclosed entity . HEAD is used to get the meta-information contained in the HTTP headers.
    Response might look like this: Server: Microsoft-IIS/5.1 X-Powered-By: ASP.NET Date: Fri, 03 Mar 2006 17:47:47 GMT Content-Type: text/xml Accept-Ranges: bytes Last-Modified: Fri, 03 Mar 2006 14:07:51 GMT ETag: "50c59dccb3ec61:99e" Content-Length: 21

    Data can be sent using POST method with SEND method. Example: xmlHttp.send(document.getElementById(txt").value ); If GET method is used then null is sent in SEND method.

    Web Model for Client-Server Interaction

    AJAX Model for Client-Server Interaction

    Step by Step Process

    Step 1: Create an XMLHttpRequest object instance Step 2: Wait for Response Step 3: Post the request to get the desired data.

    Step 1: Create an Instance


    <html> <body><script type="text/javascript"> function ajaxFunction() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("Your browser does not support AJAX!"); return false; } } } } </script><body> </html>

    Step 2: Wait for Response


    xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { // Get the data from the server's response } } The onreadystatechange property stores your function that will process the response from a server. The function is stored in the property to be called automatically whenever there is a state change. When readyState is 4 it implies that the response is ready. This happens after the request is posted to the server and a response is received. We will see how to post the request in the next slide.

    Step 3: Post the request


    xmlHttp.open("GET","time.asp",true); xmlHttp.send(null); The above statements are used to post the request to the server. When the data is returned, the readyState property becomes 4 and the data is displayed in the desired location of the web page. time.asp contains the data that should be retrieved.

    Example

    We will now go through a simple AJAX application. First we will create a html page named as testAjax.htm with one field: User Name, Div tag and a Submit button. <html>
    <body> <form name="myForm"> Name: <input type="text" name="username" /> <div id=dyn></div> <input type=button" value=Submit onclick=SubmitForm() /> </form> </body> </html> We will call a JavaScript function ajaxFunction() in the onclick event of the submit button. Div tag is used to reserve the space where the response has to be displayed.

    Cont

    Now lets update the html file with the JavaScript function that creates the XMLHttpRequest object.
    <html>

    function SubmitForm() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("Your browser does not support AJAX!"); return false; } } } }
    <body> <form name="myForm"> Name: <input type="text" name="username" />

    <div id=dyn></div>
    <input type=button" value=Submit onclick=SubmitForm() /> </form> </body> </html>

    Cont

    Set the value of the div element equal to the response returned by the server.
    <html> function SubmitForm() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { 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.getElementById(dyn).innerHTML=xmlHttp.responseText; } }


    } <body> <form name="myForm">

    Name: <input type="text" name="username" />

    <div id=dyn></div>
    <input type=button" value=Submit onclick=SubmitForm() />
    </form> </body> </html>

    Cont

    Post the Request


    <html> function SubmitForm() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { 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.getElementById(dyn).innerHTML=xmlHttp.responseText; } }

    xmlHttp.open("GET",welcome.asp",true); xmlHttp.send(null);
    } <body> <form name="myForm"> Name: <input type="text" name="username" />
    <div id=dyn></div>

    <input type=button" value=Submit onclick=SubmitForm() /> </form> </body> </html>

    Cont

    Welcome.asp looks like this: <% response.write Welcome %> When user clicks on Submit button, the message Welcome will be displayed where we placed the div tag, without loading the page.

    Drawbacks

    If JavaScript is not activated, AJAX cannot work. The user must be asked to set JavaScript from within options of the browser, with the "noscript" tag. Since data to display are loaded dynamically, they are not part of the page, and the keywords inside are not used by search engines. The asynchronous mode may change the page with delays (when the processing on the server take some times), this may be disturbing. There is no browsing history, so Back/Forward buttons become useless. Requires more development time. AJAX is not supported in browsers on mobile phones and PDAs. Data is sent as clear text. For this reason, no sensitive data should take a ride via HTTP using AJAX.

    Você também pode gostar