Home > Developer > Web Develop
Ajax, introductory example tutorial
This example for the PHP page, did a small demo to deepen the understanding of Ajax
1. Document Structure:
There are 2 pages of ajax.php and action.php.
2. The source code is as follows:
/*ajax.php Page */
<!DOCTYPE HTML> <HTMLLang= "en"> <Head> <title>Ajax</title> <Scripttype= "Text/javascript">functionLoadxmldoc () {varXMLHTTP;varQ=document.getElementById ("Q"). value;/* gets the value of input with ID Q * /if(window. XMLHttpRequest) {XMLHTTP=NewXMLHttpRequest ();//instantiating an Ajax object }Else { //For ie5,6 compatible ie5,6XMLHTTP=NewActiveXObject ("Microsoft.XMLHTTP"); } /**/Xmlhttp.onreadystatechange=function()//This function is called whenever the ReadyState property is changed { if(Xmlhttp.readystate==4 &&Xmlhttp.status== $) {document.getElementById ("mydiv"). InnerHTML=Xmlhttp.responsetext; }}xmlhttp.open ("GET","action.php?q="+Q,true); Xmlhttp.send (); }</Script> </Head> <Body> <DivID= "Mydiv"><H2>Let AJAX change this text</H2></Div> <Div> <formAction= "action.php" > <P>123</P> <inputtype= "text"name= "Q"ID= "Q"/><inputtype= "button"onclick= "Loadxmldoc ()"value= "Submit"/> </form> </Div> </Body> </HTML>
/*action.php Page */
<? php $value =$_get[' q ']; echo $value; ?>
Run as follows:
Enter Hello and run the result as follows:
You can see that the contents of the first line are replaced by the input content, but the contents of input still exist, and the page is only partially refreshed.
Thanks for watching!
PHP page Get method implementation Ajax, introductory example tutorial
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
