Before you start, say the online, most of the blog about this aspect or something else, on my own feelings, the first is not detailed, the second language can not be very good for beginners to understand.
The title of my blog is used three sentences, is to facilitate other people to find good;
What is the use of the method described here? Using it, you can refresh the page without flash, and get the data feedback from the database to the real-time changes back to the interface, show it! isn't it cool, indeed.
Not much nonsense, to speak, please note the comments of my code, inside detailed said!
PHP files connected to the foreground connection:
1<! DOCTYPE HTML Public"-//w3c//dtd HTML 4.01 transitional//en">234<script>5 varxmlHttp;6 //Create a XMLHttpRequest object7 8 //The following will create objects for different browsers, as well as the effect of two if statements9 /*Ten in firefox,opera,safiar,ie7.0,ie8.0 (I know that the Window object has this property One Browser, window is a property of XMLHttpRequest, and ie6.0,5.5 is not, A IE6.0 or 5.5 is not this attribute, use Window.activexobject instead. - */ - function Createxmlhttpobject () the { - if(window. XMLHttpRequest) - { -XmlHttp =NewXMLHttpRequest ();//Creating Objects +}Else if(window. ActiveXObject) - { +XmlHttp =NewActiveXObject ("Microsoft.XMLHTTP");//Creating Objects A } at returnXmlHttp;//created successfully, returned - } - -function Send ()//This function is used to connect with the server file in the background, it can be asp,php, I use PHP to explain - { -XmlHttp = Createxmlhttpobject ();//call the Create object function above in - varURL ="33.php";//here is the URL variable, used to store you, you want to connect the file path, I am relatively simple here because 33.php and I this PHP in the same directory to + if(xmlHttp)//interpretation, if the object is not empty, enter the following - { theXmlhttp.onreadystatechange =callback; * /*Register the callback function name, which can be seen as a function call, onReadyStateChange is a property of XMLHttpRequest to detect the current state $ when the state changes, the function is triggered, all, if only the function name is required, do not add parentheses*/Panax Notoginseng - //The following open function, as the name implies, opens, used to connect the URL file above you the //To set connection information: + //First parameter: Indicates how HTTP is requested, primarily using get and post A //second parameter: The URL address that represents the request, and the Get method request parameter is also in the URL the //The third parameter: Indicates whether the interaction is synchronous or asynchronous, and true indicates asynchronous interaction +Xmlhttp.open ("GET"Urltrue); - $ //The following send function, which is the method of the object itself, is not defined here as send, it is used to send commands, send what, open command $ //send data, start interacting with server side - //synchronous mode, the Send statement executes after the server returns data - //asynchronously, the Send statement executes immediately theXmlhttp.send (NULL); -}Else{WuyiAlert"error, please try again! "); the return; - } Wu } - About $ - //The callback function, which is the function you just defined, is used to get the information returned from the server file, ASP or PHP or other - function callback () - { A varMInt =2;//move the pixel, this part is used to verify the + var_obj = document.getElementById ("pic"); the var_text = document.getElementById ("TextView"); - var_x =parseint (_obj.style.left); $ var_y =parseint (_obj.style.top); the /*if (_x < mInt) the _y-= mInt; the else if (_y > MInt) the _x-= mInt;*/ -_obj.style.left = _x +"px"; in_obj.style.top = _y +"px"; the //determining the state of an object is interactive completion the if(Xmlhttp.readystate = =4) About //here is the state judge has 0~4, Baidu a lot of detailed, 4 representative, connected and obtained data the { the //determine if the HTTP interaction is successful the if(xmlhttp.status== $) + { - //get the data returned by the server side the varxmldoc =Xmlhttp.responsexml;Bayi //here, the returned data is stored in XML format into the variable. the //There is also a return type returned as a string, responsetext, this can be output by subscript method, but note that the output is a character, the //that is, a string you want will be split into several - - //Here's the getElementsByTagName ("Time") [0].childnodes[0].nodevalue; it's a way to output data individually using the the //getElementsByTagName ("") is written here is the name of the tag in your linked file, and so on, [0] is also to write the //. Childnodes[0].nodevalue; This piece is also a pass-through, meaning to get the value the_x = Xmldoc.getelementsbytagname (" Time")[0].childnodes[0].nodevalue; the_y = Xmldoc.getelementsbytagname ("inch")[0].childnodes[0].nodevalue; -_text.innerhtml ="_x="+ _x +", _y"+_y; the the}Else{ the alert (xmlhttp.statustext);94 } the } the } the 98 function Refresh () About { - 101SetInterval ("Send ()", -);//timed refresh, loop call, above the Send function. , with a time interval of 0.1 seconds. 102 103 } 104</script> the106<body onload="Refresh ()">//Call here107<div id='pic'style='position:absolute;left:380px;top:200px;'>' the'height=' the'Src='C:\Users\Administrator.PC--20130918KZN\Desktop\9.png'/><font id="TextView"></font></div>108 109 the</body>111PHP connected in the background:
1<?PHP2 Header(' Content-type:text/xml ');3 Header("Cache-control:no-cache, Must-revalidate");4 //The above two sentences are PHP document Content-type is set to "Text/xml", PHP document is set to "No-cache" to prevent the cache5 $time=Date(' Y-m-d h:i:s ', Time());6 7 $information= "XXXX";8 9 Ten Echo' <?xml version= ' 1.0 "encoding=" iso-8859-1 "?><person>";//there must be, no words, nothing to lose. One Echo"<time>".$time. "</time>"; A //here the <time> </time> tag is just (""), inside to fill in, through this way, respectively output, get different values, the same - Echo"<in>".$information. "</in>"; - Echo"</person>";//complete a pair with the person above the - -?>
Since I was tested by the output system time, after the test was successful, I saw the time.
How to connect to the MySQL database with Ajax and get the data returned from it. Ajax gets the data returned from MySQL. Responsexml the method of outputting different data separately.