ajax is asynchronous javascript and xml. This article introduces the three implementation methods of ajax (prototype implementation, jquery implementation, XMLHttpRequest implementation)
This article mainly compares three ways to implement Ajax, which will start with future learning.
Prepare:
1、
2、 jquery1.3.
3、
Background handler (Servlet), access path servlet/testAjax:
Java code
package ;
import ;
import ;
import ;
import ;
import ;
import ;
/**
* 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 {
("text/html;charset=utf-8");
PrintWriter out = ();
String name = ("name");
String age = ("age");
("{\"name\":\"" + name + "\",\"age\":\"" + age + "\"}");
("{\"name\":\"" + name + "\",\"age\":" + age + "}");
();
();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request,response);
}
}
TestAjaxServlet receives two parameters: name and age, and returns a string written in JSON format.
Front Desk Page Parameter Input Interface:
Html code
<div >Display area</div> <div > name:<input name="name" type="text" /><br /> age:<input name="age" type="text" /><br /> </div>
1. Prototype implementation
<script type="text/javascript" src=""></script>
<script type="text/javascript">
function prototypeAjax()
{
var url = "servlet/testAjax";//Request URL var params = ("parameters");//Submitted form var myAjax = new (
url,{
method:"post",// Request method parameters:params, // Parameters onComplete:pressResponse, // Response function asynchronous:true
});
$("show").innerHTML = "In progress...";
}
function pressResponse(request)
{
var obj = ; // Receive in text $("show").innerHTML = obj;
var objJson = (); // parse the received text into Json format $("show").innerHTML += "name=" + objJson['name'] + " age=" + objJson['age'];
}
</script>
<input type="button" value="submit" onclick="prototypeAjax()" /><br />
In the Ajax implementation of prototype, the string is converted into a JSON object using the evalJSON method.
2. jquery implementation
<script type="text/javascript" src="jquery-1.3."></script>
<script type="text/javascript" src=""></script>
<input type="button" value="submit" /><br />
<script type="text/javascript">
function jqueryAjax()
{
var user={"name":"","age":""};
= $("#name").val();
=$("#age").val();
var time = new Date();
$.ajax({
url: "servlet/testAjax?time="+time,
data: "name="++"&age="+,
datatype: "json",//The data type returned by the request page type: "GET",
contentType: "application/json",//Note that the contentType of the request page should be consistent here success:function(data) {//The data here is the data returned by the request page var dataJson = (data); // Use parse method to convert data to json format $("#show").html("data=" + data + " name="++" age=" + );
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$("#show").html("error");
}
});
}
$("#submit").bind("click",jqueryAjax); // Bind Submit Button </script>
I just came into contact with jQuery and took advantage of json processing. Please give me some advice.
3. XMLHttpRequest implementation
<script type="text/javascript">
var xmlhttp;
function XMLHttpRequestAjax()
{
// Get data var name = ("name").value;
var age = ("age").value;
// Get XMLHttpRequest object if(){
xmlhttp = new XMLHttpRequest();
}else if(){
var activxName = ["",""];
for(var i = 0 ; i < ; i++){
try{
xmlhttp = new ActiveXObject(activexName[i]);
break;
}catch(e){}
}
}
= callback; //Callback function var time = new Date();// Add time after the url, making each request different var url = "servlet/testAjax?name="+name+"&age="+age+"&time="+time;
("GET",url,true); // Send requests in get (null); // The parameters are already in the url, so there is no need to send the parameters here }
function callback(){
if( == 4){
if( == 200){ // Response successfully var responseText = ; // Receive response information in text var userdiv = ("show");
var responseTextJson = (responseText); // Use parse method to convert data to json format =responseText + " name=" + + " age=" + ;
}
}
}
</script>
<input type="button" value="submit" onclick="XMLHttpRequestAjax()" /><br />
Through this article, I hope it can help you. Thank you for your support for this website!