How is Ajax specifically used? Introduction to the specific operations of Ajax use

This article mainly tells you about the specific use of Ajax details, there are examples for you to explain in detail. Now let's see this article together.

Java software Development, in the background we can through a variety of frameworks, such as SSH, such as code encapsulation, convenient for us to write Java code, for example, STRUTS,SPRINGMVC the process from the foreground to the action to encapsulate control, So that we can do it with just a few simple configurations, and spring encapsulates the management of a variety of objects, provides a way for AOP programming, greatly facilitates us, while Hibernate and Ibatis encapsulate the JDBC code, We don't need to write the repetitive and complex JDBC code every time.

The front desk, for the page some effects, verification, etc., we are all done through the JavaScript language, but it is like our Java code, is the most basic of the foreground language, and jquery is to encapsulate the JS code to facilitate the writing of our foreground code, And it has a big advantage to solve the browser compatibility problem, which is one of the reasons we use it very important.

And now to meet the needs of users, Ajax (asynchronous Javascript + XML) Asynchronous Refresh has played an incomparable role, previously written AJAX operations, We always need to do a few of the necessary steps like JDBC Code:

ajax--Core XMLHttpRequest Objects , while jquery encapsulates Ajax asynchronous operations, here are a few common ways to look at them. $.ajax,$.post, $.get, $.getjson.

One, $.ajax, this is the most basic step of jquery for Ajax encapsulation, which can be done with all the functions of asynchronous communication. That is, in which case we can perform an asynchronous flush operation with this method. But it has a lot of parameters, sometimes it can be troublesome. Take a look at the commonly used parameters:

var configobj = {

Method//Data submission: Get and post

URL//Data submission Road strength

Async//Whether asynchronous refresh is supported, by default True

Data//information required for submission

DataType//The type of data returned by the server, such as Xml,string,json

Success//callback function after successful request

callback function after error//request failed

}

$.ajax (configobj);//called Through the $.ajax function.

Well, let's look at a practical example, and look at an example of asynchronous deletion:

<span style= "font-size:18px;" >//delete $.ajax ({type: "POST",//Submit by URL: "${pa  Gecontext.request.contextpath}/org/dodelete.action ",//Path data: {" Org.id ": "${org.id}"},//data, which is used in JSON format for transfer success:function (Result) {///return data according to the result of the corresponding                              Handle if (result.success) {$ ("#tipMsg"). Text ("Delete data succeeded");                          Tree.deleteitem ("${org.id}", true);                          } else {$ ("#tipMsg"). Text ("Delete data failed");  }                      }                  }); </span> 

Second, $.post, this function is actually a further encapsulation of the $.ajax, reducing the parameters, simplifying the operation, but the scope of use is even smaller. $.post simplifies the way data is submitted and can only be submitted by post. It can only be an asynchronous access server, cannot be accessed synchronously, and cannot be handled incorrectly. In satisfying these cases, we can use this function to facilitate our programming, it's main several parameters, like Method,async, etc have been set by default, we can not change. Examples are no longer introduced.

URL: Send request address.

Data: The Key/value parameter to be sent.

Callback: callback function when sending successfully.

Type: Returns the content format, XML, HTML, script, JSON, Text,_default.

Three, $.get, and $.post, the function is to encapsulate the commit data of the Get method, using only the same way that the get commit data solves the asynchronous flush, using the same method as the top. No more demonstrations here.

Four, $.getjson, this is a further encapsulation, which is to manipulate the return data type as JSON. Inside the three parameters, we need to set, very simple: url,[data],[callback]. (want to see more on the Topic.alibabacloud.comAJAX Development Manual section of the study)

In fact, will be the $.ajax method, the other will be used, are the same, in fact, very simple.

But there is a problem, it is more troublesome, that is, if the page data volume is larger, how to do? In the process of regular forms, we use the framework Struts2 to get the encapsulation automatically through the domain-driven mode, so how to encapsulate it through Ajax? Here jquery has a plug-in, jquery form, by introducing this JS file, we can imitate form form to support STRUTS2 domain-driven mode, automatic data encapsulation. Usage and $.ajax Similar, take a look at the actual example, here write a save the user's foreground code:

<span style= "FONT-SIZE:18PX;" > $ (function () {var options = {Beforesubmit:function () {///handle previously required functions $ ("TIPM                  SG "). Text (" Data is being saved, please wait ... ");              $ ("#insertBtn"). attr ("Disabled", true);                      }, Success:function (Result) {//returns the callback function needed after success if (result.success) {                                         $ ("#tipMsg"). Text ("Institution saved successfully");                      Here is a corresponding tree, which will be introduced in the back,//control the tree-shaped components, add new node var tree = Window.parent.treeFrame.tree;                  Tree.insertnewchild ("${org.id}", Result.id, Result.name);                  } else {$ ("#tipMsg"). Text ("Failed to save the organization");              }//Enable Save button $ ("#insertBtn"). attr ("disabled", false);         }, Clearform:true}; $ (' #orgForm '). Ajaxform (options);  Commit through the Ajaxform method in Jquery.form}); </span>

So we don't have to do the data package processing, greatly simplifying the operation of our AJAX operations such as asynchronous flush. In the jquery for the Ajax operation, the feeling of using more, and form forms of processing or very similar, but the implementation of the function is not the same. Learning programming, in fact, is to learn the flow of data processing, how to get from the foreground, transfer to the server for the corresponding processing, and then return to the relevant display, the process through a number of technical implementation, the completion of the software development, the feeling is very interesting.

This is the end of this article (want to see more on the Topic.alibabacloud.comAJAX User manual section of the study), there are questions can be in the message below the question.