Some simple AJAX application examples use the instructions

Source: Internet
Author: User
Tags serialization

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);  
   }
};

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.