Web page front-end Interaction example

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.

</div>        <span id= "processing" ></span>//used to receive data back from the server    </body>
Next is the Text.js file
function test ()//Send client request {xmlhttp=getxmlhttpobject ();//Get XmlHttp Object if (xmlhttp==null) {alert ("brows Er does not the support HTTP Request ") return} var url=" test.php "//server spooler, at this time need and test.html files in the same folder, if not the same    folder, you need to add a relative path or an absolute path. url=url+ "? q=" +1;//the data sent to the background by the Web page.    Any data structure, such as numbers, strings, JSON format data, url=url+ "&sid=" +math.random ()//Add a random number as a suffix to ensure that each request is re-processed and corresponding to the background. xmlhttp.onreadystatechange=statechanged//Spooler callback function Xmlhttp.open ("Get", url,true)//Use GET mode to send Xmlhttp.send (NULL)// Send data. }function statechanged ()//monitoring Program callback function {if (xmlhttp.readystate==4 | | xmlhttp.readystate== "complete")// If the XmlHttp object successfully receives data {var Strjson = xmlhttp.responsetext;//Gets the data text//var state = new Function ("return" + St Rjson);//Use JSON format to parse var state = eval ("(" +strjson+ "));//the same function as the comment function above, using one can be document.getElementById ("Processing"). innerhtml=state.openstate;//Display Contents}}function getxmlhttpobject ()//Get XmlHttp object {var xmlHttp    =null; TrY {//Firefox, Opera 8.0+, Safari xmlhttp=new XMLHttpRequest (); } catch (E) {//Internet Explorer try {xmlhttp=new ActiveXObject ("Msxml2.xmlhttp")        ;        } catch (e) {xmlhttp=new ActiveXObject ("Microsoft.XMLHTTP"); }} return xmlHttp;}
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 = ""; function test ()//test program {    $json _string = file_get_contents (' State.json ');//Open a JSON file    $data = Json_decode ($json _string,true);//parse JSON file string    if ($data ["openstate"] = = ' close ')//manipulate JSON data    {        $ data1 = Array ();        $data 1[' openstate '] = ' open ';        $json _string1 = Json_encode ($data 1);        File_put_contents (' State.json ', $json _string1);    }        if ($data ["openstate"] = = ' open ')//manipulate the 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} $q =$_get["q"];//get data from reception This test procedure is 1switch ($q) {Case 1:    $hint = Test ();//execute 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