The Ajax () method interacts with the background, and the ajax method interacts with the background.

The Ajax () method interacts with the background, and the ajax method interacts with the background.

Ajax is called "Asynchronous JavaScript and XML" (Asynchronous JavaScript and XML). It is a Web page development technology used to create interactive web applications. Ajax technology is a collection of all technologies currently available in browsers through JavaScript scripts. Ajax uses all these technologies in a brand-new way, which makes Web development in the old B/S mode new and dynamic.

The ajax () method is the underlying ajax Implementation of jQuery and loads remote data through HTTP requests.

$. Ajax ({type: "GET", url: "handleAjaxRequest. action ", data: {paramKey: paramValue}, async: true, dataType:" json ", success: function (returnedData) {alert (returnedData ); // callback function after the request is successful // returnedData -- the data is returned by the server and processed according to the dataType parameter; // the data is processed based on the returned data}, error: function (e) {alert (e); // call this function when the request fails }});}

Parameter description:

Type: Request Method, "POST" or "GET". The default value is "GET ".

Url: the address where the request is sent.

Data: The data to be transmitted to the server, which has been written in the form of key: value (id: 1 ). The GET request is appended to the url.

Async: The default value is true. It is an asynchronous request. If it is set to false, it is a synchronous request.

DataType: The expected data type returned by the server, which can be left unspecified. Such as xml, html, and text.

In development, the above parameters can meet basic requirements.

If you need to pass Chinese parameters to the server, you can write the parameters after the url and use encodeURI encoding.

Var chinese = ""; var urlTemp = "handleAjaxRequest. action? Chinese = "+ chinese; var url = encodeURI (urlTemp); // encode $. ajax ({type: "GET", url: url, // directly write the encoded urlsuccess: function (returnedData) {alert (returnedData ); // callback function after the request is successful // returnedData -- the data is returned by the server and processed according to the dataType parameter; // the data is processed based on the returned data}, error: function (e) {alert (e); // call this function when the request fails }});}

The struts2 action processes the request:

Public void handleAjaxRequest () {HttpServletRequest request = ServletActionContext. getRequest (); HttpServletResponse response = ServletActionContext. getResponse (); // set the returned data to the html text format response. setContentType ("text/html; charset = utf-"); response. setHeader ("pragma", "no-cache"); response. setHeader ("cache-control", "no-cache"); PrintWriter out = null; try {String chinese = request. getParameter ("chinese"); // The parameter value is medium. To convert chinese = new String (chinese. getBytes ("ISO --"), "utf-"); System. out. println ("chinese is:" + chinese); // business processing String resultData = "hello world"; out = response. getWriter (); out. write (resultData); // If json data is returned, response. setContentType ("application/json; charset = utf-"); // Gson gson = new Gson (); // String result = gson. toJson (resultData); // use Gson to convert data to json format/out. write (result); out. flush ();} catch (Exception E) {e. printStackTrace ();} finally {if (out! = Null) {out. close ();}}}

Struts. xml configuration file: No need to write the return type

<action name="handleAjaxRequest" class="com.test.TestAction"method="handleAjaxRequest"></action>

Share AJAX frontend and backend interaction Methods

Note: ajax uses the async parameter to determine whether asynchronous or synchronous, false synchronous, and true asynchronous;

The asynchronous execution order is to first execute the subsequent actions and then execute the code in success;

Synchronization is to first execute the code in success and then execute the subsequent code;

Verification: will the data volume during synchronization be choppy? For example, is the page stuck when a large amount of data is searched from the background?

1. (asynchronous) method call. Subsequent Code does not need to wait for its execution result

Background <C #>:

using System.Web.Script.Services; public static string GetStr(string str1, string str2) { return str1 + str2; }

Foreground <JQuery>:

Function Test (strMsg1, strMsg2) {$. ajax ({type: "Post", url: "Demo. aspx/GetStr ", async: true, // The method for passing parameters must be correct, consistent with the background, case sensitive, cannot be an array, str1 is the name of the form parameter, str2 is the name of the second parameter data: "{'str1': '" + strMsg1 + "', 'str2': '" + strMsg2 + "'}", contentType: "application/json; charset = UTF-8", dataType: "json", success: function (data) {// data is returned. d. Obtain the content alert (data. d) ;}, error: function (err) {alert (err) ;}}); // hide the animation $ ("# pageloading "). hide ();}

2. (synchronous) method call. It can be used to obtain the return value, which is the prerequisite for executing subsequent code.

Background <C #>:

using System.Web.Script.Services; public static string GetStr(string str1, string str2) { return str1 + str2; }

Foreground <JQuery>:

Function Test (strMsg1, strMsg2) {var str = ""; $. ajax ({type: "Post", url: "Demo. aspx/GetStr ", async: false, // The method must be the same as that in the background, case sensitive, cannot be an array, and str1 is the name of the form parameter, str2 is the name of the second parameter data: "{'str1': '" + strMsg1 + "', 'str2': '" + strMsg2 + "'}", contentType: "application/json; charset = UTF-8", dataType: "json", success: function (data) {// data is returned. d. Obtain str = data. d ;}, error: function (err) {alert (err) ;}}); return str;

Articles you may be interested in:

• Silverlight integrates ajax to achieve front-end and back-end Data Interaction
• See the figure to understand the differences between common interaction methods and Ajax interaction methods.
• Ajax interaction Struts2 action (Client/Server)
• Example of interaction between Ajax asynchronous transmission and PHP
• How to interpret the interaction between Ajax and servlet through an instance
• Detailed explanation of browser-server interaction in Ajax
• Asynchronous interaction with Ajax + js
• Simple asynchronous Ajax interaction and native Ajax writing