Home > Developer > Web Develop
For Web page development, The data interaction between the Web page and the server is very frequent and one of the most important things. But for a lot of beginners, this becomes an insurmountable difficult problem, this blog will be from a beginner's point of contact to explain one of the interactive way, this method through my validation is valid, and attached Code.
First to implement the Web page before and after the interaction needs to install the background framework, I installed the framework for Wamp (windows+apache+mysql+php). The installation program can be downloaded through my Share link on the Baidu Network disk http://pan.baidu.com/s/1cIKb8a extract code is CNFH. As for the configuration during installation, refer to the Http://wenku.baidu.com/link?url=eB_xVPpECufRgw2rrXptR_H8m8uT_ Pla1818sx7opxmbjdw36w-fyktthrev5ncanvjzfbcdtp2nwqqbt4dmvftgl7sbmjowog-uydmt90_ is no longer a continuation here.
After the framework is installed, you can do a simple web Development.
The first is a simple Web page code for TESTING.
<HTML> <Head> <Scriptsrc= "test.js"></Script>The test.js used is located under the same file path as this HTML code and requires a relative or absolute path if different paths are used<Metahttp-equiv= "content-type"content= "text/html; charset=utf-8"> </Head> <Body> <Div> <Buttontype= "button"ID= "s"onclick= "test ()">Test</Button>//create a button to upload data to the server
</div> <spanID= "processing"></span>//used to receive back data from server feedback </Body></HTML>
Next is the Text.js file
functionTest ()//sending a client request{xmlHttp=getxmlhttpobject ();//Get XMLHTTP Object if(xmlhttp==NULL) {alert ("Browser does not support HTTP Request") return } varUrl= "test.php"//server spooler, the need and test.html files in the same folder, if not in the same folder, you need to add a relative path or absolute path. url=url+ "q=" +1;//the data that the Web page sends back to the BACKGROUND. Can be any data structure, such as numbers, strings, JSON formats, etc.url=url+ "&sid=" +math.random ()//add a random number as a suffix to guarantee that each request will be re-processed and corresponding in the Background. Xmlhttp.onreadystatechange=statechanged//Background Handler callback functionXmlhttp.open ("GET", url,true)//send using Get modeXmlhttp.send (NULL)//Send Data. }functionStateChanged ()//Monitoring Program callback function{ if(xmlhttp.readystate==4 | | xmlhttp.readystate== "complete")//if the XMLHTTP object successfully receives the data { varStrjson = xmlhttp.responsetext;//Get Data text //var state = new Function ("return" + Strjson) ();//parse with JSON format varState = eval ("(" +strjson+ ")");//same function as the comment function above, use one todocument.getElementById ("processing"). innerhtml=state.openstate;//Show Content } }functionGetxmlhttpobject ()//Get XMLHTTP Object{ varxmlhttp=NULL; Try { //Firefox, Opera 8.0+, Safarixmlhttp=NewXMLHttpRequest (); } Catch(e) {//Internet Explorer Try{xmlHttp=NewActiveXObject ("msxml2.xmlhttp"); } Catch(e) {xmlHttp=NewActiveXObject ("microsoft.xmlhttp"); } } returnxmlHttp;}
finally, the test.php file, It should be noted that the test.php file must be placed in the installed Wamp framework to be effective, such as my framework installed on the e-drive, my test.php file needs to be placed in the E:\AppServ\www\ directory or subdirectories of the directory To be effective (before the problem has been stuck for a long time, PHP files do not cause the front end is not connected to the backend), the following is the PHP file code
<?PHP$hint= "";functionTest ()//Test Program{ $json _string=file_get_contents(' State.json ');//Open a JSON file $data= Json_decode ($json _string,true);//parsing json file strings if($data["openstate"] = = ' Close ')//working with JSON data { $data 1=Array(); $data 1[' openstate '] = ' open '; $json _string1= Json_encode ($data 1); file_put_contents(' State.json ',$json _string1); } if($data["openstate"] = = ' Open ')//working with JSON data { $data 1=Array(); $data 1[' openstate '] = ' Close '; $json _string1= Json_encode ($data 1); file_put_contents(' State.json ',$json _string1); } return $json _string;//Feedback Data}$q=$_get["q"];//get the data from the front Desk. this test program is 1Switch($q){ case1:$hint= Test ();//Execute the test function break;}$response=$hint;Echo $response;//feedback the processed data to the foreground?>
In addition to the PHP file mentioned in the State.json file, this file in the front and back of the interaction is not necessary, here is only to demonstrate a complete JSON format file read and write recognition operation process, State.json file only one sentence code
{"openstate": "close"}After writing the above code, you can test, you need to note that when you open the Web page can not directly drag the HTML file into the browser, but need to use localhost or 127.0.0.1来 access the HTML page to interact with php, for example, my files
Files are located under the E:\AppServ\www folder
The way I access the test.html file is to enter the URL in the browser http://localhost:8080/test.html
Where 8080 is the port number, which is set when the WAMP framework is installed, if you are using a different port number, modify it yourself, and if you are using the default port number 80, you can omit the port number.
The phenomenon that is displayed when running successfully is
(note content can be deleted by Itself)
Click the Test button
Shown below
It is visible from the server back-end PHP script to obtain the information successfully. Click again
The original close becomes open and the background script executes normally.
At this point, an example of a simple front-end asynchronous interaction is Complete.
you, Have you learned it?
Web page Front-End Interaction example
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
