Home>

ajax is not a new programming language,It's a technique for creating better, faster, and more interactive web applications.With ajax, you can use javascript's xmlhttprequest object to communicate directly with the server.You can exchange data with the web server without reloading the page.In this example,We will demonstrate how a web page can communicate with a web server when a user enters data into a standard html form.

<! Doctype html public "-//w3c //dtd xhtml 1.0 transitional //en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
 <title>simple ajax request</title>
 <script type="text/javascript">
  var xmlhttp;
  //create xmlhttprequest object
  function createxmlhttprequest () {
   if (window.activexobject) {
    xmlhttp=new activexobject ("microsoft.xmlhttp");
   }
   else if (window.xmlhttprequest) {
    xmlhttp=new xmlhttprequest ();
   }
  }
  //Integrate url parameters
  function createquerystring () {
   var name=document.getelementbyid ("txtname"). value;
   var sex=document.getelementbyid ("txtsex"). value;
   var birthday=document.getelementbyid ("txtbirthday"). value;
   var querystring="name =" + encodeuricomponent (name) + "&sex =" + encodeuricomponent (sex) + "&birthday =" + encodeuricomponent (birthday);
   return querystring;
  }
  //Pass parameters according to get
  function dorequestusingget () {
   createxmlhttprequest ();
   var querystring="ajaxserver.ashx?";
   querystring=querystring + createquerystring () + "×tamp =" + new date (). gettime ();
   xmlhttp.onreadystatechange=handlestatechange;
   xmlhttp.open ("get", querystring, true);
   xmlhttp.send (null);
  }
  //Pass parameters by post
  function dorequestusingpost () {
   createxmlhttprequest ();
   var url="ajaxserver.ashx?timestamp =" + new date (). gettime ();
   var querystring=createquerystring ();
   xmlhttp.open ("post", url, true);
   xmlhttp.onreadystatechange=handlestatechange;
   xmlhttp.setrequestheader ("content-type", "application/x-www-form-urlencoded;");
   xmlhttp.send (querystring);
  }
  //Callback
  function handlestatechange () {
   if (xmlhttp.readystate == 4) {
    if (xmlhttp.status == 200) {
     parseresults ();
    }
   }
  }
  //Process server response content
  function parseresults () {
   var responsediv=document.getelementbyid ("serverresponse");
   if (responsediv.haschildnodes ()) {
    responsediv.removechild (responsediv.childnodes [0]);
   }
   var responsetext=document.createtextnode (xmlhttp.responsetext);
   responsediv.appendchild (responsetext);
  }
 </script>
</head>
<body>
 <form action="#">
 <h2>enter your name,Sex, birthday:</h2>
 <table>
  <tr><td>Name:</td><td><input type="text" /></td></tr>
  <tr><td>Gender:</td><td><input type="text" /></td></tr>
  <tr><td>Birthday:</td><td><input type="text" /></td>
  </tr>
 </table>
 <input type="button" value="Pass parameters with get method" onclick="dorequestusingget ();" />
 <br /><br />
 <input type="button" value="pass parameters by post" onclick="dorequestusingpost ();" />
 </form>
 <br />
 <h3>Server response content:</h3>
 <div></div>
</body>
</html>

The function of each js function is explained in detail below.

createxmlhttprequest ()Used to create the xmlhttprequest object.

Because ie implements xmlhttprequest as an activex object, other browsers (ff/safari/opera) implement it as a native javascript object. Because of these differences,JavaScript code must contain relevant logic.

createquerystring ()Used to organize the parameters,Arrange the parameters to be passed in the ajax request into a certain format.

If Chinese or non-ascii characters are passed, url encoding must be used. This example uses encodeuricomponent () function of js for parameter url encoding.

dorequestusingget ()Send a request to the server via http get,And pass parameters.

The open () method of the xmlhttprequest object specifies the request that will be made.The open () method takes three parameters:one is a string indicating the method used (usually get or post);one is a string representing the target resource url;one is a boolean value, just whether the request is asynchronous.

When the get request is made, the passed parameter is written to the url parameter of the open method. At this time, the parameter of the send method is null.

In some cases,Some browsers cache the results of multiple xmlhttprequest requests at the same URL. If the response to each request is different,This will bring bad results,By appending the current timestamp to the end of the URL, you can ensure the uniqueness of the URL,This prevents the browser from caching results.

The server-side code used in this example is asp.net (c#).

dorequestusingpost ()Send a request to the server via http post,And pass parameters.

Make sure that the method specified in open () is post, you need to set the content-type header information, and simulate a http post method to send a form,This way the server knows what to do with the uploaded content.You must call the open method before setting the header information.

Parameters must be passed using the send method.The parameter submission format is the same as the url in the get method.

handlestatechange ()ajax callback function.

For the xmlhttprequest object, the onreadystatechange property stores a pointer to the callback function.When the internal state of the xmlhttprequest object changes,This callback function will be called.

parseresults ()Process the response.

  • Previous Guide to using arrays in Swift programming
  • Next Example analysis of registrar pattern class usage in PHP