AJAX is "Asynchronous Javascript And XML" (Asynchronous JavaScript And XML ).
My personal understanding: ajax means refreshing the new commit and getting the returned content.
If the content of a traditional webpage that does not use ajax needs to be updated (or when php is used for processing), the entire webpage page must be reloaded.
Example:
The html code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> Ajax example </title>
<Style>
# LoginForm {
Border-collapse: collapse;
}
# LoginForm, # loginForm td {
Border: #550 1px solid;
Text-align: center;
}
</Style>
</Head>
<Body>
<Table id = "loginForm">
<Tr>
<Td> user name: </td>
<Td> <input type = "text" id = "userName"/> </td>
</Tr>
<Tr>
<Td> Password: </td>
<Td> <input type = "password" id = "password"/> </td>
</Tr>
<Tr>
<Td colspan = 2> <input id = "submitBtn" type = "submit" value = "ajax submit"/> </td>
</Tr>
</Table>
<Script type = "text/javascript" language = "javascript">
Document. getElementById ('submitbtn '). addEventListener ('click', clickSubmit );
Function clickSubmit (){
MakeRequest ('./test. Php ');
}
Var req = false;
/**
* Create an ajax request
* Php location of the url processing request
*/
Function makeRequest (url ){
Req = false;
// Create an XMLHTPP instance
If (window. XMLHttpRequest) {// objects above ie9 and w3c browsers
Req = new XMLHttpRequest ();
If (req. overrideMimeType ){
// Some Mozilla browsers may not work properly if the server's response does not contain the XML mime-type header.
// To solve this problem, if the server response header is not text/xml, you can call other methods to modify the header.
Req. overrideMimeType ('text/XML ');
}
} Else if (window. ActiveXObject) {// dedicated for IE678
Try {
Req = new ActiveXObject ("Microsoft. XMLHTTP ");
} Catch (e ){
Alert ('New window. ActiveXObject () failed! ');
}
}
If (! Req ){
Alert ('giving up :( Cannot create an XMLHTTP instance ');
Return false;
}
// Specify the JavaScript function name for processing the response.
Req. onreadystatechange = alertContents;
// Test the transfer user name and password
Var user_name = document. getElementById ('Username'). value;
Var user_pwd = document. getElementById ('password'). value;
// Open (request method, accurate domain name, asynchronous or not );
// GET or POST
// ---- GET request ------
// Req. open ('GET', url + '? User_name = '+ user_name +' & user_pwd = '+ user_pwd, true );
// Req. send (null );
// ---- POST request ------
// Send a request. If open is POST, you can send a string to the server, or add get transmission to the second parameter of open.
/// Req. open ('post', url + '? Get1 = '+ user_name +' & get2 = '+ user_pwd, true );
Req. open ('post', url, true );
Req. setRequestHeader ("Content-type", "application/x-www-form-urlencoded ");
Req. send ('User _ name = '+ user_name +' & user_pwd = '+ user_pwd );
}
/**
* Callback handler for ajax requests
*/
Function alertContents (){
If (req. readyState = 4 ){
Console. log (req. status );
If (req. status = 200 ){
Alert (req. response );
} Else {
Alert ('There was a problem with the request .');
}
}
}
</Script>
</Body>
</Html>
./Test. php code:
<? Phpheader ('content-type: text/html; charset = utf-8 ');
Var_dump ($ _ POST );
// Obtain the data var_dump ($ _ GET) passed by post );
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
