Ajax|web|web2
The recent hot topic on the Internet is of course about the application of WEB2.0, where Ajax is one of the core of WEB2.0. Ajax is the abbreviation for asynchronous JavaScript and XML. It is not a new language or technology, it is actually a combination of several technologies in a certain way to play their respective roles in the same collaboration, it includes
Standardized rendering using XHTML and CSS;
Use DOM to implement dynamic display and interaction;
Data exchange and processing using XML and XSLT;
Using XMLHttpRequest for asynchronous data reading;
Finally, bind and process all data with JavaScript;
Ajax works by adding a middle tier between the user and the server, enabling the user to respond asynchronously to the server. In this way, some of the previous server burden of work to the client, the client idle processing capacity to deal with, reduce the burden of server and bandwidth, so as to save the ISP space and bandwidth rental costs.
We use two examples to verify the existence of the pass account to illustrate the application of Ajax in practice:
(1) A text string to return the response of the server to verify the existence of NetEase pass account;
(2) To return the response to XmlDocument object to verify the existence of Jinshan pass account;
First, we need JavaScript to create the XMLHttpRequest class to send an HTTP request to the server, the XMLHttpRequest class is first introduced by Internet Explorer as an ActiveX object, known as XMLHTTP. And then Mozilla? Netscape? Safari and other browsers also provide XMLHttpRequest classes, but they do not create xmlhttprequest classes in a different way.
For Internet Explorer browsers, create the XMLHttpRequest method as follows:
Xmlhttp_request = new ActiveXObject ("msxml2.xmlhttp.3.0"); 3.0 or 4.0, 5.0
Xmlhttp_request = new ActiveXObject ("Msxml2.xmlhttp");
Xmlhttp_request = new ActiveXObject ("Microsoft.XMLHTTP");
Because the XMLHTTP version may not be consistent in different Internet Explorer browsers, for better compatibility with different versions of Internet Explorer browsers, we need to base different versions of the Internet Explorer browser to create the XMLHttpRequest class, the code above is a way to create XMLHttpRequest classes based on different Internet Explorer browsers.
For Mozilla? Netscape? Safari and other browsers, create the XMLHttpRequest method as follows:
Xmlhttp_request = new XMLHttpRequest ();
If the server's response does not have an XML Mime-type header, some Mozilla browsers may not work correctly. To solve this problem, if the header of the server response is not text/xml, other methods can be invoked to modify the header.
Xmlhttp_request = new XMLHttpRequest ();
Xmlhttp_request.overridemimetype (' Text/xml ');
In practical applications, in order to be compatible with many different versions of browsers, the method of creating the XMLHttpRequest class is generally written as follows:
try{
if (window. ActiveXObject) {
for (var i = 5; i; i--) {
try{
if (i = = 2) {
Xmlhttp_request = new ActiveXObject ("Microsoft.XMLHTTP");
}else{
Xmlhttp_request = new ActiveXObject ("msxml2.xmlhttp." + i + ". 0");
}
Xmlhttp_request.setrequestheader ("Content-type", "Text/xml");
Xmlhttp_request.setrequestheader ("Content-type", "gb2312");
break;
catch (e) {
Xmlhttp_request = false;
}
}
}else if (window. XMLHttpRequest) {
Xmlhttp_request = new XMLHttpRequest ();
if (Xmlhttp_request.overridemimetype) {
Xmlhttp_request.overridemimetype (' Text/xml ');
}
}
}catch (e) {
Xmlhttp_request = false;
}
After you have defined how to handle the response, you send the request. You can call the open () and send () methods of the HTTP request class, as follows:
Xmlhttp_request.open (' Get ', URL, true);
Xmlhttp_request.send (NULL);
The first parameter of open () is the HTTP request method? Get,post or any server supports the way you want to invoke. This argument is capitalized according to the HTTP specification, otherwise some browsers, such as Firefox, may not be able to process the request.
The second parameter is the URL of the request page.
The third parameter sets whether the request is asynchronous mode. If the True,javascript function continues to execute without waiting for the server to respond. This is "A" in "AJAX".
After using JavaScript to create a XMLHttpRequest class to send an HTTP request to the server, decide what to do when you receive a response from the server. This tells the HTTP request object which JavaScript function to use to handle the response. You can set the object's onReadyStateChange property to the name of the JavaScript function you want to use, as follows:
Xmlhttp_request.onreadystatechange =functionname;
FunctionName is a function name created with JavaScript, be careful not to write functionname (), and of course we can create JavaScript code directly after onreadystatechange, for example:
Xmlhttp_request.onreadystatechange = function () {
JavaScript Code Snippets
};
In this function. You first check the status of the request. The function can handle the response only if a full server response has been received. XMLHttpRequest provides a ReadyState property to determine the server response.
The readystate values are as follows:
0 (uninitialized)
1 (loading)
2 (Load complete)
3 (in interaction)
4 (complete)
So only when readystate=4, a full server response has been received, can the function handle the response. The specific code is as follows:
if (http_request.readystate = = 4) {
Receive Full server response
} else {
No full server response received
}
When readystate=4, a full server response has been received, and then the function checks the status value of the HTTP server response. Full state values can be found in the documentation for the document. When the HTTP server responds with a value of 200, it indicates that the status is normal.
After checking the status value of the request and the HTTP status value of the response, you can process the data obtained from the server. There are two ways to get this data:
(1) Returns the response of the server as a text string
(2) Return response in XmlDocument object mode
Example one: Return the response of the server with a text string to verify the existence of NetEase pass account
First, we login NetEase pass registration page, you can see the detection of the existence of the user name is the user name submitted to the CHECKSSN.JSP page to judge, the format is:
Reg.163.com/register/checkssn.jsp?username= User Name
According to the method mentioned above, we can use AJAX technology to detect NetEase pass user name:
First step: Create a new Web page based on XHTML standards, insert JavaScript functions into the
<script type= "Text/javascript" language= "JavaScript" >
function Getxmlrequester () {
var xmlhttp_request = false;
try{
if (window. ActiveXObject) {
for (var i = 5; i; i--) {
try{
if (i = = 2) {
Xmlhttp_request = new ActiveXObject ("Microsoft.XMLHTTP");
}else{
Xmlhttp_request = new ActiveXObject ("msxml2.xmlhttp." + i + ". 0");
Xmlhttp_request.setrequestheader ("Content-type", "Text/xml");
Xmlhttp_request.setrequestheader ("Content-type", "gb2312");
}
break;
catch (e) {
Xmlhttp_request = false;
}
}
}else if (window. XMLHttpRequest) {
Xmlhttp_request = new XMLHttpRequest ();
if (Xmlhttp_request.overridemimetype) {
Xmlhttp_request.overridemimetype (' Text/xml ');
}
}
}catch (e) {
Xmlhttp_request = false;
}
return xmlhttp_request;
}
function Idrequest (n) {//define JavaScript functions that need to be executed after receiving a response from the server
Url=n+document.getelementbyid (' 163id '). value;//Define URL Parameters
Xmlhttp_request=getxmlrequester ()//call to create XMLHttpRequest function
Xmlhttp_request.onreadystatechange = docontents;//call docontents function
Xmlhttp_request.open (' Get ', url, true);
Xmlhttp_request.send (NULL);
}
function docontents () {
if (xmlhttp_request.readystate = = 4) {//Receive full server response
if (Xmlhttp_request.status = =) {//http Server response value OK
document.getElementById (' message '). InnerHTML = Xmlhttp_request.responsetext;
Writes the string returned by the server to the area in the page with ID message
} else {
alert (http_request.status);
}
}
}
</script>
Create a text box in the <body> area with ID 163id
<input type= "text" id= "163id" onpropertychange= "idrequest" (' Http://reg.163.com/register/checkssn.jsp?username= ' ) "/>
Another blank area with an ID of messsge is used to display the return string (or to intercept a portion of the string display via a JavaScript function):
<div id= "Message" ></div>
In this way, an AJAX-based user name Detection page is done, but this page will return the server response to generate all the strings of the page, of course, can also do some operations on the returned string, easy to apply to different needs.
Example two: The XmlDocument object Way returns the response to verify that Jinshan Pass account exists
In the example above, when the server's response to the HTTP request is received, we invoke the Reponsetext attribute of the requested object. This property contains the contents of the server return response file. Now we return the response as a XmlDocument object, where the Reponsetext property is no longer needed and the Responsexml property is used.
First Landing Jinshan Pass registration page, we found that Jinshan pass user name detection methods are:
Pass.kingsoft.com/ksgweb/jsp/login/uid.jsp?uid= the user name and returns the XML data:
<?xml version= "1.0" encoding= "UTF-8" standalone= "yes"?>
<response>
<method>isExistedUid</method>
<result>-2</result>
</response>
When the result value is-1, the user name is registered, and when the result value is 2, the user name has not been registered, so it is possible to know whether the user name is registered by the judgment of the value.
To modify the previous example code:
First find
document.getElementById (' message '). InnerHTML = Xmlhttp_request.responsetext;
To
var response = Xmlhttp_request.responseXML.documentElement;
var result = response.getelementsbytagname (' result ') [0].firstchild.data;//return result node data
if (Result ==-2) {
document.getElementById (' message '). InnerHTML = "username" +document.getelementbyid (' 163id '). value+ "not registered";
}
else if (result ==-1) {
document.getElementById (' message '). InnerHTML = "Sorry, username" +document.getelementbyid (' 163id '). value+ "already registered";
}
Through the above two examples to illustrate the AJAX client base application, the use of NetEase and Jinshan off-the-shelf server program, of course, in order to develop a suitable page of the program, but also need to write their own server program, which design to the program language and database operation, For a certain program based on the reader must not be difficult things, this article focuses on the application of client Ajax experience, the majority of readers can be based on the principle of this article combined with various styles of performance techniques to make colorful applications, I hope this article can play a role in the discussion.
