Principles and Applications of AJAX

I. What is Ajax?

Ajax (Asynchronous JavaScript and XML) Asynchronous JavaScript and XML, through interaction with the back-end interface, achieve partial page refresh.

Ii. Ajax principles

Ajax interacts with the server through XMLHttpRequest (all modern browsers support XMLHttpRequest objects, and ie5 and IE6 use activexobject). After obtaining data, it uses JavaScript to operate Dom to display data.

3. XMLHTTPRequest object

1. Create an XMLHTTPRequest object

function createXHR(){    var xmHttp = null;    if(window.XMLHttpRequest){        xmlHttp = new window.XMLHttpRequest();    }else{        xmlHttp = new window.ActiveXObject(‘Microsoft.XMLHTTP‘);    }     return xmlHttp;}

2. send a request to the server

To send a request to the server, use the open and send methods of XMLHttpRequest.

The open () method that specifies the request type, URL, and whether the request is asynchronous.

Open (method, URL, async)

Mehtodd: Request type (post or get)

URL: the requested URL

Anync: whether it is an asynchronous request. Optional values: true (asynchronous) and false (synchronous). The default value is asynchronous request.

Send () method to send requests to the server

Send (string)

String: used only for post requests. parameters included in the request

Send GET request

VaR XMLHTTP = createxhr (); XMLHTTP. onreadystatechange = function () {If (XMLHTTP. readystate = 4 & XMLHTTP. status = 200) {var result = XMLHTTP. responsetext; // corresponding processing logic} XMLHTTP. open ('get', 'test. PHP? AA = AA & BB = BB ', true); XMLHTTP. Send ();

Send POST request

VaR XMLHTTP = createxhr (); XMLHTTP. onreadystatechange = function () {If (XMLHTTP. readystate = 4 & XMLHTTP. status = 200) {var result = XMLHTTP. responsetext; // corresponding processing logic} XMLHTTP. open ('post', 'test. php', true); XMLHTTP. setRequestHeader ("Content-Type", "application/X-WWW-form-urlencoded"); XMLHTTP. send ('aa = AA & BB = BB ');

When sending a request using post, you must set the HTTP header information and pass the parameters to be sent through the send method.

When the request is an asynchronous request, you need to register some post-response operations through the onreadystatechange event. For synchronous requests, you only need to call XMLHTTP. responsetext directly after the send method, and do not need to register onreadystatechange

Onreadystatechange: this event is triggered whenever the readystate changes.

Readystate: stores the state of XMLHttpRequest, which changes from 0 to 4.

• 0: the request is not initialized.

• 1: The server connection has been established.

• 2: The request has been received

• 3: The request is being processed

• 4: The request is complete and the response is ready.

Status: Response Code returned from the server, such as 200 (ready), 404 (not found)

Responsetext: String data returned from the server

Responsexml: XML data returned from the server, which must be parsed as an XML Object

Iv. Complete instance

PHP code, test. php

<?php    $uname = $_GET(‘uname‘);        $age = $_GET(‘age‘);        $result = array(               ‘uname‘ => $uname,                ‘age‘ => $age        );        echo json_encode($result);?>

JavaScript code:

function createXHR(){    var xmHttp = null;    if(window.XMLHttpRequest){        xmlHttp = new window.XMLHttpRequest();    }else{        xmlHttp = new window.ActiveXObject(‘Microsoft.XMLHTTP‘);    }    return xmlHttp;}var xmlHttp = createXHR();xmlHttp.onreadystatechange = function(){    if(xmlHttp.readyState == 4 && xmlHttp.status == 200){        var result = xmlHttp.responseText;        alert(result);    }}xmlHttp.open(‘GET‘,‘test.php?uname=kaixin&age=16‘,true);xmlHttp.send();

This article is from the "I am standard" blog, please be sure to keep this source http://liumanwei.blog.51cto.com/3005291/1437981