Comparez trois implémentations de l'analyse Ajax et JSON

Cet article vous présentera les trois implémentations d'ajax et des informations associées sur l'analyse json. Les amis intéressés par cet article peuvent s'y référer

Cet article compare principalement trois façons d'implémenter Ajax et fournit. un point de départ pour un apprentissage futur.

Préparation :

1. prototype.js
2 jquery1.3.2.min.js
3. >
Programme de traitement en arrière-plan (Servlet), chemin d'accès servlet/testAjax :

Code Java

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 reçoit deux paramètres : nom et âge, et renvoie une chaîne écrite au format JSON.

Interface de saisie des paramètres de la première page :

Code HTML

<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. Implémentation du prototype

Code HTML

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

Dans l'implémentation Ajax du prototype, utilisez la méthode evalJSON pour convertir la chaîne en objet JSON.

2. Implémentation de jquery

Code HTML

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

Je viens d'entrer en contact avec jQuery et j'ai utilisé json2.js pour traiter json. Je demande également conseil à mes aînés. .

3. Implémentation de XMLHttpRequest

Code HTML

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

ps : Trois façons de convertir des chaînes en JSONDans le processus de développement de projets utilisant Ajax, il est souvent nécessaire à La chaîne au format JSON est renvoyée au front-end et le front-end l'analyse dans un objet JS (JSON).

ECMA-262(E3) n'a pas écrit le concept JSON dans la norme, mais dans ECMA-262(E5), le concept de JSON a été officiellement introduit, y compris l'objet JSON global et la méthode Date toJSON.

1, analyse de la méthode d'évaluation, je crains que ce soit la première méthode d'analyse.

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

N'oubliez pas les parenthèses de part et d'autre de str.

2. Le nouveau formulaire Function est assez bizarre.

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

Dans IE6/7, lorsque la chaîne contient une nouvelle ligne (n), new Function ne peut pas l'analyser, mais eval le peut.

3, utilisez l'objet JSON global.

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

Actuellement, IE8(S)/Firefox3.5+/Chrome4/Safari4/Opera10 a implémenté cette méthode.

Lorsque vous utilisez JSON.parse, vous devez strictement respecter la spécification JSON. Par exemple, les attributs doivent être mis entre guillemets, comme suit

.

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

le nom est inutile. Entre guillemets, une exception est levée dans tous les navigateurs utilisant JSON.parse et l'analyse échoue. Les deux premières méthodes conviennent.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment résoudre le problème selon lequel une erreur apparaît toujours lorsque l'ajax renvoie la vérification

Résolvez-le manuellement via Ajax WordPress WP-PostViews ne compte pas le problème

Analyse Ajax et solutions aux raisons pour lesquelles les données obtenues en les mettant dans des graphiques ne sont pas affichées

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!