主页 > 编程资料 > Javascript >
发布时间:2016-01-01 作者:网络 阅读:226次

本文主要是比较三种实现Ajax的方式,为以后的学习开个头。

准备:

1、  prototype.js
2、  jquery1.3.2.min.js
3、  json2.js

后台处理程序(Servlet),访问路径servlet/testAjax:

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接收两个参数:name和age,并返回一个以JSON格式编写的字符串。

前台页面参数输入界面:

Html代码 

显示区域<> name:
age:
<>

一、prototype实现

Html代码


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

二、jquery实现

Html代码 


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

三、XMLHttpRequest实现

Html代码 


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所有浏览器中均抛异常,解析失败。而前两种方式则没问题。

关键字词:AJAX相关