Compare three implementations of Ajax and JSON parsing-JS Tutorial-php.cn

This article will introduce you to the three implementations of ajax and related information on json parsing. Friends who are interested in this article can refer to it

This article mainly compares three ways to implement Ajax, and provides a starting point for future learning. .

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例子后台处理程序 
 * @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); 
  } 
}

Copy after login

TestAjaxServlet receives two parameters: name and age, and returns a string written in JSON format.

Front page parameter input interface:

Html code

<p id="show">显示区域</p> 
<p id="parameters"> 
  name:<input id="name" name="name" type="text" /><br /> 
  age:<input id="age" name="age" type="text" /><br /> 
</p>

Copy after login

1. Prototype implementation

##Html code

<script type="text/javascript" src="prototype.js"></script> 
  <script type="text/javascript"> 
    function prototypeAjax() 
    {     
    var url = "servlet/testAjax";//请求URL 
    var params = Form.serialize("parameters");//提交的表单 
   var myAjax = new Ajax.Request( 
    url,{ 
      method:"post",// 请求方式  
      parameters:params, // 参数 
      onComplete:pressResponse, // 响应函数 
      asynchronous:true 
    }); 
    $("show").innerHTML = "正在处理中..."; 
    } 
    function pressResponse(request) 
    { 
    var obj = request.responseText; // 以文本方式接收 
    $("show").innerHTML = obj; 
    var objJson = request.responseText.evalJSON(); // 将接收的文本用解析成Json格式 
    $("show").innerHTML += "name=" + objJson[&#39;name&#39;] + " age=" + objJson[&#39;age&#39;]; 
    } 
</script> 
<input id="submit" type="button" value="提交" onclick="prototypeAjax()" /><br />

Copy after login

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

##2. jquery implementation

Html code

<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="提交" /><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",//请求页面返回的数据类型   
         type: "GET",   
         contentType: "application/json",//注意请求页面的contentType 要于此处保持一致   
         success:function(data) {//这里的data是由请求页面返回的数据  
         var dataJson = JSON.parse(data); // 使用json2.js中的parse方法将data转换成json格式  
         $("#show").html("data=" + data + " name="+dataJson.name+" age=" + dataJson.age);   
         },   
         error: function(XMLHttpRequest, textStatus, errorThrown) {   
          $("#show").html("error"); 
         }   
      });   
    } 
    $("#submit").bind("click",jqueryAjax); // 绑定提交按钮 
 </script>

Copy after login

I just came into contact with jQuery and used json2.js to process json. I also ask my seniors for advice. .

##3. XMLHttpRequest implementation

Html code

<script type="text/javascript"> 
    var xmlhttp;  
    function XMLHttpRequestAjax()  
    { 
      // 获取数据 
     var name = document.getElementById("name").value;  
       var age = document.getElementById("age").value;  
     // 获取XMLHttpRequest对象 
     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; //回调函数 
       var time = new Date();// 在url后加上时间，使得每次请求不一样 
       var url = "servlet/testAjax?name="+name+"&age="+age+"&time="+time; 
       xmlhttp.open("GET",url,true); // 以get方式发送请求 
       xmlhttp.send(null);  // 参数已在url中，所以此处不需要参送 
    }    
    function callback(){   
      if(xmlhttp.readyState == 4){   
       if(xmlhttp.status == 200){ // 响应成功  
         var responseText = xmlhttp.responseText;  // 以文本方式接收响应信息 
         var userp = document.getElementById("show"); 
         var responseTextJson = JSON.parse(responseText); // 使用json2.js中的parse方法将data转换成json格式  
         userp.innerHTML=responseText + " name=" + responseTextJson.name + " age=" + responseTextJson.age; 
       } 
      }     
    } 
</script> 
<input id="submit" type="button" value="提交" onclick="XMLHttpRequestAjax()" /><br />

Copy after login

ps: Three ways to convert strings into JSON

During project development using Ajax, it is often necessary to convert JSON format into The string is returned to the front end, and the front end parses it into a JS object (JSON). ECMA-262(E3) did not write the JSON concept into the standard, but in ECMA-262(E5) the concept of JSON was officially introduced, including the global JSON object and the Date toJSON method.

1, eval method analysis, I am afraid this is the earliest analysis method.

function strToJson(str){
   var json = eval(&#39;(&#39; + str + &#39;)&#39;);
   return json;
}

Copy after login

Remember the parentheses on both sides of str.

2, the new Function form is quite weird.

function strToJson(str){
  var json = (new Function("return " + str))();
  return json;
}

Copy after login

In IE6/7, when the string contains a newline (\n), new Function cannot parse it, but eval can.

3, use the global JSON object.

function strToJson(str){
  return JSON.parse(str);
}

Copy after login

Currently IE8(S)/Firefox3.5/Chrome4/Safari4/Opera10 has implemented this method.

When using JSON.parse, you must strictly abide by the JSON specification. For example, attributes need to be enclosed in quotation marks, as follows

var str = &#39;{name:"jack"}&#39;;
var obj = JSON.parse(str); // --> parse error

Copy after login

name is not enclosed in quotation marks Now, when using JSON.parse, exceptions are thrown in all browsers and parsing fails. The first two methods are fine.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to solve the problem that error always pops up when ajax returns verification

Manual solution through Ajax WordPress WP-PostViews does not count the problem

##Analysis and solutions to the reasons why the data obtained by Ajax and put into echarts is not displayed

The above is the detailed content of Compare three implementations of Ajax and JSON parsing. For more information, please follow other related articles on the PHP Chinese website!