ajax 三种实现方法实例代码

ajax即异步的javascript and xml, 本文章向码农们介绍ajax的三种实现方法(prototype实现,jquery实现,XMLHttpRequest实现)

本文主要是比较三种实现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实现

 
  

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

二、jquery实现

 
 

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

三、XMLHttpRequest实现

 

通过此文,希望能帮助到大家,谢谢大家对本站的支持!

你可能感兴趣的:(ajax 三种实现方法实例代码)