1. ajax (asynchronouse javascript and xml) asynchronous commit crip and xml
2, (including 7 technologies: javascript xml xstl dom xhtml css xmlhttpRequest)
3. It is a technology unrelated to the server language and can be used in (php/jsp/asp.net)
4. How ajax works: Create an ajax engine-> send data to the server-> receive data through the callback function-> assign data to the specified page
The following is the registration verification case register. Php is the registration page. RegisterProcess. php is used to receive data and return data.
Register. php
Copy codeThe Code is as follows:
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN">
<Html>
<Head>
<Title> User Registration </title>
<! -- Tell the browser not to cache -->
<Meta http-equiv = "pragma" content = "no-cache">
<Meta http-equiv = "cache-control" content = "no-cache">
<Meta http-equiv = "expires" content = "0">
<Meta http-equiv = "keywords" content = "keyword1, keyword2, keyword3">
<Meta http-equiv = "description" content = "This is my page">
<Meta http-equiv = "content-type" content = "text/html; charset = UTF-8"/>
<! --
<Link rel = "stylesheet" type = "text/css" href = "styles.css">
-->
<Script type = "text/javascript">
<! --
Function sendRequest (){
// Create an ajax Engine
Var xmlHttpRequest;
// Different browsers use different methods to obtain xmlRequest objects
If (window. ActiveXObject ){
XmlHttpRequest = new ActiveXObject ("MMMMMictofrt ");
} Else {
XmlHttpRequest = new XMLHttpRequest ();
}
Return xmlHttpRequest;
}
Var myXmlHttpRequest
Function checkName (){
MyXmlHttpRequest = sendRequest ();
If (myXmlHttpRequest ){
// Window. alert ("created successfully ");
// The first parameter indicates the Request Method get. post. The second parameter specifies the url to which the ajax request is sent
// If the data submitted in get mode does not change, the browser will directly extract the data from the cache.
Var url = "/ajax_yhyz/registerProcess. php? Username = getValue ('username'). value ";
// 1. In this way, you can not extract data from the cache.
// Var url = "/ajax_yhyz/registerProcess. php? Mytime = 'new Date () '& username = getValue ('username'). value ";
// 2, <meta http-equiv = "pragma" content = "no-cache"> tell the browser not to cache
// Window. alert (url); used to test whether the url is successful
// The third parameter true indicates the asynchronous mechanism.
MyXmlHttpRequest. open ("get", url, true );
// Specify the callback function. chul is the function name, indicating that the function is called if the status changes. There are four statuses.
MyXmlHttpRequest. onreadystatechange = chuli;
// Send the request. If it is a get request, enter null.
// Fill in the actual data if it is a post request
MyXmlHttpRequest. send (null );
}
}
Function chuli (){
// Window. alert ("handler callback ");
If (myXmlHttpRequest. readyState = 4 ){
// Window. alert ("server return" + myXmlHttpRequest. responseText );
GetValue ("myres"). value = myXmlHttpRequest. responseText;
}
}
Function getValue (id ){
// Return document. getElementById (id). value; in this case, local refresh cannot be completed.
Return document. getElementById (id );
}
-->
</Script>
</Head>
<Body>
<Form action = "??? "Method =" post ">
Username: <input type = "text" name = "username1" id = "username"> <input type = "button" onclick = "checkName () "value =" verify User Name ">
<Input type = "text" id = "myres"/>
<Br/>
User password: <input type = "password" name = "password"> <br>
Email: <input type = "text" name = "email"> <br/>
<Input type = "submit" value = "User Registration">
</Form>
<Form action = "??? "Method =" post ">
Username: <input type = "text" name = "username2">
<Br/>
User password: <input type = "password" name = "password"> <br>
Email: <input type = "text" name = "email"> <br/>
<Input type = "submit" value = "User Registration">
</Form>
</Body>
</Html>
RegiseterProcess. php
Copy codeThe Code is as follows:
<? Php
$ Username = $ _ REQUEST ['username'];
If ($ username = "shunping "){
Echo "err ";
} Else {
Echo "OK ";
}
?>
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
