jQuery Ajax

Asynchronous HTTP request
$.ajax({
    type: 'POST',       // GET or POST
    url: "jquery-ajax", //request page
    cache: false,       // prevent to get cached response
    data: {todo:"ajaxexample1"}, //data sent to request page
    success: functionSucceed,   //this will be called if request succeeds
    error: functionFailed,       //this will be called if request fails
    statusCode: {    //statusCode handling
      404: function() {
        alert("page not found");
      }
    }
});
ExampleAjax basic
Source Code Expand
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<!-- Javascript -->
<script type="text/javascript">    
$(document).ready(function (){
    var DoAjax = function(requestUrl, sentData, sHandler, eHandler, pageNotFoundHandler){
        $.ajax({
            type: 'GET',    
            url: requestUrl, 
            cache: false,       
            data: sentData, 
            success: sHandler,   
            error: eHandler,      
            statusCode: {    
              404: pageNotFoundHandler
            }
        });
    };

    /* Simulate succeed ajax */
    $("#btn352").click(function(){
        var url = "/backend/ajax_ajax.aspx";
        /* disable trigger button, preventing multiple requests */
        $(this).attr("disabled", true);
        
        /* show requesting message */
        $("#div351").html("requsting....");
        $("#tb354").val("");

        /* wait 2 seconds before sending ajax */
        setTimeout(function(){
            

            DoAjax(url, {todo : "exSucceed"},
                function(data, textStatus, jqXHR){
                    var html = [];
                    html.push("Request url : ", url, "<br>",
                                "Server response : ", data, "<br>",
                                "Status code : ", jqXHR.status, "<br>",
                                "Status text : ", jqXHR.statusText);
                           
                    $("#div351").html(html.join(''));
                    $("#tb354").val(data);
                });    

            /* enable trigger button */
            $("#btn352").attr("disabled", false);
        }, 1000);
    });    

    /* Simulate failed ajax */
    $("#btn353").click(function(){
        var request = "http://nosub.pureexample.com/request-not-exist";
        
        $("#tb354").val("");

        DoAjax(request, {todo : "exFailed"},
                function(){},
                function(jqXHR, textStatus, errorThrown){
                    var html = [];
                    html.push("Request url : ", request, "<br>",
                              "Status code : ", jqXHR.status, "<br>",
                              "Status text : ", jqXHR.statusText, "<br>");
                    $("#div351").html(html.join(''));                    
                },
                function(){});
    });    
});
</script>

<!-- HTML -->
<a name="#basic-ajax"></a>
<style>
  .div351 {
     margin-top:10px;height:80px;border:1px solid black;text-align:left;padding:5px;
  }
</style>
<div id="example-section35">    
    <div id="div351" class="div351">show result </div>
    Server response raw data : <input type="text" id="tb354" value="" style="width:400px">
    <div style="text-align:center;padding-top:5px">
        <button type="button" id="btn352">Simulate succeed ajax</button>&nbsp;
        <button type="button" id="btn353">Simulate failed ajax</button>&nbsp;        
    </div>
</div>



comments powered by Disqus