ajax - javascript

table of Contents

• What is ajax

• Primeval ajax

• jquery ajax

• cross-domain ajax

 

What is ajax

Role: without having to reload the entire page, partial page update content.

Probably use: background provided by the data interface, the data acquisition Ajax, dynamically modify the view layer.

Primeval ajax

The ajax request encapsulated into a function, parameter passing can select the type of the request, and after a successful callback.

/ * 
    URL: the request address, 
    Data: Request parameter, 
    Method: request type, 
    Success: after successful callback request 
* / 
function ajax_method (URL, Data, Method, Success) {
     var Ajax;
     IF (window.XMLHttpRequest) {
         / / IE7 +, Firefox, the Chrome, Opera, Safari 
        Ajax = new new  new new the XMLHttpRequest (); 
    } the else {
         // IE6, IE5 
        Ajax = new new the ActiveXObject ( "Microsoft.XMLHTTP" ); 
    } 

    IF (Method == "GET" ) {
         IF (Data) {
             //Data 
            URL + = (+ "?" Data); 
        } 
        ajax.open (Method, URL); 
        ajax.send (); 
    } the else {
         // POST 
        ajax.open (Method, URL);
         // POST request to add request header on 
        ajax.setRequestHeader ( "the Content-type", "file application / X-WWW-form-urlencoded" );
         IF (Data) { 
            ajax.send (Data); 
        } the else { 
            ajax.send (); 
        } 
    } 

    ajax.onreadystatechange = function () { 
        the console.log ( "1 can");
         // 0: Request uninitialized 
        @ 1: The server connection is established 
        @ 2: request received 
        @ 3: Request Processing 
        @ 4: request has been completed, and the response is ready 
        
        @ 200: Successful request processing 
        @ 404: page not found 
        IF (ajax.readyState == == 200 is ajax.status &&. 4 ) { 
            the console.log ( "request was successful" ); 
            success (ajax.responseText); 
        } the else { 
            the console.log ( "request failure " ); 
        } 
    } 
}

transfer:

ajax_method ( "./ test.php", { "the param1": "val1 is"}, "POST", function (Data) { 
    Console ( "get data request:" , Data);
     // will receive after render view data layer 
})

 

jquery ajax

Use jqury, can easily transmit ajax request, we need to introduce juery.js

.ajax $ ({ 
    URL: "./test.php" , 
    Method: "POST" , 
    dataType: "JSON",     // the server returns the data type 
    Data: {
         "the param1": "val1 is",         // request parameters 
    }, 
    Success: function (data) { 
        Console ( "get data request:" , data);
         // then rendered view will receive data layer 
    }, 
    error: function () { 
        Alert ( 'request failed " ); 
    } 
} );

 

cross-domain ajax

Why have cross-domain problem?

" Homologous policies restrict how to interact with resources from another source document or script loaded from a single source. This is a potentially malicious file quarantine important safety mechanism for."

Homologous: same protocol , domain name , port number.

So when ajax request address, there is a protocol, domain names, port numbers are not at the same time, there is cross-domain problem, the browser will complain.

Solution to cross-domain, you can look at an article.