jquery and Ajax and serialization _jquery

About Ajax

The so-called Ajax, full name asynchronous JavaScript and XML. (also asynchronous JS and XML)

The simple point is not to refresh the page to send and get the data, and then update the page.

The advantages of Ajax

• No plugin support required
• Excellent user Experience
• Improve the performance of Web programs
• Ease the burden on servers and bandwidth

The lack of Ajax

• Insufficient browser compatibility
• Destroys the normal function of the browser forward and rewind buttons
• Lack of support for search engines
• Lack of development and debugging tools

All right, these are the deficiencies of a few years ago. The development of technology is very fast, these deficiencies will slowly make up, at least now debugging Ajax is not difficult.

The core of Ajax is the XMLHttpRequest object, which is the key to AJAX implementation.

The traditional implementation of Ajax examples do not lift, too much pain, I did not remember, online a lot of search.

About Ajax in jquery

The $.ajax () method is an AJAX way of encapsulating the most original JS.

Load (), $.get (), $.post () is encapsulated $.ajax ()

$.getscript () and $.getjson () are further encapsulated.

Load () method • Useful: Load the remote HTML code and insert it into the DOM, usually to get the static data file structure: Load (URL [, data] [, callback]). URL for the requested address
data Optional, Parameter object for launching to the server
callback is a callback function, and the request is invoked either successfully or unsuccessfully.
• You can even add filters to your address when loading a page

$ ("#resDiv"). Load ("test.html. MyClass");//This div only loads the elements in the Test.html page that are styled as MyClass


//Give a complete example
$ (function () {
$ ("#resDiv"). Load ("text.php", {name: "Troy", TextInfo: "Hello"},function (Responsetext,textstatus, XMLHttpRequest) {
//responsetext: Request returned content
//textstatus: Request Status: Success, error, notmodiffied, timeout 4 kinds 
// Xmlhttprequest:xmlhttprequest object
});

The $.get () method clearly sees the invocation differently, so the function is a global function of jquery. And the previous method and load () are all for the jquery object to operate
The $.get () method uses a Get method for asynchronous requests, structured as: $.get (URL [, data] [, callback] [, type]) • The first three parameters are not said, the only difference is that callback only the request is successful to call
The type parameter is the format for server-side return content, including Xml,html,script,json,text and _default
• examples

$ ("#send"). Click (function ()
$.get ("get1.php"
, {
username:$ ("#username"). Val (),
content:$ ("# Content "). Val ()
}
, function (data,textstatus) {
//data: The returned contents, which can be XML documents, JSON files, HTML fragments
//textstatus : Request Status: Success, error, notmodiffied, timeout 4 kinds
}
)

$.post () method • It is the same as the Get method, but one is get and one is post.
$.getscript () method • Sometimes it is not necessary to get all the scripts when the page is first loaded, so jquery provides a getscript way to load the JS files directly.
• examples

$ (' #send '). Click (function () {
$.getscript (' Test.js ', function () {
//do something this time the script has been loaded, No more processing of JS files
});

The $.getjson () method is used to load the JSON file, as above, except for the returned JSON data

$ (' #send '). Click (function () {
$.getjson ("Myurl", function (data) {
var html= "";
$.each (Data,function (commentindex,comment) {
html+=commentindex+ ":" +comment[' username ' "]+ ';";
})
alert (HTML);
})
};

By the way, cross-domain access JSONP

$ ("#send"). Click (function () {
$.getjson http://www. A Web site. Com/services/getmycmpjson?tags=car&tagmode=any &format=json&jsoncall back=? "
, function (data) {
//some Operations
})
})

JSONP is an unofficial protocol that uses JSON and <script> tags in a way that is used primarily for Web applications across domains

$.ajax () method • This method is the most low-level Ajax implementation of jquery, so it is certainly more powerful and complex.

Although it has only one parameter, this parameter object contains a lot of properties, but it is optional. All attributes are listed below: URL: Default current page address, or manually write the requested address

type: Default to get, or write post
Timeout: Set request timeout (MS)
Data: Data sent
datatype: Expected data type returned by the server.
Beforesend: The function called before sending, if the secondary function returns false, this AJAX request will be canceled.

function (XMLHttpRequest) {//xmlhttprequest is the only parameter
this;//the options argument passed when invoking this Ajax request

complete: When the request is complete, it is invoked regardless of success or failure.

function (Xmlhttprequest,textstatus) {//textstatus Describes a successful request type
this;//The options argument passed when invoking this Ajax request
}

success: callback function after a successful request

function (data,textstatus) {//data The
options parameter that is passed when the AJAX request is invoked for the data returned successfully this;//
}

Error: Function to request failed calls

function (Xmlhttprequest,textstatus,errorthrown) {
//Textstatus is an error message, Errorthrown is a captured error object, usually only one of them contains information
this;//The options parameters that are passed when the AJAX request is invoked

Global: Default is True. Indicates whether global AJAX events are triggered.
• Serialization Element Serialize () method • It can serialize DOM element content into strings

Not only can you serialize the entire form, you can also serialize individual elements, and are automatically encoded
$.post ("Myurl", $ ("#form1"). Serialize (), function (Data,textstatus) {
$ ("#resText"). HTML (data);
})

Serializearray () method • It can serialize DOM element content into JSON format
$.param () method • This is the core of the Serialize method, which is used to serialize an array or object by a key-value pair

var obj={a:1,b:2,c:3};

Ajax Global Event Ajaxstart () method in jquery: When the AJAX request starts, it triggers
Ajaxstop () method: Triggers when an AJAX request is terminated

<div id= "Loading" > Load ...</div>
$ ("#loading"). Ajaxstart (function () {
$ (this). Show ()// Ajax start request on display in Load
});
$ ("#loading"). Ajaxstop (function () {
$ (this). Hide ();//ajax at the end of hidden load
}); 

Ajaxcomplete (): Triggered when Ajax request is complete
Ajaxerror (): When an AJAX request occurs, the error that is caught can be passed as the last parameter
ajaxsend (): Triggers before AJAX requests are sent
ajaxsuccess (): Triggered when Ajax request succeeds
• If you want to make an AJAX request unaffected by global events, you can set the global property to False in $.ajax, which is already mentioned earlier. Of course, you can do this before the AJAX request:

$.ajaxprefilter (function (options) {//Request options.global=true before each send
;
})

All right, it's finished. Finally, incidentally, settimeout ("Domethod ()", 4000), performs domethod this function after 4s.

//A simple timed dispatch function updatemsg () {$.post (" Myurl ", {time:timestamp},function (XML) {//
Do something});
SetTimeout ("updatemsg ()", 4000); }