AJAX Brush Technology

Excerpt from: Open Source it

jquery is really a very good lightweight JS framework that can help us to develop JS applications quickly and to some extent change the way we write JavaScript code.

Talk less, go straight to the point, we first look at some simple methods, these methods are to Jquery.ajax () encapsulation to facilitate our use of the method, of course, if you want to deal with complex logic, still need to use Jquery.ajax () (which will be said later).

1. Load(URL, [data], [callback]): Load the remote HTML file code and insert it into the DOM.

URL (String): The URL address of the requested HTML page.

Data (MAP): (optional parameter) Key/value data sent to the server.

Callback (Callback): (optional parameter) callback function when the request is complete (not required to be success ).

This method is passed by default using GET, and is automatically converted to post if the [data] parameter is passed in. In JQuery 1.2, you can specify a selector to filter the loaded HTML document, and only the filtered HTML code will be inserted in the DOM. Syntax such as "URL #some > selector".

This method makes it easy to dynamically load some HTML files, such as forms.

Example code:

$ (". Ajax.load"). Load ("http://www.cnblogs.com/yeer/archive/2009/06/10/1500682.html. Post",
function (ResponseText, textstatus, XMLHttpRequest) {
This
alert (responsetext);//Request returned content //alert (textstatus);//Request Status: Success,error//alert (XMLHttpRequest);// XMLHttpRequest object}); 

The results are displayed here.

Note: do not know why URL write absolute path under FF will error, know the trouble to tell under. The Get () and post () examples below use an absolute path, so you will get an error under FF and you will not see the results returned. The get () and post () examples are all cross-domain calls, and there is no way to get the results after the transmission, so the run button is removed.

2. Jquery.get(URL, [data], [callback]): Use Get method to make asynchronous request

Parameters:

URL (String): The URL address of the sending request.

Data (MAP): (optional) data to be sent to the server, expressed as a Key/value key-value pair, will be appended to the request URL as querystring.

Callback (function): (optional) The callback function when loading succeeds (the method is called only if the return state of response is success).

This is a simple GET request feature to replace complex $.ajax. The callback function can be called when the request succeeds. If you need to execute the function on error, use $.ajax. Example code:

$.get ("./ajax.aspx", {Action: "get", Name: "function (data, textstatus) {
The returned data can be xmldoc, jsonobj, HTML, text, and so on.  //Where this is pointing to the option configuration information for the AJAX request, please refer to alert (data);
alert (textstatus);//Request Status: Success,error and so on.
Of course, the error is not caught here, because the error does not run the callback function at all //alert (this);});

Click Send Request:

The This in the Jquery.get () callback function points to the option configuration information for the AJAX request:

3. Jquery.post(URL, [data], [callback], [type]): Use post to make asynchronous requests

Parameters:

URL (String): The URL address of the sending request.

Data (MAP): (optional) data to be sent to the server, expressed as a Key/value key-value pair.

Callback (function): (optional) The callback function when loading succeeds (the method is called only if the return state of response is success).

type (String): (optional) The official description is: Type of data to be sent. The type that should actually be requested for the client (Json,xml, etc.)

This is a simple POST request function to replace the complex $.ajax. The callback function can be called when the request succeeds. If you need to execute the function on error, use $.ajax. Example code:

Ajax.aspx:

Response.ContentType = "Application/json";
Response.Write ("{result: '" + request["Name"] + "Hello! (The message comes from the server) '} ');  

JQuery Code:

$.post ("ajax.aspx", {Action: "post", Name: "Lulu"},
function (data, textstatus) {
Data can be xmldoc, jsonobj, HTML, text, and so on. //this;//the option configuration information for this Ajax request, refer to Jquery.get () for thisalert (data.result);
}, "json");

Click Submit:

The format of the request is "JSON":

If you set the request format to "JSON", at this point you do not have to set Response back ContentType: Response.ContentType = "Application/json"; Then you will not be able to capture the returned data.

Note thatalert (data.result), because the Accept header is set to "JSON", the data returned here is an object and does not need to be converted to an object using eval ().

4. Jquery.getscript(URL, [callback]): Request to load and execute a JavaScript file via GET mode .

parameters

URL (String): The JS file address to be loaded.

Callback (function): (optional) The post-load callback function is successfully loaded.

Before the JQuery 1.2 version, GetScript can only invoke the same domain JS file. 1.2, you can call JavaScript files across domains. Note: Safari 2 or earlier cannot execute scripts synchronously in the global scope. If you join the script through GetScript, add the delay function.

This method can be used for example, when only the editor focus () to load the editor needs the JS file. Here are some sample code:

Load and execute the test.js.

JQuery Code:

$.getscript ("Test.js");

Load and execute ajaxevent.js, and display the information after success.

JQuery Code:

$.getscript ("function () {
Alert ("ajaxevent.js loading is complete and execution is complete.) Do you click the Get or Post button above to see what's different? ");
});

After loading, please re-click on the load request above to see what is different.

JQuery Ajax Events

Ajax requests generate a number of different events, and we can subscribe to these events and handle our logic in them. There are two types of Ajax events in jquery: Local events and global events.

A local event is defined within a method every time an AJAX request is requested, for example:

$.ajax ({
function () {
function () {
Handle the Complete event}//...});

The global event is triggered every time an AJAX request is made, it broadcasts to all elements in the DOM, and the script loaded in the GetScript () example above is the global Ajax event. Global events can be defined as follows:

$ ("#loading"). Bind ("function () {
$ (this). Show ();
}). bind ("function () {
$ (this). Hide ();
});

Or:

$ ("#loading"). Ajaxstart (function () {
$ (this). Show ();

We can disable global events on a specific request, as long as you set the global option:

$.ajax ({
URL: "test.html",
False,//disables global AJAX events.  // ...});

The following is a complete list of Ajax events that are officially given by jquery:

• Ajaxstart(Global Event)
  This event was broadcast if an AJAX request was started and no other AJAX requests was currently running.
  • Beforesend (Local Event)
    This event, which was triggered before an Ajax request was started, allows you to modify the XMLHttpRequest object (setting Additional headers, if need be.)
  • Ajaxsend (Global Event)
    This global event is also triggered before, the request is run.
  • Success (Local Event)
    This event is a called if the request was successful (no errors from the server, no errors with the data).
  • ajaxsuccess (Global Event)
    This event is also only called if the request was successful.
  • Error (Local Event)
    This event was only called if an error occurred with the request (you can never has both an error and a success callback W ith a request).
  • Ajaxerror (Global Event)
    This global event behaves the same as the local error event.
  • Complete (Local Event)
    This event is a called regardless of if the request was successful, or not. You'll always receive a complete callback, even for synchronous requests.
  • Ajaxcomplete (Global Event)
    This event behaves the same as the complete event and would be triggered every time an Ajax request finishes.
• Ajaxstop (Global Event)
  This global event was triggered if there is no more Ajax requests being processed.

AJAX Brush Technology