I. Three Important attributes of the XMLHttpRequest object.
OnreadystatechangeAttribute
The onreadystatechange attribute contains functions for processing server responses. The following code defines an empty function. You can set the onreadystatechange attribute at the same time:
XmlHttp. onreadystatechange = function ()
{
// We need to write some code here
}
ReadyStateAttribute
The readyState attribute contains the status information of the server response. When the readyState changes, the onreadystatechange function is executed.
This is the possible value of the readyState attribute:
Status |
Description |
0 |
Request not initialized (before calling open) |
1 |
Request Submitted (before sending () is called) |
2 |
The request has been sent (here we can usually get the Content Header from the response) |
3 |
Request Processing (some data is usually available in the response, but the server has not completed the response) |
4 |
The request has been completed (you can access the server response and use it) |
We need to add an If statement to this onreadystatechange function to test whether our response has been completed (meaning data can be obtained ):
XmlHttp. onreadystatechange = function ()
{
If (xmlHttp. readyState = 4)
{
// Obtain data from the server's response
}
}
ResponseTextAttribute
You can use the responseText attribute to retrieve the data returned by the server.
Ii. Basic source code:
Var xmlHttp
Function showCustomer (str)
{
XmlHttp = GetXmlHttpObject ();
If (xmlHttp = null)
{
Alert ("Your browser does not support AJAX! ");
Return;
}
// Set the url of the Request Response
Var url = "getcustomer_xml.asp ";
Url = url + "? Q = "+ str;
Url = url + "& sid =" + Math. random ();
XmlHttp. onreadystatechange = stateChanged;
XmlHttp. open ("GET", url, true );
XmlHttp. send (null );
}
Function stateChanged ()
{
If (xmlHttp. readyState = 4)
{
// ResponseText returns an HTTP response using a string
// Document. getElementById ("txtHint"). innerHTML = xmlHttp. responseText;
// ResponseXML returns a response in XML
// The server ContentType attribute sets the HTTP content type for the response object. The default value of this attribute is "text/html ". The server returns responseXML to set the content type to XML.
Var xmlDoc=xmlHttp.responseXML.doc umentElement;
Document. getElementById ("companyname"). innerHTML =
XmlDoc. getElementsByTagName ("compname") [0]. childNodes [0]. nodeValue;
Document. getElementById ("contactname"). innerHTML =
XmlDoc. getElementsByTagName ("contname") [0]. childNodes [0]. nodeValue;
Document. getElementById ("address"). innerHTML =
XmlDoc. getElementsByTagName ("address") [0]. childNodes [0]. nodeValue;
Document. getElementById ("city"). innerHTML =
XmlDoc. getElementsByTagName ("city") [0]. childNodes [0]. nodeValue;
Document. getElementById ("country"). innerHTML =
XmlDoc. getElementsByTagName ("country") [0]. childNodes [0]. nodeValue;
}
}
Function GetXmlHttpObject ()
{
Var xmlHttp = null;
Try
{
// Firefox, Opera 8.0 +, Safari
XmlHttp = new XMLHttpRequest ();
}
Catch (e)
{
// Internet Explorer
Try
{
XmlHttp = new ActiveXObject ("Msxml2.XMLHTTP ");
}
Catch (e)
{
XmlHttp = new ActiveXObject ("Microsoft. XMLHTTP ");
}
}
Return xmlHttp;
}
Iii. Ajax framework:Browser-based application framework and server-based application framework.
1. browser-based application frameworks are generally divided into two types:
Aplication frameworks: Provides browser functions, but its most famous one is to create a desktop GUI through the window generation component. For example, DOJO, qooxdoo, JavaFX, YUI, and ExtJS (the initial name is yui-ext, because the yui library is extended, later, jquery and prototype were extended to ext, Flex (similar to ExtJS), TIBET, and so on.
Infrastructural frameworks: provides basic framework functions and lightweight browser operations for developers to create specific applications. The main functions include:
-
- Browser Interaction Based on XMLHttpRequest Components
- XML parsing and operation functions
- Perform DOM operations based on the returned information of XMLHttpRequest.
- In some special cases, it is used together with other browser technologies such as Flash (or Java Applets ).
For example: jQuery (less code), prototype, and MooTools (powerful than prototype, better design than prototype, and many useful design concepts from prototype), Google AJAXSLT, Flash/JavaScript,.
2. server-based application frameworks generally work in either of the following ways (although they are categorized by different languages ):
HTML/JS Generation (HTML/JS Generation): Generate HTML and JS code on the server side and directly run the code on the browser side. For example, Ext GWT.
Remote Interaction: JavaScript calls server-side functions (such as calling Java functions) and returns a callback handle to JavaScript, or requests server-side data information, such as Session information and database queries. Such as DWR.