Ajax usage, implementation method, JS native and JQ implementations

AJAX explanations

Ajax is the implementation of page asynchronous loading.

It is often used to interact with the front and back end data to achieve no refresh change operation.

A must-have skill for web front-end and back-end user Development ~ ~

Ajax Operations ~:

The slang principle: in the slang, is to transfer the data in the past, and then get back to the data from the back to use

(JS native uses Ajax)

Get request operation five steps away ~

1: Creating an Ajax Object

2: Set Callback Object

3: Initializing Ajax objects

4: Send Ajax Object

5: Judgment and execution

Detailed parameters:

New XMLHttpRequest (): Calling Ajax Object

URL: Address of the past to transfer data

Xhr.status return status code, 200 for success other for failure

Xhr.responsetext: Callback Data

The code is as follows:

Window.onload=function () {

Get Event

(document.getElementById (XX) Get event

$ (' GO '). Onclick=function () {

var one=$ (' one '). Value;

var two=$ (' both '). Value;

var xhr=new xmlhttprequest ();

Set callback

xhr.onreadystatechange= function () {

if (xhr.readystate==4 && xhr.status==200) {

alert (Xhr.responsetext);

}

}

Set Header information

var url = ' 02.php?&one= ' + one + ' &two= ' + both + ' &_= ' + math.gethouse () ';

Initializing Ajax

Xhr.open (' get ', url);

Sending Ajax objects

Xhr.send (NULL);

}

}

(JQ mode using AJAX): most commonly used!

$.ajax ({

URL: ' xxx.php ',//Transfer past URL address

Type: ' Get ',//Pass way GET, POST

Data: {A:A,B:B},//Transfer past data {' Over the receiving ': ' On this Side '}

Success:function (msg) {

callback function msg

If it is a string, manipulate it directly

If it is JSON data, parse the ~ for (var i in msg) {} Using JSON data and then use msg[' a '] msg.a

If you want to print the data, use Console.log

}

})

Because the Internet and IE-compatible Ajax are not the same ~

Ajax to solve the compatibility problem, we can enter the following code in the JS file to

function Createxhr () {

In the Chinese.

Try{return new XMLHttpRequest ()} catch (e) {}

Ie

try{return new ActiveXObject (' Microsoft.XMLHTTP ')} catch (e) {}

Alert (' Your browser does not support Ajex ');

}

Ajax usage, implementation method, JS native and JQ implementations