ajax three implementation method instance code

ajax is asynchronous javascript and xml. This article introduces three implementation methods of ajax (prototype implementation, jquery implementation, XMLHttpRequest implementation) to code farmers.

This article will focus on comparing three ways to implement Ajax to get started.

Preparation:

1, prototype. js
2, jquery1. 3.2 min js
3, json2 js

Background handler (Servlet), access path servlet/testAjax:

Java code

package ajax.servlet; 
import java.io.IOException; 
import java.io.PrintWriter; 
import javax.servlet.ServletException; 
import javax.servlet.http.HttpServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
/** 
 * Ajax Example background handler  
 * @author bing 
 * @version 2011-07-07 
 * 
 */
public class TestAjaxServlet extends HttpServlet { 
 public void doGet(HttpServletRequest request, HttpServletResponse response) 
   throws ServletException, IOException { 
  response.setContentType("text/html;charset=utf-8"); 
  PrintWriter out = response.getWriter(); 
  String name = request.getParameter("name"); 
  String age = request.getParameter("age"); 
  System.out.println("{\"name\":\"" + name + "\",\"age\":\"" + age + "\"}"); 
  out.print("{\"name\":\"" + name + "\",\"age\":" + age + "}"); 
  out.flush(); 
  out.close(); 
 } 
 public void doPost(HttpServletRequest request, HttpServletResponse response) 
   throws ServletException, IOException { 
  doGet(request,response); 
 } 
}

TestAjaxServlet takes two arguments: name and age, and returns a string written in JSON format.

Front page parameter input interface:

Html code

<div id="show"> Display area </div> 
<div id="parameters"> 
 name:<input id="name" name="name" type="text" /><br /> 
 age:<input id="age" name="age" type="text" /><br /> 
</div>
 

1. prototype implementation

<script type="text/javascript" src="prototype.js"></script> 
 <script type="text/javascript"> 
  function prototypeAjax() 
  {   
  var url = "servlet/testAjax";// request URL 
  var params = Form.serialize("parameters");// Submitted form  
  var myAjax = new Ajax.Request( 
  url,{ 
   method:"post",//  Request way  
   parameters:params, //  parameter  
   onComplete:pressResponse, //  Response function  
   asynchronous:true
  }); 
  $("show").innerHTML = " In process ..."; 
  } 
  function pressResponse(request) 
  { 
  var obj = request.responseText; //  Receive as text  
  $("show").innerHTML = obj; 
  var objJson = request.responseText.evalJSON(); //  Parse the received text into Json format  
  $("show").innerHTML += "name=" + objJson['name'] + " age=" + objJson['age']; 
  } 
</script> 
<input id="submit" type="button" value=" submit " onclick="prototypeAjax()" /><br />

In the Ajax implementation of prototype, the evalJSON method is used to convert strings to JSON objects.

2. jquery implementation

<script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="json2.js"></script> 
<input id="submit" type="button" value=" submit " /><br /> 
<script type="text/javascript"> 
  function jqueryAjax()  
  {  
   var user={"name":"","age":""};  
   user.name= $("#name").val();  
   user.age=$("#age").val(); 
   var time = new Date();   
   $.ajax({  
     url: "servlet/testAjax?time="+time,  
     data: "name="+user.name+"&age="+user.age,  
     datatype: "json",// The data type returned by the requested page   
     type: "GET",  
     contentType: "application/json",// Notice the request page's contentType  Keep it here 1 to   
     success:function(data) {// Here, data Is the data returned by the requested page  
     var dataJson = JSON.parse(data); //  use json2.js In the parse Method will be data Converted to json format  
     $("#show").html("data=" + data + " name="+dataJson.name+" age=" + dataJson.age);  
     },  
     error: function(XMLHttpRequest, textStatus, errorThrown) {  
     $("#show").html("error"); 
     }  
   });  
  } 
  $("#submit").bind("click",jqueryAjax); //  Bind submit button  
 </script>

New contact with jQuery, es65EN2.ES66en on the processing of json. Also ask the seniors to give advice.

3. XMLHttpRequest implementation

<script type="text/javascript"> 
  var xmlhttp; 
  function XMLHttpRequestAjax() 
  { 
   //  To get the data  
   var name = document.getElementById("name").value; 
    var age = document.getElementById("age").value; 
   //  To obtain XMLHttpRequest object  
   if(window.XMLHttpRequest){ 
   xmlhttp = new XMLHttpRequest(); 
   }else if(window.ActiveXObject){ 
   var activxName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];  
   for(var i = 0 ; i < activexName.length; i++){ 
    try{ 
     xmlhttp = new ActiveXObject(activexName[i]); 
     break; 
    }catch(e){} 
   } 
   } 
    xmlhttp.onreadystatechange = callback; // The callback function  
    var time = new Date();//  in url Time is added to make each request no 1 sample  
    var url = "servlet/testAjax?name="+name+"&age="+age+"&time="+time; 
    xmlhttp.open("GET",url,true); //  In order to get Mode send request  
    xmlhttp.send(null); //  Parameters have been url , so there is no need to participate here  
  }  
  function callback(){  
   if(xmlhttp.readyState == 4){  
    if(xmlhttp.status == 200){ //  In response to success  
     var responseText = xmlhttp.responseText; //  Receive the response message as text  
     var userdiv = document.getElementById("show"); 
     var responseTextJson = JSON.parse(responseText); //  use json2.js In the parse Method will be data Converted to json format  
     userdiv.innerHTML=responseText + " name=" + responseTextJson.name + " age=" + responseTextJson.age; 
    } 
   }   
  } 
</script> 
<input id="submit" type="button" value=" submit " onclick="XMLHttpRequestAjax()" /><br />

Through this article, I hope to help you, thank you for your support to this site!