Scribd Logo
Importer

Bienvenue sur Scribd !

  • Ajax Data Sent With Post Method - HOW TO CODE

    Transféré par

    Clarke Isackson
    111 vues5 pages
    How to code an Ajax Post operation, sending data collected on an input form to the server where it is processed and returned to the form for another round of processing. The return can be from a database just as easily as from a reflection of sent data. Our server side process could be a proxy to pass the data to and from the caller.

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    How to code an Ajax Post operation, sending data collected on an input form to the server where it is processed and returned to the form for another round of processing. The return can be from a database just as easily as from a reflection of sent data. Our server side process could be a proxy to pass the data to and from the caller.

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    111 vues5 pages

    Ajax Data Sent With Post Method - HOW TO CODE

    Transféré par

    Clarke Isackson
    How to code an Ajax Post operation, sending data collected on an input form to the server where it is processed and returned to the form for another round of processing. The return can be from a database just as easily as from a reflection of sent data. Our server side process could be a proxy to pass the data to and from the caller.

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 5

    Our little input form will transmit our input back to the form through Ajax being sent

    to the server and


    being sent back to our form through its Ajax connection.

    Here is our form with some input:


    Here is our form after clicking the submit button:

    As a bonus, this alert box shows what is being sent to the server:
    Here is the HTML script for our input form along with all the javascript that supports the Ajax
    XMLHttpRequest object:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <meta content="text/html; charset=windows-1252" http-equiv="Content-Type" />
    <title>Ajax Post Demo</title>

    <script type="text/javascript">
    function ajaxRequest(){
    var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"]; //activeX versions to check for in IE
    if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest
    in IE7 is broken)
    for (var i=0; i<activexmodes.length; i++){
    try{
    return new ActiveXObject(activexmodes[i]);
    }
    catch(e){
    //suppress error
    }
    }
    }
    else if (window.XMLHttpRequest) // if Mozilla, Safari etc
    return new XMLHttpRequest();
    else
    return false;
    }

    function ajaxPost()
    {
    var mypostrequest=new ajaxRequest();
    mypostrequest.onreadystatechange=function(){
    if (mypostrequest.readyState==4){
    if (mypostrequest.status==200 || window.location.href.indexOf("http")==-1){
    document.getElementById("divpostresult").innerHTML=mypostrequest.responseText;
    }
    else{
    alert("An error has occured making the request");
    }
    }
    }
    var namevalue=encodeURIComponent(document.getElementById("name2").value);
    var agevalue=encodeURIComponent(document.getElementById("age2").value);
    var parameters="name="+namevalue+"&age="+agevalue;
    alert("Send parameters = " + parameters);
    mypostrequest.open("POST", "basicform.asp", true);
    mypostrequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    mypostrequest.send(parameters);
    }
    </script>
    </head>

    <body>
    <div>
    <br /><br />
    <form method="get" action="">
    <p>(post demo)</p>
    Your name: <input type="text" id="name2" name="name2" size="25" /> <br />
    Your age: <input type="text" id="age2" name="age2" size="25" /> <br />
    <input type="button" value="submit" onclick="ajaxPost()" />
    </form>
    </div>
    <div id="divpostresult"> </div>
    </body>

    </html>
    The blue javascript, function ajaxRequest(), initializes the Ajax XMLHttpRequest object to we can
    perform calls directly to the server. It is the first thing that is initialized when the button is clicked and
    ajaxPost() is called.
    This line does the initialization: var mypostrequest=new ajaxRequest();

    From that point, we use regular javascript to obtain the data from the form’s objects using
    getElementById().

    This script takes the data entry form objects and formats it into standard URL encoding. Then it shows
    an alert box with the parameters that are going to be sent to the server at basicform.asp in duplex mode
    var namevalue=encodeURIComponent(document.getElementById("name2").value);
    var agevalue=encodeURIComponent(document.getElementById("age2").value);
    var parameters="name="+namevalue+"&age="+agevalue;
    alert("Send parameters = " + parameters);
    mypostrequest.open("POST", "basicform.asp", true);
    mypostrequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    mypostrequest.send(parameters);

    with the POST method. If creating the Ajax object worked, the results are received FROM THE SERVER
    and placed in the content (InnerHTML) of the division, divpostresult (script in green) to be displayed
    back to the user:
    var mypostrequest=new ajaxRequest();
    mypostrequest.onreadystatechange=function(){
    if (mypostrequest.readyState==4){
    if (mypostrequest.status==200 || window.location.href.indexOf("http")==-1){
    document.getElementById("divpostresult").innerHTML=mypostrequest.responseText;

    That is all there is to it. Oh yes, the server uses this source code in basicform.asp (which could be
    written in any server-side language (PHP, JSP, ASP, ASP.Net, cgi, etc):

    basicform.asp:
    <%
    dim name
    name = Request.Form("name")
    dim age
    age = Request.Form("age")
    response.write "<span>Hello World!</span>"
    response.write"<span style='color:red'><br /><br />Name = " & name & "</span>"
    response.write"<span style='color:red'><br /><br />Age = " & age & "</span>"
    'response.write "<span style='color:red'>Welcome <b>" & name & "</b> to JavaScript Kit. So you're
    <b>" & age & "</b> years old eh?</span>";
    %>
    basicform.php:
    <?
    $name=htmlspecialchars($_GET['name']);
    $name=stripslashes($name);
    $age=(int)$_GET['age'];
    echo "<span style='color:red'>Welcome <b>$name</b> to JavaScript Kit. So you're <b>$age</b> years
    old eh?</span>";
    ?>

    That’s all there is to the server side. The response is posted back to the sending form in a series of text
    strings. The response could be in JSon or xml or encoded in any manner that you desire, as long as you
    can decode it and place it appropriately on your Web page.

    Vous aimerez peut-être aussi