Vernacular Ajax and Its Basics

I. Principles of Vernacular Ajax

This can start with the principles of C/S and B/S. The birth of the Windows operating system provides great support for standalone communication, and the program design is also from the early dos single task single user to the network distributed application. The Client/Server programming mode provided by C/S provides an effective means of communication for network applications. The request/service between the browser and the Web server is a typical C/S application.
Some people say, How is c/s? This should be B/S! In fact, the Browser/Web Server is a platform for us to implement web page publishing. For the applications we develop on this platform, our applications are downloaded by the browser from the Web server and then displayed in the browser's "Container". Our applications are in B/S mode. However, the browser communicates with the web server in the C/S mode. It can be said that the B/S mode is based on the C/S mode.
Early Windows desktop applications (including standalone and C/S network applications) were implemented by calling Windows APIs. Later, the emergence of VB, Delph (VCL), VC ++ (MFC) and other application frameworks, Packaging Complex APIs, so that Windows program development is greatly reduced and efficiency is greatly improved.
After entering the B/S programming stage, we only need to program for web servers and browsers, and do not need to consider complicated issues such as network communication and concurrency. However, for data interaction between the browser and the web server, the browser often submits some information to the Web server frequently. The current network environment is very poor, we often wait for the communication between the browser and the Web server, and the user experience is poor. Traditional desktop programs do not have this defect.
How can we use the strong interface expressiveness of the B/S program and avoid the dizzy "vacuum" state after it is submitted?
In fact, in the design stage of the browser, the designer has considered this problem for us. This is what we need to talk about Ajax! Ajax is Asynchronous JavaScript and XML in English. It implements asynchronous communication between the browser and the web server through a mechanism in the browser. technologies such as JavaScript and XML are involved in this process. The introduction of Ajax reduces the amount of B/S information transmitted, and the browser interface does not flash any more. The browser feels much better.
Ajax is not a new technology, but a new combination of several existing technologies. Its development also benefits from the first application of several large Internet companies (Google's online maps are often used as an example ). Even the browser oligarchy Microsoft was not able to stand up for this technology at the beginning, and then it was only in the Age of vs. net2.0.

Ii. Ajax implementation

Ajax is implemented by a browser through an internal component. This component is responsible for receiving users' requests, using XML as an information intermediary, and implementing asynchronous communication with the Web server, and return the request result to the browser, which then presents it to the user interface. "Asynchronous" means that when the component is working in the background, the browser interacts with the user and does not update the current window. Not all data is submitted to the background by components.
The basis of Ajax implementation is that the browser has an Ajax engine, the browser supports JavaScript, and the Web server also supports XML data format. Not all browsers support Ajax technology, but more and more browsers support Ajax.
This component is a COM component in windows and is called by IE browser. IE browser also provides this component after version 5.0. Different browsers implement and create XMLHttpRequest objects in different ways. However, as a common Ajax interface, its external performance is consistent.
Ajax is actually a complex technology that involves a lot of things. In addition to XMLHttpRequest objects and JavaScript, there are also dom (Document Object Model) and XML. Javascript is an adhesive. It uses XMLHttpRequest objects to manipulate many elements of browser pages to achieve background interaction with web servers and data verification and access.

Iii. Ajax programming example

1. Client (File client.htm)
<HTML>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Title> Ajax client </title>
<Script language = "JavaScript">
VaR XMLHTTP = false;
/// Start to initialize the XMLHTTPRequest object
// This Code takes into account the compatibility between XMLHTTP objects and mainstream browsers.
// If you test in IE
// XMLHTTP = new activexobject ("msxml2.xmlhttp ")
// Or XMLHTTP = new activexobject ("Microsoft. XMLHTTP") statement.
If (window. XMLHttpRequest)
{
// Mozilla Browser
XMLHTTP = new XMLHttpRequest ();
If (XMLHTTP. overridemimetype)
{// Set the mime category
XMLHTTP. overridemimetype ('text/xml ');
}
}
Else
If (window. activexobject)
{
// IE browser
Try
{XMLHTTP = new activexobject ("msxml2.xmlhttp ");}
Catch (E)
{
Try
{XMLHTTP = new activexobject ("Microsoft. XMLHTTP ");}
Catch (E)
{}
}
}

Function send_request (URL, data)
{
// Initialize, specify the processing function, and send the request Function
If (! XMLHTTP)
{// Exception. An error occurred while creating the object instance.
Window. Alert ("the XMLHTTPRequest object instance cannot be created .");
Return false;
}

// Determine the request sending method and URL and whether to execute the following code synchronously
XMLHTTP. Open ("Post", URL, true );
XMLHTTP. onreadystatechange = processrequest; // triggers this status change event based on the Web server response.
XMLHTTP. setRequestHeader ("Content-Type", "application/X-WWW-form-urlencoded ");
XMLHTTP. Send ("username =" + data); // send information to the background program
}

/// Status change event processing function: Process returned information
Function processrequest ()
{
If (XMLHTTP. readystate = 4)
{// Determine the object status
If (XMLHTTP. Status = 200) // normal return information, status No. 200
{// The information has been returned successfully. Start to process the information.
Alert (XMLHTTP. responsetext );
}
Else
{// The page is abnormal.
Alert ("the page you requested has an exception .");
}
}
}

Function usercheck ()
{
VaR F = Document. form1;
VaR username = f. username. value;
If (username = "")
{
Window. Alert ("the user name cannot be blank .");
F. username. Focus ();
Return false;
}
Else
{
// This statement is executed by the user after clicking the "Uniqueness check" button
Send_request ('server. php', username );
}
}
</SCRIPT>

</Head>

<Body>
<Body>
<Form name = "form1" Action = "" method = "Post">
Username: <input type = "text" name = "username" value = "">
<Input type = "button" name = "check" value = "Uniqueness check" onclick = "usercheck ()">
<Input type = "submit" name = "submit" value = "submit">
</Form>
</Body>
</Html>

2. Web Server (File Server. php)
<? PHP
// Obtain client data
$ Username = $ _ post ["username"];

// Determine the uniqueness of the user name
If ($ username = "") // in the actual project, the user name value is generally obtained from the database.
{
Printf ("username" % s "has been registered, please change to a username", $ username );
}
Else
{
Printf ("username" % s "is not used yet, you can continue", $ username );
}
?>

In the client.htm code, first create an XMLHTTPRequest object instance, and then trigger the event processing function based on the object state to process the returned information. All control logics are written in JavaScript scripts. The XML Information exchange between the XMLHTTPRequest object and the Web server is implicit to us, so we don't have to worry about it.

This is the most primitive Ajax programming framework, which can easily process a small amount of data. Code Refactoring can be used in our own small projects.

Note that AJAX is a browser-side technology. It has nothing to do with the script used by the Web server to write code. For example, if we change the client.htm statement send_request ('server. php', username) to send_request ('server. asp ', username), and then create a server. asp file with the following content:

<%
Dim Username
Username = request ("username ")

If username = "Thomas" then
Response. Write ("username" & username & "already registered, please change the user name ")
Else
Response. Write ("username" & username & "not used yet, you can continue ")
End if
%>
After such a change, the user can see exactly the same effect on the browser side.