Methods in the Ajax engine object:
Abort () Stop the current request
getAllResponseHeaders () returns the complete headers as a string
getResponseHeader ("Headerlabel") returns a single header label as a string
Open ("Method", "URL" [, asyncflag[, "UserName" [, "Password"]]) establishes a call to the server. The method parameter can be a GET, post, or Put,url parameter can be a relative URL or an absolute URL
Send (content) sends a request to the server
setRequestHeader ("header", "value") sets the specified header to the supplied value and must call open () before any header is set.
Properties in the Aaja engine object
onReadyStateChange event triggers with state changes
ReadyState Object State (integer)
0= uninitialized 1= Read 2 = read 3= interaction 4 = complete
ResponseText The server process returns a text version of the data
Responsexml a compatible DOM XML Document object that returns data to the server process
Status code returned by the status server, such as: 404 = "File not found", 200 = "Success"
StatusText status text information returned by the server
How to use AJAX to request a server using AJAX engine
Look at the picture
Flexible browsers
Ajax interaction
OK, let's take a look at the example below. Today, share an example of "using AJAX technology to detect the existence of a username."
Use AJAX technology to detect the existence of the user name is the principle flow chart:
Screenshot of final result:
| The code is as follows | Copy Code |
| <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/> <title>ajax Detection User name </title> <script type= "Text/javascript" src= "Ajax.js" ></script> <body> <form name= "MyForm" > User name: <input type= "text" name= "user" onblur= "checkname ();" > <span id= "checkbox" ></span> </form> </body> |
|
① implementation of the core code of this function in Ajax.js, the need to introduce additional
② name the form, because we need to use JS to get value in the input box.
③ adds a "onblur" event to the input box that triggers the event when "Focus" is lost (that is, the "trigger control" of the flowchart)
④<span id= "checkbox" ></span> used to place data sent back from the server (that is, "username already exists", etc.)
| The code is as follows | Copy Code |
| <?php mysql_connect ("localhost", ' root ', '); mysql_select_db (' Test '); $sql = "SELECT * FROM Ajax where Name= ' $_get[id] '"; $query =mysql_query ($sql); if (Is_array (Mysql_fetch_array ($query)) { echo "<font color=red> user name already exists </font>"; }else{ echo "<font color=green> user name can use </font>"; } ?> |
|
Code Explanation:
By using the Ajax open method, the user enters "user name" via ID to pass in (i.e. $_get[id]), and the specified database table is queried for the existence of the user name
| The code is as follows | Copy Code |
| //JavaScript Document var XHR;//define a Global object function createxhr () {//First we have to create a XMLHttpRequest object if window. ActiveXObject) {//ie of the lower version of the class Xhr=new activexobject (' microsoft.xmlhttp '); ie monopolized the entire browser market, did not follow the standard, so the code ... But IE6 began to improve after the }else if window. XMLHttpRequest) {//Non IE series browsers, but includes IE7 IE8 xhr=new XMLHttpRequest (); } Function CheckName () { var username=document.myform.user.value; Createxhr (); Xhr.open ("Get", "checkname.php?id=" +username,true);//true: An asynchronous transfer, and the unequal Send () method returns the result, which is the core idea of Ajax xhr.onreadystatechange=byhongfei;//when the state changes, call Byhongfei This method, the content of the method we define another Xhr.send (null); Function Byhongfei () { if (xhr.readystate = = 4) {//About methods and properties in Ajax engine objects, if (Xhr.status =) { var texthtml= Xhr.responsetext; document.getElementById (' checkbox '). innerhtml=texthtml; } } } |
|
Using AJAX to monitor the existence of a mailbox, we can also use AJAX real-time monitoring user input password intensity, at this point, you need to use the onblur event can be changed to onfocus event.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
