Trois méthodes d'implémentation Ajax et analyse AJAX JSON

Cette fois, je vais vous présenter trois méthodes d'implémentation Ajax et l'analyse AJAX de JSON. Quelles sont les précautions concernant les trois méthodes d'implémentation d'Ajax et l'analyse AJAX de JSON. Ce qui suit est un cas pratique, jetons un coup d'œil. .

Préparation :

1. prototype.js
2 jquery1.3.2.min.js
3. >Gestionnaire backend (Servlet), chemin d'accès servlet/testAjax :

Code Java

TestAjaxServlet reçoit deux paramètres : nom et âge, et en renvoie un

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); 
  } 
}

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. >Code HTML

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

<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['name'] + " age=" + objJson['age']; 
    } 
</script> 
<input id="submit" type="button" value="提交" onclick="prototypeAjax()" /><br />

2. Implémentation de jquery

Code HTML

Je viens d'entrer en contact avec jQuery. json est traité à l'aide de json2.js. Je demande également conseil à mes aînés. .

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

3. Implémentation de XMLHttpRequest

Code HTML

ps : Trois façons de convertir des chaînes en JSON

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

Lors du développement d'un projet utilisant Ajax, il est souvent nécessaire de renvoyer les chaînes au format JSON au front-end, et le front-end les analyse en Objets 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.

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

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

2, nouveau formulaire Fonction, assez bizarre.

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

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

3, utilisez l'objet JSON global.

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

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

le nom n'est pas mis entre guillemets. marques. Utilisez JSON.parse dans tous les navigateurs. Des exceptions sont levées et l'analyse échoue. Les deux premières méthodes conviennent.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

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

Lecture recommandée :

jQuery crée un effet d'accordéon translucide vertical

jquery implémente la fonction d'invite de la souris dans le menu de navigation

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!