AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

　　AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

　　AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

　　传递对象时，可以分为传输单个对象或者值，还有传递数组或集合。

首先新建一个数据层：

  1. package com.bean;
  2.  
  3. public class Dog {
  4.     private String name;
  5.     public String getName() {
  6.         return name;
  7.     }
  8.     public void setName(String name) {
  9.         this.name = name;
  10.     }
  11.     public int getAge() {
  12.         return age;
  13.     }
  14.     public void setAge(int age) {
  15.         this.age = age;
  16.     }
  17.     public String getCategory() {
  18.         return category;
  19.     }
  20.     public void setCategory(String category) {
  21.         this.category = category;
  22.     }
  23.     private int age;
  24.     private String category;
  25. }

新建一个servlet进行页面功能实现：

  1. package com.servlet;
  2.  
  3. import java.io.IOException;
  4. import javax.servlet.ServletException;
  5. import javax.servlet.annotation.WebServlet;
  6. import javax.servlet.http.HttpServlet;
  7. import javax.servlet.http.HttpServletRequest;
  8. import javax.servlet.http.HttpServletResponse;
  9.  
  10. import com.bean.Dog;
  11.  
  12. /**
  13.  * Servlet implementation class Testajax1
  14.  */
  15. @WebServlet("/testajax1")
  16. public class Testajax1 extends HttpServlet {
  17.     private static final long serialVersionUID = 1L;
  18.  
  19.     /**
  20.      * @see HttpServlet#HttpServlet()
  21.      */
  22.     public Testajax1() {
  23.         super();
  24.         // TODO Auto-generated constructor stub
  25.     }
  26.  
  27.     /**
  28.      * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
  29.      */
  30.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  31.         // TODO Auto-generated method stub
  32.         //response.getWriter().append("Served at: ").append(request.getContextPath());
  33.         request.setCharacterEncoding("utf-8");
  34.         response.setCharacterEncoding("utf-8");
  35.         Dog d = new Dog();
  36.         d.setName("小白");
  37.         d.setAge(3);
  38.         d.setCategory("土狗");
  39.  
  40.         response.getWriter().append("<?xml version='1.0'?>");
  41.         response.getWriter().append("<pet>");
  42.         response.getWriter().append("<name>"+d.getName()+"</name>");
  43.         response.getWriter().append("<name>"+d.getAge()+"</name>");
  44.         response.getWriter().append("<name>"+d.getCategory()+"</name>");
  45.         response.getWriter().append("</pet>");
  46.  
  47.     }
  48.  
  49.     /**
  50.      * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
  51.      */
  52.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  53.         // TODO Auto-generated method stub
  54.         doGet(request, response);
  55.     }
  56.  
  57. }

新建jsp页面实现ajax：

  1. <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
  2.     pageEncoding="ISO-8859-1"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  7. <title>Insert title here</title>
  8. <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
  9. <script type="text/javascript">
  10. $(document).ready(function(){
  11.     $("#d1").click(function(){
  12.         $.ajax({
  13.             url:"testajax1",
  14.             data:{},
  15.             type:"POST",
  16.             dataType:"XML",
  17.             success:function(httpdata){
  18.                 var n = $(httpdata).find("name").text();
  19.                 var a = $(httpdata).find("age").text();
  20.                 var c = $(httpdata).find("category").text();
  21.  
  22.                 $("#d2").append("<p>"+n+"</p>");
  23.                 $("#d2").append("<p>"+a+"</p>");
  24.                 $("#d2").append("<p>"+c+"</p>");
  25.             }
  26.         });
  27.     });
  28.  
  29. });
  30.  
  31. </script>
  32. </head>
  33. <body>
  34. <div id="d1">aaaa</div>
  35. <div id="d2"></div>
  36. </body>
  37. </html>

效果如下：

取数组或集合时：

  1. package com.servlet;
  2.  
  3. import java.io.IOException;
  4. import java.util.ArrayList;
  5.  
  6. import javax.servlet.ServletException;
  7. import javax.servlet.annotation.WebServlet;
  8. import javax.servlet.http.HttpServlet;
  9. import javax.servlet.http.HttpServletRequest;
  10. import javax.servlet.http.HttpServletResponse;
  11.  
  12. import com.bean.Dog;
  13.  
  14. /**
  15.  * Servlet implementation class Testajax2
  16.  */
  17. @WebServlet("/testajax2")
  18. public class Testajax2 extends HttpServlet {
  19.     private static final long serialVersionUID = 1L;
  20.  
  21.     /**
  22.      * @see HttpServlet#HttpServlet()
  23.      */
  24.     public Testajax2() {
  25.         super();
  26.         // TODO Auto-generated constructor stub
  27.     }
  28.  
  29.     /**
  30.      * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
  31.      */
  32.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  33.         // TODO Auto-generated method stub
  34.         //response.getWriter().append("Served at: ").append(request.getContextPath());
  35.         request.setCharacterEncoding("utf-8");
  36.         response.setCharacterEncoding("utf-8");
  37.         Dog d1 = new Dog();
  38.         d1.setName("狗1");
  39.         d1.setAge(1);
  40.         d1.setCategory("品种1");
  41.         Dog d2 = new Dog();
  42.         d2.setName("狗2");
  43.         d2.setAge(2);
  44.         d2.setCategory("品种2");
  45.         Dog d3 = new Dog();
  46.         d3.setName("狗3");
  47.         d3.setAge(3);
  48.         d3.setCategory("品种3");
  49.  
  50.         ArrayList<Dog> list = new ArrayList<Dog>();
  51.         list.add(d1);
  52.         list.add(d2);
  53.         list.add(d3);
  54.  
  55.         response.getWriter().append("<?xml version='1.0'?>");
  56.         response.getWriter().append("<pet>");
  57.  
  58.         for(Dog d:list){
  59.             response.getWriter().append("<dog name='"+d.getName()+"'>");
  60.  
  61.             response.getWriter().append("<age>"+d.getAge()+"</age>");
  62.             response.getWriter().append("<category>"+d.getCategory()+"</category>");
  63.             response.getWriter().append("</dog>");
  64.         }
  65.  
  66.         response.getWriter().append("</pet>");
  67.  
  68.     }
  69.  
  70.     /**
  71.      * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
  72.      */
  73.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  74.         // TODO Auto-generated method stub
  75.         doGet(request, response);
  76.     }
  77.  
  78. }
  1. <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
  2.     pageEncoding="ISO-8859-1"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  7. <title>Insert title here</title>
  8. <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
  9. <script type="text/javascript">
  10. $(document).ready(function(){
  11.     $("#d1").click(function(){
  12.  
  13.         $.ajax({
  14.             url:"testajax2",
  15.             data:{},
  16.             type:"POST",
  17.             dataType:"XML",
  18.             success:function(httpdata){
  19.                 var dogs = $(httpdata).find("dog");
  20.                 for(var i=0;i<dogs.length;i++){
  21.                     var n =$(dogs).eq(i).attr("name");
  22.                     var a =$(dogs).eq(i).find("age").text();
  23.                     var c =$(dogs).eq(i).find("category").text();
  24.  
  25.                     var tr ="<tr>";
  26.                     tr+="<td>"+n+"</td>";
  27.                     tr+="<td>"+a+"</td>";
  28.                     tr+="<td>"+c+"</td>";
  29.                     tr+="</tr>";
  30.                     $("#tb").append(tr);
  31.                 }
  32.  
  33.             }
  34.         });
  35.     });
  36. });
  37. </script>
  38. </head>
  39. <body>
  40. <div id="d1">11111</div>
  41. <table id="tb" width="100%" cellpadding="5" cellspacing='1' border="0">
  42. </table>
  43. </body>
  44. </html>

效果如下：

利用ajax实现数据传输的更多相关文章

  1. nodejs利用ajax实现网页无刷新上传图片

    nodejs利用ajax实现网页无刷新上传图片 标签(空格分隔): nodejs 通常情况下上传图片是要通过提交form表单来实现的,但是这又不可避免的产生了网页转. 利用ajax技术和FormDat ...

  2. asp.net mvc3 利用Ajax实现局部刷新

    1.利用Ajax.ActionLink()方法 首先在_Layout.cshtml文件中加载 运行AJAX必要的Jquery <script src="@Url.Content(&qu ...

  3. [前端引用] 利用ajax实现类似php include require 等命令的功能

    利用ajax实现类似php中的include.require等命令的功能 最新文件下载: https://github.com/myfancy/ajaxInclude 建议去这里阅读readme-2. ...

  4. 利用Ajax把前端的数据封装成JSON格式发送到服务器端并写成XML格式在服务器的硬盘上

    1.首先要在前端把要发送的东西(这里是一个实例化的car对象)都准备好,利用Ajax发送到服务器端,代码如下: <html xmlns="http://www.w3.org/1999/ ...

  5. Jquery利用ajax调用asp.net webservice的各种数据类型(总结篇)

    原文:Jquery利用ajax调用asp.net webservice的各种数据类型(总结篇) 老话说的好:好记心不如烂笔头! 本着这原则,我把最近工作中遇到的jquery利用ajax调用web服务的 ...

  6. C# 利用ajax实现局部刷新

    C#所有runat="server"的控件都会造成整个界面的刷新,如果想实现局部刷新,可以利用ajax. 需要加入的控件有ScriptManager和UpdatePanel,可以实 ...

  7. Struts2.5 利用Ajax将json数据传值到JSP

    AJAX +JSON=>JSP AJAX AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着 ...

  8. js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面

    js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 , 做手机端开发时,发现一个问题,有些浏览器,在网速比较慢的情况下,js文件没有加载完,后续的调用已经开始调用了, ...

  9. 利用Ajax和JSON实现关于查找省市名称的二级联动功能

    功能实现的思路:我们经常碰见网上购物时候填写收件地址会用到这个查找省市县的三级联动查找功能,我们可以利用Ajax和JSON技术模拟这个功能,说白了同样是使用Ajax的局部数据更新功能这个特性.因为省市 ...

随机推荐

  1. 对卷积(convolution)的理解

    参考文章 https://www.jianshu.com/p/daaaeb718aed https://blog.csdn.net/bitcarmanlee/article/details/54729 ...

  2. Distributed Transaction Coordinator(DTC)一些问题的解决方法

    有时运行某个程序或者安装SQL Server时报错. 错误信息: 事务管理器不可用.(从 HRESULT 异常: 0x8004D01B) 启动服务Distributed Transaction Coo ...

  3. CentOS 软RAID5

    yum install -y mdadm np1回车 tfdw mdadm --create /dev/md5 --level=5 --raid-devices=3 /dev/sdb1 /dev/sd ...

  4. python 遍历list

    #!/usr/bin/env python# -*- coding: utf-8 -*-if __name__ == '__main__':    list = ['html', 'js', 'css ...

  5. mysq--索引模块

    问题:为什么要 使用索引? --->快速查询数据,但是仅仅这么回答,就是不专业的!!! 应该要分为数据量少的时候,不适用索引,走全表扫描的话,查询速率也是很快的 数据量大的话,使用索引,查询速率 ...

  6. db2的定时备份

    定时任务: db2.bat db2cmd -i -w db2_backup.bat exit db2_backup.bat db2 connect to TEST db2 force applicat ...

  7. Object-C知识点 (五) NSObject的继承关系

    这篇文章主要介绍常用的继承自NSObject的类,方便朋友们查看和面试前查看使用!!! 结构图: 更多内容--> 博客导航 每周一篇哟!!! 有任何关于iOS开发的问题!欢迎下方留言!!!或者邮 ...

  8. 201621123080《Java程序设计》第三周学习总结

    Week03-面向对象入门 1. 本周学习总结 2. 书面作业 1.以面向对象方式改造数据结构作业'有理数'(重点) 1.1 截图你主要代码(需要在程序中出现你的学号和姓名)并粘贴程序的git地址. ...

  9. zabbix3.2安装手册

    Alexei Vladishev创建了Zabbix项目,当前处于活跃开发状态,Zabbix SIA提供支持. Zabbix是一个企业级的.开源的.分布式的监控套件 Zabbix可以监控网络和服务的监控 ...

  10. IE浏览器缓存问题解决方法（非常严重）

    IE浏览器缓存问题解决方法整理 一.IE浏览器缓存的内容分析: IE浏览器会缓存网页中的GET和XHR的内容,并且在IE浏览器中如果请求方式是get方式的话,IE浏览器会进行识别,如果该get请求的u ...