What are ajax technologies?

The technologies included in ajax are: 1. HTML or XHTML, used to create web page content; 2. CSS, used to beautify web page content; 3. DOM, interactive and dynamic display of web page content; 4. XMLHttpRequest, Used for asynchronous communication with the server; 5. JavaScript, to implement binding and calling.

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

Ajax is a new term proposed by Jesse James Garrett in 2005 to describe a 'new' approach using a collection of existing technologies, including: HTML or XHTML, CSS, JavaScript, DOM, XML, XSLT, and most importantly XMLHttpRequest.

Using Ajax technology, web applications can quickly present incremental updates to the user interface without the need to reload (refresh) the entire page, which allows the program to respond to user operations faster.

Technology included in ajax:

Everyone knows that ajax is not a new technology, but a combination of several original technologies. It is composed of the following technologies.

1. HTML or XHTML, used to create web page content

2. CSS, used to beautify web page content

3. Use DOM model for interaction and dynamic display.

4. Use XMLHttpRequest to communicate asynchronously with the server.

5. Use javascript to bind and call.

Among the above technologies, except for the XmlHttpRequest object, all other technologies are based on web standards and have been widely used. Although XMLHttpRequest has not yet been adopted by W3C, it is already a A de facto standard as almost all major browsers currently support it.

ajax principle and XmlHttpRequest object

The principle of Ajax is simply to send an asynchronous request to the server through the XmlHttpRequest object, obtain data from the server, and then use javascript to operate the DOM And update the page. The most critical step in this is to obtain the request data from the server. To understand this process and principle, we must understand something about XMLHttpRequest.

XMLHttpRequest is the core mechanism of ajax. It was first introduced in IE5 and is a technology that supports asynchronous requests. To put it simply, JavaScript can make requests to the server and process responses in a timely manner without blocking the user. Achieve no refresh effect.

So let’s start with XMLHttpRequest and see how it works.

First, let’s take a look at the properties of the XMLHttpRequest object.

Its attributes are:

onreadystatechange The event handler for the event triggered each time the state changes.

responseText returns the string form of data from the server process.

responseXML DOM-compatible document data object returned from the server process.

statusThe numeric code returned from the server, such as the common 404 (not found) and 200 (ready)

status TextThe string information accompanying the status code

readyState Object status value

0 (uninitialized) The object has been created, but has not yet been initialized (the open method has not been called)

1 (Initialized) The object has been created, but the send method has not been called yet

2 (Send data) The send method has been called, but the current status and http header are unknown

3 (Data is being transmitted) Part of the data has been received because the response and http header are incomplete. At this time, it is obtained through responseBody and responseText There will be errors in some data.

4 (Complete) Data reception is completed. At this time, the complete response data can be obtained through responseXml and responseText.

However, due to differences between browsers, So creating an XMLHttpRequest object may require different methods. This difference is mainly reflected between IE and other browsers. The following is a relatively standard method of creating an XMLHttpRequest object.

function CreateXmlHttp()
{
//非IE浏览器创建XmlHttpRequest对象
if(window.XmlHttpRequest)
{
xmlhttp=new XmlHttpRequest();
}
//IE浏览器创建XmlHttpRequest对象
if(window.ActiveXObject)
{
try
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
try{
xmlhttp=new ActiveXObject("msxml2.XMLHTTP");
}
catch(ex){}
}
}
}
function TestAjax()
{
var data=document.getElementByIdx("username").value;
CreateXmlHttp();
if(!xmlhttp)
{
alert("创建xmlhttp对象异常！");
return false;
}
xmlhttp.open("POST",url,false);
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
document.getElementByIdx("user1").innerHTML="数据正在加载...";
if(xmlhttp.status==200)
{
document.write(xmlhttp.responseText);
}
}
}
xmlhttp.send();
}

As shown above, the function first checks the overall status of XMLHttpRequest and ensures that it has been completed (readyStatus=4), that is, the data has been sent. Then query the request status according to the server's settings. If everything is ready (status=200), then perform the following required operations.

For the two methods of XmlHttpRequest, open and send, the open method specifies:

a. The type of data submitted to the server, that is, post or get.

b, requested url address and passed parameters.

c. Transmission mode, false means synchronous, true means asynchronous. Default is true. If it is an asynchronous communication mode (true), the client does not wait for the server's response; if it is a synchronous mode (false), the client has to wait until the server returns a message before performing other operations. We need to specify the synchronization method according to actual needs. In some pages, multiple requests may be issued, or even large-scale, high-intensity requests that are organized, planned, and formed, and the latter one will overwrite the previous one. This Of course, you must specify the synchronization method.

Send method is used to send requests.

Knowing the workflow of XMLHttpRequest, we can see that XMLHttpRequest is completely used to issue a request to the server, and its role is limited to this, but its role is the key to the entire ajax implementation, because ajax is nothing more than Two processes, making a request and responding to a request. And it's entirely a client-side technology. XMLHttpRequest handles the communication problem between the server and the client, which is why it is so important.

Now, we can probably have an understanding of the principle of ajax. We can think of the server as a data interface, which returns a plain text stream. Of course, this text stream can be in XML format, Html, Javascript code, or just a string. At this time, XMLHttpRequest requests this page from the server, and the server writes the text result into the page. This is the same as the ordinary web development process. The difference is that after the client obtains the result asynchronously, it is not directly displayed on the page. , but is processed by javascript first and then displayed on the page. As for many popular ajax controls now, such as magicajax, etc., they can return other data types such as DataSet. They just encapsulate the result of this process. In essence, there is not much difference between them.

[Related tutorial recommendations: AJAX video tutorial]

The above is the detailed content of What are ajax technologies?. For more information, please follow other related articles on the PHP Chinese website!