Vergleichen Sie drei Implementierungen der Ajax- und JSON-Analyse

Dieser Artikel stellt Ihnen die drei Implementierungen von Ajax und verwandte Informationen zum JSON-Parsen vor. Freunde, die sich für diesen Artikel interessieren, können darauf verweisen.

In diesem Artikel werden hauptsächlich drei Möglichkeiten zur Implementierung von Ajax verglichen und bereitgestellt ein Ausgangspunkt für zukünftiges Lernen.

Vorbereitung:

1. jquery1.3.2.min.js
3. json2.js

Hintergrundverarbeitungsprogramm (Servlet), Zugriffspfad 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); 
  } 
}

TestAjaxServlet empfängt zwei Parameter: Name und Alter und gibt eine im JSON-Format geschriebene Zeichenfolge zurück.

Eingabeschnittstelle für Parameter auf der Startseite:

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>

1. Prototyp-Implementierung

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 />

im Prototyp In Bei der Ajax-Implementierung wird die evalJSON-Methode zum Konvertieren von Zeichenfolgen in JSON-Objekte verwendet.

2. JQuery-Implementierung

Html-Code

rrree

Ich bin neu bei jQuery und habe json2.js verwendet, um JSON zu verarbeiten. Ich bitte auch meine Vorgesetzten um Rat. .

3. XMLHttpRequest-Implementierung

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>

ps: Drei Möglichkeiten, Strings in JSON zu konvertieren

Während der Projektentwicklung mit Ajax ist es oft notwendig, das JSON-Format zu konvertieren Die Zeichenfolge wird an das Frontend zurückgegeben und vom Frontend in ein JS-Objekt (JSON) analysiert.

ECMA-262(E3) hat das JSON-Konzept nicht in den Standard geschrieben, aber in ECMA-262(E5) wurde das Konzept von JSON offiziell eingeführt, einschließlich des globalen JSON-Objekts und der Date toJSON-Methode.

1, Bewertungsmethodenanalyse, ich fürchte, dies ist die früheste Analysemethode.

<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 />

Denken Sie an die Klammern auf beiden Seiten von str.

2. Die neue Funktionsform ist ziemlich seltsam.

function strToJson(str){
   var json = eval('(' + str + ')');
   return json;
}

Wenn in IE6/7 die Zeichenfolge eine neue Zeile (n) enthält, kann die neue Funktion sie nicht analysieren, eval jedoch.

3, verwenden Sie das globale JSON-Objekt.

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

Derzeit hat IE8(S)/Firefox3.5+/Chrome4/Safari4/Opera10 diese Methode implementiert.

Bei der Verwendung von JSON.parse müssen die JSON-Spezifikationen strikt eingehalten werden. Beispielsweise müssen Attribute wie folgt in Anführungszeichen gesetzt werden

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

Der Name steht nicht in Anführungszeichen. Bei der Verwendung von JSON.parse werden nun in allen Browsern Ausnahmen ausgelöst und die Analyse schlägt fehl. Die ersten beiden Methoden sind in Ordnung.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So lösen Sie das Problem, dass immer ein Fehler auftritt, wenn Ajax eine Bestätigung zurückgibt

Manuell lösen durch Ajax WordPress WP-PostViews zählt das Problem nicht

Ajax-Analyse und Lösungen für die Gründe, warum die durch Einfügen in Echarts erhaltenen Daten nicht angezeigt werden

Das obige ist der detaillierte Inhalt vonVergleichen Sie drei Implementierungen der Ajax- und JSON-Analyse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!