1,ajax (asynchronouse JavaScript and XML) asynchronous Javascrip and XML
2 (contains 7 techniques: JavaScript XML XSTL dom xhtml css XMLHttpRequest)
3 is a server language-independent technology that can be used in (php/jsp/asp.net)
How
4,ajax works: Create an AJAX engine-> send data to the server--"receive data through a callback function---" Assign the data to the specified page
the Registration verification case register below. PHP is the registration page. Registerprocess.php is used to receive data and return data
register.php
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
<html>
<head>
<title> User Registration </title>
<!--told 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 are 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 get XMLRequest object method is not the same
if (window. ActiveXObject) {
XMLHttpRequest = new ActiveXObject ("Mmmmmictofrt");
}else{
XMLHttpRequest = new XMLHttpRequest ();
}
return XMLHttpRequest;
}
var myxmlhttprequest
function CheckName () {
myxmlhttprequest = SendRequest ();
if (myxmlhttprequest) {
//window.alert ("create success");
The first parameter represents the request method Get.post. The second parameter specifies the URL and the page to which the AJAX request is sent
///Get-way data submitted by the browser will be extracted directly from the cache if it has not changed
var url = "/ajax_yhyz/registerprocess.php?" Username=getvalue (' username '). Value ";
//1, so you can not extract the
from the cache
//var url = "/ajax_yhyz/registerprocess.php?" Mytime= ' new Date () ' & Username=getvalue (' username '). Value ";
//2,<meta http-equiv= "pragma" content= "No-cache" > told browsers not to cache
//window.alert (URL); Used to test whether the URL was successful
//Third parameter ture represents an asynchronous mechanism
Myxmlhttprequest.open ("Get", url,true);
//Specifies the callback function, Chul is the function name, which means that if the state changes, the function is called, and there are four states
myxmlhttprequest.onreadystatechange = Chuli;
//Send the request, if it is a GET request then fill in null
//Amount if it is a POST request, fill in the actual data
myxmlhttprequest.send (NULL);
}
}
function Chuli () {
//window.alert ("handler function is callback");
if (myxmlhttprequest.readystate = = 4) {
Window.alert ("Server Return" +myxmlhttprequest.responsetext);
getValue ("Myres"). Value = Myxmlhttprequest.responsetext;
}
}
function GetValue (ID) {
//return document.getElementById (ID). value; There's no way to do this. Local refresh
return document.getElementById (ID);
}
-->
</script>
</head>
<body>
<form action= "???" method= "post" >
User name: <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>
e-mail: <input type= "text" name= "email" ><br/>
<input type= "Submit" value= "User Registration" >
</form>
<form action= "???" method= "post" >
User name: <input type= "text" name= "username2" >
<br/>
user password: <input type= "password" name= "password" ><br>
e-mail: <input type= "text" name= "email" ><br/>
<input type= "Submit" value= "User Registration" >
</form>
</body>
</html>
regiseterprocess.php
Copy Code code as follows:
<?php
$username =$_request[' username '];
if ($username = = "Shunping") {
echo "Err";
}else{
echo "OK";
}
?>
