Get an ajax note for easy query-Basic Knowledge articles, ajax notes

Get an ajax note for easy query-Basic Knowledge articles, ajax notes

JQuery has made a lot of encapsulation of Ajax. jQuery adopts three layers of encapsulation: The underlying encapsulation method is: $. ajax () further encapsulates three methods of Layer 2 through the bottom layer :. load (), $. get (), $. the highest level of post () is: $. getScript () and $. getJSON ()

My own memory method: $. ajax () is the source of asynchronous processing. It is a region, a village, a small ecosystem, and a branch of jQuery; $. get () is to get and get, that is, to transport what our ecosystem does not; $. post () is to ship items that we cannot completely consume out for what we need. One is in charge of input and the other is in charge of output. In this case, we need a manager to manage ourselves. load () is the manager of the Management ecosystem, because it does not need to go out, but only in their own activities, so it does not need to be marked, jQuery company LOGO =>$. As some of our goods are important and secondary, the VIP service is born. The special channels $. getScript () and $. getJSON () for VIP service are convenient and convenient.

[1 ]. the laod () method has three parameters: 1. url: required. url of the html file to be requested. The parameter type is String2. data: (optional) key/value data sent. The parameter type is Object3. callback: Optional, A success or failure callback Function. The parameter type is Function.

// Example: GET mode: if data is not transmitted, the default get mode $ ('. ajax_btn '). on ('click', function () {$ ('. ajax_box '). load ('ajax. php? Url = snail ', function () {alert (' I am the callback function! ');});});

<? Phpif ($ _ GET ['url'] = 'snail ') {echo 'snail';} else {echo 'other animals! ';}?>

// POST mode: transmits data, which is the post mode $ ('. ajax_btn '). on ('click', function () {$ ('. ajax_box '). load ('ajax. php ', {url: 'snail',}, function () {alert ('I am a callback function! ');});});

<? Phpif ($ _ POST ['url'] = 'snail ') {echo 'snail';} else {echo 'other animals! ';}?>

After Ajax data is loaded, you can run the callback function callback, which is the third parameter. The callback function can pass three optional parameters: responseText (request return) and textStatus (Request status), XMLHttpRequest (XMLHttpRequest object)

$ ('. Ajax_btn '). on ('click', function () {$ ('. ajax_box '). load ('ajax. php ', {url: 'snail',}, function (response, status, xhr) {console. log ('Return value: '+ response +', status: '+ status +', status: '+ xhr. statusText); // The returned value is "snail mail", the status is "success", and the status is "OK console. log ('Return value: '+ xhr. responseText + ', xml dom document:' + xhr. responseXML + ', the HTTP status of the response:' + xhr. status + ', HTTP status description:' + xhr. statusText); // The value returned by index.html: 36 is snail mail, xml dom document: undefined, HTTP status of the response: 200, HTTP status description: OK });});

<? Phpif ($ _ POST ['url'] = 'snail ') {echo 'snail';} else {echo 'other animals! ';}?>

Note: The value obtained by status. If the returned data is successful, the value is success; otherwise, the value is error. The XMLHttpRequest object belongs to JavaScript fan Tao. You can call the following attributes:

Property Name Description responseText is the response body returned text responseXML if the response body content type is "text/xml" or "application/xml ", returns the description of the HTTP status statusText HTTP status of the xml dom Document status response containing the response data.

The returned data status and statusText tables are as follows: the HTTP status code status string indicates that the 200 OK server has successfully returned the page 400 Bad Request syntax error. As a result, the server does Not recognize the 401 Unauthorized Request and requires user authentication. The 404 Not found specified URL cannot be found on the server 500 the Internal Server Error Server encountered an unexpected Error, unable to complete request 503 ServiceUnavailable unable to complete request due to server overload or maintenance

[2] The $. get () and $. post (). load () methods are partial methods because they require a jQuery object containing elements as a prefix. $. Get () and $. post () are global methods without specifying an element. Usage:. load () is suitable for asynchronous acquisition of static files. It is more suitable for $. get () and $. post () that need to pass parameters to the server page.

$. The get () method has four parameters: the first three and. same as load (), the fourth parameter type is added, that is, the content format returned by the server, including xml, html, script, json, jsonp, and text. The first parameter is a required parameter, the following three parameters are optional.

$ ('. Ajax_btn '). on ('click', function () {$. get ('ajax. php ', {url: 'snail',}, function (response, status, xhr) {if (status = 'success ') {response ('.ajax_box'response .html (response );} // type is automatically converted to text })});

Note: The fourth parameter type specifies the type of asynchronous return. Generally, the type parameter is intelligently determined and does not need to be set. If it is set, it is forcibly returned in the specified type format.

$ ('. Ajax_btn '). on ('click', function () {$. get ('ajax. xml', {url: 'snail ',}, function (response, status, xhr) {if (status = 'success') {response ('.ajax_box'response .html (response );} // type is automatically converted to XML })});

NOTE: If an xml file is loaded, the type is judged intelligently. If you forcibly set the html type to return, the xml file will be treated as normal data and all data will be returned without parsing the data in xml format.

The use of the $. post () method is basically the same as that of the $. get () method. The differences between the methods are also vague, basically the differences behind them, which are not reflected in user usage. The specific differences are as follows: 1. GET requests are submitted through URLs, while POST requests are submitted by HTTP message entities; 2. GET submission has a size limit (2 kb), but the POST method is not limited; 3. the GET method will be cached, and there may be security issues, but the POST method does not; 4. GET is obtained through $ _ GET [], and POST is obtained through $ _ POST.

$('.ajax_btn').on('click',function(){    $.post('ajax.php',{        url:'snail',    },function(response,status,xhr){        if(status=='success'){            $('.ajax_box').html(response);        }    })});

$. GetScript () and $. getJSON () => jQuery provides a set of methods for specific asynchronous loading: $. getScript (), used to load a specific JS file; $. getJSON (), used to specifically load JSON files.

$('.ajax_btn').on('click',function(){    $.getScript('ajax.js');});$('.ajax_btn').on('click',function(){    $.getJSON('ajax.json',function(response,status,xhr){        console.log(response.ajax.name);    });});