The example of this article tells the native JS simple realization Ajax method. Share to everyone for your reference, specific as follows:
HTML section:
<body> <input type= "button" value= "Ajax Submit" onclick= "Ajax ();"/> <div id= "ResText" ></ Div> </body>
Here is an input button, click will trigger click event, click event Invoke Ajax () method.
JS section:
<script language= "javascript" type= "Text/javascript" >//via this function to asynchronously get information function Ajax () { var xmlhttpreq = null; Declares that an empty object is used to mount the XMLHttpRequest if window.
ActiveXObject) {//ie5 IE6 is the ActiveXObject way to introduce xmlhttprequest xmlhttpreq = new ActiveXObject ("Microsoft.XMLHTTP"); else if (window.
XMLHttpRequest) {///except IE5 IE6 browser XMLHttpRequest is a window's child object xmlhttpreq = new XMLHttpRequest ();//Instantiate a XMLHttpRequest} if (xmlhttpreq!= null) {//If the object is instantiated successfully xmlhttpreq.open ("Get", "test.php", true); Call the Open () method and Xmlhttpreq.onreadystatechange=requestcallback in an asynchronous manner; Sets the callback function xmlhttpreq.send (NULL); Because a Get method is committed, you can use the null parameter call} function Requestcallback () {//Once readyState value changes, this function will be called if (xmlhttpreq.readystate = 4) {if (Xmlhttpreq.status = 200) {//Assign Xmlhttpreq.responsetext value to element with ID ResText Document.getelem
Entbyid ("ResText"). InnerHTML = Xmlhttpreq.responsetext; {}}} </script> Ajax about four steps, creating Ajax objects, using the open () method to secretly run to the server to obtain data, the success of the corresponding processing. The argument to be submitted by the Get method is written to the URL parameter of the Open method, at which point the parameter of the Send method is null.
For example Get method:
var url = "Login.php?user=xxx&pwd=xxx";
Xmlhttprequest.open ("Get", url,true);
Xmlhttprequset.send (NULL);
For example, POST method:
Xmlhttprequest.open ("POST", "login.php", true);
Xmlhttprequest.setrequestheder ("Content-type", "Application/x-www-form-urlencoded;charset=utf-8");
Xmlhttprequest.send ("user=" +username+ "&pwd=" +password);
Setrequestheder is necessary if you need to pass parameters in send
It is necessary to note that according to the different submissions, the two types of submissions are called backstage Doget method and Dopost method processing respectively.
PHP section:
<?php echo "Hello ajax!"; ? >
After Ajax gets the data from PHP, it will secretly put the data into the corresponding div layer. This click event does not make the page refresh, secretly obtained the server side of the data, service-side data can also be read from the database, access to data, Ajax can also carry out some action processing.
Everything was silent.
More readers interested in JavaScript-related content can view this site: "JavaScript Ajax Operating Skills Summary", "JavaScript switching effects and techniques summary", "JavaScript Search Algorithm Skills summary", " JavaScript animation effects and tips Summary, "JavaScript Error and debugging skills Summary", "JavaScript data structure and algorithm skills summary", "JavaScript traversal algorithm and Skills summary" and "JavaScript Mathematical operation Usage Summary"
I hope this article will help you with JavaScript programming.
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
