比较Ajax的三种实现及JSON解析

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

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

<script type="text/javascript" src="/UploadFiles/2021-04-02/prototype.js">

在prototype的Ajax实现中，用evalJSON方法将字符串转换成JSON对象。


二、jquery实现
Html代码  


<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.3.2.min.js">

刚接触jQuery,在json的处理上借助了json2.js。还请前辈们指教。。


三、XMLHttpRequest实现
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+"&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 userdiv = document.getElementById("show"); 
         var responseTextJson = JSON.parse(responseText); // 使用json2.js中的parse方法将data转换成json格式  
         userdiv.innerHTML=responseText + " name=" + responseTextJson.name + " age=" + responseTextJson.age; 
       } 
      }     
    } 
</script> 
<input id="submit" type="button" value="提交" onclick="XMLHttpRequestAjax()" /><br /> 


ps:字符串转换成JSON的三种方式
采用Ajax的项目开发过程中，经常需要将JSON格式的字符串返回到前端，前端解析成JS对象（JSON ）。

ECMA-262(E3) 中没有将JSON概念写到标准中，但在 ECMA-262(E5) 中JSON的概念被正式引入了，包括全局的JSON对象和Date的toJSON方法。
1，eval方式解析，恐怕这是最早的解析方式了。


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


记得str两旁的小括号哦。


2，new Function形式，比较怪异哦。


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


IE6/7中当字符串中含有换行（\n）时，new Function不能解析，但eval却可以。


3，使用全局的JSON对象。


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


目前IE8(S)/Firefox3.5+/Chrome4/Safari4/Opera10 已实现了该方法。
使用JSON.parse需严格遵守JSON规范，如属性都需用引号引起来，如下


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


name没有用引号引起来，使用JSON.parse所有浏览器中均抛异常，解析失败。而前两种方式则没问题。