What is Ajax? An explanation of several implementations of Ajax (with usage examples)

This article mainly introduces the implementation of Ajax, as well as the definition of AJAX analysis. Let us understand how Ajax is used and how AJAX can be implemented with jquery. Now let's start reading this article.

First, what is Ajax

The ajax:asynchronous JavaScript and XML enables the client to communicate with the server at the same time and asynchronously sends the request. Ajax is not a new programming language, but rather a technique for creating better, faster, and more interactive Web applications.
The advantage of using technology is that you do not have to refresh the page and can do other things while waiting for the page to transfer the data .

Second, native JS implementation Ajax

Here is an implementation of the routines, the idea is roughly like this:
1. According to the different browser, create xmlHttpRequest 对象 ;
2. Use the open call to send a request to the Ajax engine using send.
3. After the execution of the server program, the results are returned to the client (with xml.readyState == 4 && xml.status == 200 the decision to send the success, and then xml.responseText received back from the background data)

Returns a XMLHttpRequest object function Creathttprequest () {    if (window. XMLHttpRequest)        var xml=new xmlhttprequest ();    Else        var xml=activexobject ("Miscrosoft.xmlhttp");    return XML;} Here is the event that triggers the AJAX (such as a click event for a button) function Triggerajax () {   ///above idea Step 1, creating a XMLHttpRequest object    var xml = Creathttprequest ();    Above train of thought step 2    xml.open ("POST", "result.php", false);   Open () The second parameter is your background PHP file relative path    xml.setrequestheader ("Content-type", "application/x-www-form-urlencoded");    Xml.send (URL);    Above train of thought step 3    if (xml.readystate==4&&xml.status==200)    {        alert (xml.responsetext);    }}

Third, JQuery to achieve Ajax

jquery implements Ajax in a much simpler way, and has encapsulated a $.ajax function that is convenient to call.

$.ajax ({   type: "POST",//Send to post or get  URL: "ajax.php",//Send address  dataType: "JSON",//format of data transmitted  : {" Username ":" zwkkkk1 "," Password ": 123456},//Transmitted data  //Successful callback function  Success:function (msg) {     console.log (msg)   },   //Failed callback function  error:function () {     console.log ("error")   }})

First, what is Ajax

The ajax:asynchronous JavaScript and XML enables the client to communicate with the server at the same time and asynchronously sends the request. Ajax is not a new programming language, but rather a technique for creating better, faster, and more interactive Web applications.
The advantage of using technology is that you do not have to refresh the page and can do other things while waiting for the page to transfer the data .

Second, native JS implementation Ajax

Here is an implementation of the routines, the idea is roughly like this:
1. According to the different browser, create xmlHttpRequest 对象 ;
2. Use the open call to send a request to the Ajax engine using send.
3. After the execution of the server program, return the results to the client (with xml.readyState == 4 && xml.status == 200 the decision to send the success, and then xml.responseText receive the data back from the background) (want to see more on the Topic.alibabacloud.comAJAX Development Manual section to learn)

Returns a XMLHttpRequest object function Creathttprequest () {    if (window. XMLHttpRequest)        var xml=new xmlhttprequest ();    Else        var xml=activexobject ("Miscrosoft.xmlhttp");    return XML;} Here is the event that triggers the AJAX (such as a click event for a button) function Triggerajax () {   ///above idea Step 1, creating a XMLHttpRequest object    var xml = Creathttprequest ();    Above train of thought step 2    xml.open ("POST", "result.php", false);   Open () The second parameter is your background PHP file relative path    xml.setrequestheader ("Content-type", "application/x-www-form-urlencoded");    Xml.send (URL);    Above train of thought step 3    if (xml.readystate==4&&xml.status==200)    {        alert (xml.responsetext);    }}

Third, JQuery to achieve Ajax

jquery implements Ajax in a much simpler way, and has encapsulated a $.ajax function that is convenient to call.

$.ajax ({   type: "POST",//Send to post or get  URL: "ajax.php",//Send address  dataType: "JSON",//format of data transmitted  : {" Username ":" zwkkkk1 "," Password ": 123456},//Transmitted data  //Successful callback function  Success:function (msg) {     console.log (msg)   },   //Failed callback function  error:function () {     console.log ("error")   }})

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.