Jquery study notes (8)

8. Ajax
1. Load the content into the element
Examples are used to illustrate the superiority of jquery.
If you use JavaScript directly
VaR xhr;
If (window. XMLHttpRequest ){
Xhr = new XMLHttpRequest ();
}
Else if (window. activexobject ){
Xhr = new activexobject ("msxml2.xmlhttp ");
}
Else {
Throw new error ("Ajax is not supported by this Browser ");
}
Xhr. onreadystatechange = function (){
If (xhr. readystate = 4 ){
If (xhr. Status> = 200 & xhr. Status <300 ){
Document. getelementbyid ('someiner iner ')
. Innerhtml = xhr. responsetext;
}
}
}
Xhr. Open ('get', '/serverresource ');
Xhr. Send ();

For jquery:
$ ('# Somecontainer'). Load ('/serverresource ');

OK. Let's see the efficiency.

Now let's introduce the load method. This method is a packaging set method.
Load (URL, parameters, callback)
URL: Needless to say, the server resource URL. Note that you can add filtering conditions. url # selector. Used for filtering in the packaging set, and then fill in the server data.
Parameters: data required for sending a request. If data is sent to the server, the load method uses the POST method to send the request. Otherwise, the get method. parameters type is object.
Callback: callback function. Triggered when the data is loaded into the element. There are three parameters: responsetext, statuscode, xhr object

Returns a package set.

Another useful method is: serialize (). Used to encode the query string
The serializearray () method is used to encode the query string and then put it into Array

2. Use get and post requests respectively.
First, we will introduce the differences between the two types of requests.
Get Method -- used to obtain data from the server. server data and information cannot be modified.
POST method -- used to modify data and information on the server

It can be seen that in different contexts, different methods must be used, and load cannot satisfy all requests.

Jquery provides some practical functions to implement these functions. (Note: it is not a set function)

$. Get (URL, parameters, callback)
Callback: triggered when the request is completed. There are two parameters: response body and status.
Returns an xhr

$. Getjson (URL, parameters, callback)
This function is used when it is known that the returned data is JSON data.

$. Post (URL, parameters, callback)

4. full control over Ajax requests
$. Ajax (options)
Options: Object Type
Returns xhr

Options content:
URL-the requested URL
Type -- HTTP method, get or post. The default value is get.
Data -- parameters used when sending a request, which is encoded by the $. Ajax () method
Datatype -- Data Types returned, including XML, HTML, JSON, jsonp, script, and text
Timeout -- set the request timeout (in milliseconds). If the request times out, the error callback function is automatically triggered.
Global -- whether global functions can be called
Contenttype -- the default value is application/X-WWW-form-rulencoded, which is used for former submission.
After success -- response is successful, the called method has two parameters: one is the returned data, the type is determined by datatype, and the other is status (SUCCESS)
Error -- method called when an error occurs. There are three parameters, xhr instance, status information (error), exception object returned by xhr (optional)
Complete -- call after successful request, xhr instance, status string (success, error)
Beforesend -- triggered before initiating a request. You can set the header
Async -- whether asynchronous submission is enabled. The default value is true.
Processdata -- bool value, to be considered?
Ifmodified -- check whether the header has been changed

$. Ajaxsetup (properties)
Set Ajax properties, that is, set the default value of the property described above. After setting, you do not need to write these attributes for each request, for example:

$. Ajaxsetup ({
Type: 'post ',
Timeout: 5000,
Datatype: 'html ',
Error: function (xhr ){
$ ('# Errordisplay)
. Html ('error: '+ xhr. Status + ''+ xhr. statustext );
}
})

5. Global functions of AJAX
Ajaxstart (callback)
Ajaxsend (callback)
Ajaxsuccess (callback)
Ajaxerror (callback)
Ajaxcomplete (callback)
Ajaxstop (callback)

Parameters of the callback Method
Generally, the first parameter is an object, which has two attributes: type and target.
The second is the xhr object.
The third is Ajax property.
The fourth is exception.

I learned about it. The next task is how to use it skillfully. This requires constant practice and accumulation. Now I just started the course of jquery. Come on!