This blog post mainly uses a simple AJAX application to parse the fundamentals of Ajax technology.
First you need three files, Simpleajax.hml (to see the effect), Simpleajax.js (with XMLHttpRequest objects in JavaScript to communicate directly with the server), SimpleAjax.txt ( A file that can customize the output of an asynchronous communication.
1 new simpleajax.html file
The code is as follows |
Copy Code |
|
code is as follows |
copy code |
Var xmlhttp=null;//first creates a XMLHTTP variable that is used as a XMLHttpRequest object, and the value is set to null function Createxmlhttprequest () { if (window). XMLHttpRequest) {xmlhttp=new XMLHttpRequest ()//For ie7+, Firefox, Chrome, Opera, Safari The Else if (window). ActiveXObject) { xmlhttp=new activexobject ("Microsoft.XMLHTTP");//For IE6, IE5 } } Function startrequest () {//Call this function by clicking the button in Simpleajax.html Createxmlhttprequest (); Call the above createxmlhttprequest () function xmlhttp.onreadystatechange=handlestatechange;//call the following Handlestatechange () function Xmlhttp.open ("Get", "SimpleAjax.txt", true); Xmlhttp.send (); } Function Handlestatechange () { if (xmlhttp.readystate==4 & #038;& xmlhttp.status==200) { document.getElementById ("Responseresult"). Innerhtml=xmlhttp.responsetext; } } |
Name Explanation:
2.1 The role of the first function createxmlhttp () is to create different XMLHttpRequest objects based on customer-side browser type (ie and non IE) and the JavaScript technology version installed in IE. The XMLHttpRequest object is used to exchange data with the server in the background. It can: Update the Web page without reloading the page, request data from the server after the page has been loaded, receive data from the server after the page has been loaded, and send data to the server in the background.
2.2 Wherein Xmlhttp.onreadystatechange indicates that the onreadystatechange event is triggered whenever the readystate of the state information of the XMLHttpRequest is changed. When the readyState equals 4 and the status is 200, the response is ready.
2.3 Where Xmlhttp:open (Bstrmethod, bstrURL, Varasync, Bstruser, bstrpassword) represents the creation of a new HTTP request (bstrURL) and specifies the method of this request (Get,post , URL, and Varasync Boolean, specify whether this request is asynchronous, and the default is true-the callback function specified by the onReadyStateChange property is invoked when the state changes.
2.4 where Xmlhttp.send () indicates that the request was sent to the HTTP server and received a response.
3 new Simpleajax.txt File
Arbitrary in this TXT file to write content, such as: Hello,i have changed myself!.
It's all about Ajax, so let's look at a jquery approach .
JQuery Ajax instances ($.ajax, $.post, $.get)
$.post, $.get is a simple method, if you want to deal with complex logic, still need to use the Jquery.ajax ()
General format of $.ajax
The code is as follows |
Copy Code |
$.ajax ({ Type: ' POST ', Url:url, Data:data, Success:success, Datatype:datatype }); |
Ii. Description of $.ajax parameters
Parameter description
URL required. Specify which URL to send the request to.
Data is optional. The mapping or string value. Specify the data to be sent to the server along with the request.
Success (data, Textstatus, JQXHR) is optional. The callback function to execute when the request succeeds.
DataType Optional. Specify the data type of the expected server response.
The default execution of intelligent judgments (XML, JSON, script, or HTML).
Third, $.ajax need to pay attention to some places:
1.data main methods are three kinds, HTML splicing, JSON array, form form by serialize () serialization, by datatype specified, do not specify intelligent judgment.
2.$.ajax only submits form in text mode, if the asynchronous commit includes <file> uploads is passed over, need to use Jquery.form.js $.ajaxsubmit
The code is as follows |
Copy Code |
1.$.ajax asynchronous requests with JSON data var aj = $.ajax ({ URL: ' productmanager_reverseupdate ',//Jump to action data:{ Selrollback:selrollback, Seloperatorscode:seloperatorscode, Provincecode:provincecode, Pass2:pass2 }, Type: ' Post ', Cache:false, DataType: ' JSON ', Success:function (data) { if (data.msg = = "true") { View ("Modified successfully!") "); Alert ("Modified successfully!") "); Window.location.reload (); }else{ View (DATA.MSG); } }, Error:function () { View ("Exception!") "); Alert ("Exception!") "); } }); 2.$.ajax an asynchronous request that serializes the contents of a table as a string function Notips () { var Formparam = $ ("#form1"). Serialize ();//serialization table contents as strings $.ajax ({ Type: ' Post ', URL: ' Notice_notipsnotice ', Data:formparam, Cache:false, DataType: ' JSON ', Success:function (data) { } }); } Asynchronous request for 3.$.ajax stitching URL var Yz=$.ajax ({ Type: ' Post ', URL: ' validatepwd2_checkpwd2?password2= ' +password2, data:{}, Cache:false, DataType: ' JSON ', Success:function (data) { if (data.msg = = "false")//the server returns FALSE, the value of VALIDATEPASSWORD2 is changed to Pwd2error, which is asynchronous and needs to consider the return time { Textpassword2.html ("<font color= ' red ' > Business password is incorrect!) </font> "); $ ("#validatePassword2"). Val ("Pwd2error"); CheckPassword2 = false; Return } }, Error:function () {} }); //4.$.ajax asynchronous request for data concatenation $.ajax ({ URL: ' <%=request.getcontextpath ()% >/kc/kc_checkmernameunique.action ', type: ' Post ', data: ' mername= ' +values, async:false,//default to True asynchronous & nbsp; error:function () { alert (' Error '); }, success:function (data) { & nbsp; $ ("#" +divs). HTML (data); } }; |