"AJAX"--Practical Application, complete demo

Prerequisites

Before the small compilation of some of the theoretical content of Ajax, in fact, after these theories also do some practical work, unfortunately at that time the small part did not tidy up, with the project ended, until the use of the recent project, found that the small series of their own forgotten how to do ... Ashamed Ah, in the final analysis, the understanding is not deep, in order to eliminate the similar situation, tidy up, easy to more in-depth understanding, if there is wrong, please do not hesitate to enlighten ah.

Application Process
1 . Why create a XMLHttpRequest object ?

XMLHttpRequest is used to exchange data on the server in the background. This means that you can refresh portions of the Web page without reloading the entire page. and modern browsers support XMLHttpRequest objects (IE5 and IE6 use ActiveXObject).

function Createxmlhttp () {
		var xmlHttp;
		if (window. ActiveXObject)//for IE browser  
        {  
            try{  
                  xmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");//For IE high version  
                }  
            catch (e) {  
                  xmlHttp = new ActiveXObject ("Msxml2.xmlhttp");//For IE low version  
                 }     
        }else if (window. XMLHttpRequest) {//for non-ie browser    
                    xmlHttp = new XMLHttpRequest ();  
        }  
		return xmlHttp;
	}

2. Configure the XMLHttpRequest object to send requests to the server

In the configuration process, you can set the submission method, submit the address, and the same asynchronous commit

Xhr.open ("GET", "${pagecontext.request.contextpath}/user_findbyname.action?time=" +new Date (). GetTime () + "& Username= "+username,true);

The default is synchronous commit, the asynchronous commit, set to false; GET or POST.

GET is simpler and faster than POST, and can be used in most cases.

However, use the POST request in the following cases:

I, unable to use the cache file (update the file or database on the server)

II. Send a large amount of data to the server (POST has no data limit)

III. When sending user input with unknown characters, POST is more stable and more reliable than GET 3. XMLHttpRequest Server responds to onreadystatechange events

When a request is sent to the server, we need to perform some response-based tasks.

The onreadystatechange event is triggered whenever the readystate changes.

Xhr.onreadystatechange = function () {
			if (xhr.readystate = = 4) {
				if (xhr.status = =) {
					document.getElementById ("Span1"). InnerHTML = Xhr.responsetext;}}
		
		}

4. Send Request

Xhr.send (NULL);

Full Demo

	function Checkusername () {var username = document.getElementById ("username"). Value; var xhr = Createxmlhttp ();//Create XMLHttpRequest Object Xhr.open ("GET", "${pagecontext.request.contextpath}/user_
		Findbyname.action?time= "+new Date (). GetTime () +" &username= "+username,true); Xhr.onreadystatechange = function () {if (xhr.readystate = = 4) {if (Xhr.status = =) {document.getElementById
				("Span1"). InnerHTML = Xhr.responsetext; }}}xhr.onreadystatechange = function () {if (xhr.readystate = = 4) {if (Xhr.status = =) {DOCUMENT.G
				Etelementbyid ("Span1"). InnerHTML = Xhr.responsetext;
	}}} xhr.send (null);
		} function Createxmlhttp () {var xmlHttp; if (window. ActiveXObject)//for IE browser {try{xmlHttp = new ActiveXObject ("Microsoft.XMLHTTP" );//For IE high version} catch (e) {xmlHttp = new ActiveXObject ("Msxml2.xmlhttp"); For IE low version}}else if (window.  
        XMLHttpRequest) {//for non-ie browser xmlHttp = new XMLHttpRequest ();
	} return xmlHttp; }

SummaryDo not believe in memory, on the one hand is unfamiliar, on the one hand really will forget. In fact, when it comes to Ajax, there will be many problems, such as garbled, cross-domain problems, or in the follow-up of the actual practice in the summary. Next time in the face of the problem of async, I guess will not be afraid, or focus on proficiency, skills bar.