Get started with AJAX, jqueryajax

Get started with AJAX, jqueryajax

AJAX = Asynchronous JavaScript and XML (Asynchronous javaScript and XML)

It is a new method to use existing standards

The art of exchanging data with the server and updating some webpages, without reloading the entire page.

A simple DEMO

XMLHttpRequest is the basis of AJAX
All modern browsers support XMLHttpRequest objects (IE7 +, Firefox, Chrome, Safari, and Opera, IE5 and IE6 use ActiveXObject)
XMLHttpRequest is used to exchange data with the server in the background. This means that you can update a part of a webpage without reloading the entire webpage.



Syntax for creating an XMLHttpRequest object:

variable=new XMLHttpRequest();



Syntax created for IE5 and IE6:

variable=new ActiveXObject("Microsoft.XMLHTTP");



To cope with the creation Syntax of all modern browsers:

var xmlhttp;if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();  }else  {// code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }



Send a request to the server

xmlhttp.open("GET","test1.txt",true);xmlhttp.send();



Open (method, url, async)
Method: Request type; GET or POST
Url: the location of the file on the server
Async: true (asynchronous) or false (synchronous)


Send (string) sends the request to the server
String: used only for POST requests.


GET is simpler and faster, and can be used in most cases.
POST usage conditions:
1. Unable to use cached files (updating files or databases on the server)
2. Send large amounts of data to the server (there is no limit on the size of POST data)
3. When users with unknown packet content input, POST is more stable and reliable than GET columns.


To POST data like an HTML form, use setRequestHeader () to add an HTTP header. Then specify the data you want to send in the send () method:

xmlhttp.open("POST","ajax_test.asp",true);xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");xmlhttp.send("fname=Bill&lname=Gates");

SetRequestHeader (header, value)
Header: specified name
Value: Specifies the value of the header.


Async = true
The function that is executed in the ready state of the onreadystatechange event.

xmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)    {    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;    }  }xmlhttp.open("GET","test1.txt",true);xmlhttp.send();



Async = false

xmlhttp.open("GET","test1.txt",false);xmlhttp.send();document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

Obtain the response from the server and use the responseText or responseXML attributes of the XMLHttpRequest object.
ResponseText: returns a string response.


document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
ResponseXML:




xmlDoc=xmlhttp.responseXML;txt="";x=xmlDoc.getElementsByTagName("ARTIST");for (i=0;i<x.length;i++)  {  txt=txt + x[i].childNodes[0].nodeValue + "<br />";  }document.getElementById("myDiv").innerHTML=txt;



Onreadystatechange event
Onreadystatechange storage function (or function name), which is called whenever the readyState attribute changes.
ReadyState has the XMLHttpRequest status. 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 200: "OK"
404: Page not found

xmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)    {    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;    }  }



Note: The onreadystatechange event is triggered five times (0-4), corresponding to each change of readystate


The callback function is a function that is passed to another function as a parameter.


AJAX can be used to dynamically communicate with databases.


AJAX is based on the following core technologies:
XHTML, CSS, DOM, JavaScript, XML, XMLHttpRequest


The working principle of Ajax is equivalent to adding an intermediate layer-AJAX engine between the user and the server, so that user operations and server responses are asynchronous. Not all user requests are submitted to the server. For example, some data verification and simple data processing are handled by the AJAX engine, the AJAX engine submits requests to the server only when it is determined that new data needs to be read from the server.


Ajax Framework Classification
Client framework and Server framework
Client browser-based application frameworks are generally divided into two types:
1. Application Frameworks:
2. Infrastructural Frameworks:
The server-based application framework usually works in the following two ways:
1. HTML/JS Generation
2. Remote Interaction