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

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

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

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

首先新建一个数据层：

package com.bean;

public class Dog {

    private String name;

    public String getName() {

        return name;

    }

    public void setName(String name) {

        this.name = name;

    }

    public int getAge() {

        return age;

    }

    public void setAge(int age) {

        this.age = age;

    }

    public String getCategory() {

        return category;

    }

    public void setCategory(String category) {

        this.category = category;

    }

    private int age;

    private String category;

}

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

package com.servlet;

import java.io.IOException;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import com.bean.Dog;

/**

 * Servlet implementation class Testajax1

 */

@WebServlet("/testajax1")

public class Testajax1 extends HttpServlet {

    private static final long serialVersionUID = 1L;

    /**

     * @see HttpServlet#HttpServlet()

     */

    public Testajax1() {

        super();

        // TODO Auto-generated constructor stub

    }

    /**

     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        // TODO Auto-generated method stub

        //response.getWriter().append("Served at: ").append(request.getContextPath());

        request.setCharacterEncoding("utf-8");

        response.setCharacterEncoding("utf-8");

        Dog d = new Dog();

        d.setName("小白");

        d.setAge(3);

        d.setCategory("土狗");

        response.getWriter().append("<?xml version='1.0'?>");

        response.getWriter().append("<pet>");

        response.getWriter().append("<name>"+d.getName()+"</name>");

        response.getWriter().append("<name>"+d.getAge()+"</name>");

        response.getWriter().append("<name>"+d.getCategory()+"</name>");

        response.getWriter().append("</pet>");

    }

    /**

     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        // TODO Auto-generated method stub

        doGet(request, response);

    }

}

新建jsp页面实现ajax：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"

    pageEncoding="ISO-8859-1"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>Insert title here</title>

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

    $("#d1").click(function(){

        $.ajax({

            url:"testajax1",

            data:{},

            type:"POST",

            dataType:"XML",

            success:function(httpdata){

                var n = $(httpdata).find("name").text();

                var a = $(httpdata).find("age").text();

                var c = $(httpdata).find("category").text();

                $("#d2").append("<p>"+n+"</p>");

                $("#d2").append("<p>"+a+"</p>");

                $("#d2").append("<p>"+c+"</p>");

            }

        });

    });

});

</script>

</head>

<body>

<div id="d1">aaaa</div>

<div id="d2"></div>

</body>

</html>

效果如下：

取数组或集合时：

package com.servlet;

import java.io.IOException;

import java.util.ArrayList;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import com.bean.Dog;

/**

 * Servlet implementation class Testajax2

 */

@WebServlet("/testajax2")

public class Testajax2 extends HttpServlet {

    private static final long serialVersionUID = 1L;

    /**

     * @see HttpServlet#HttpServlet()

     */

    public Testajax2() {

        super();

        // TODO Auto-generated constructor stub

    }

    /**

     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        // TODO Auto-generated method stub

        //response.getWriter().append("Served at: ").append(request.getContextPath());

        request.setCharacterEncoding("utf-8");

        response.setCharacterEncoding("utf-8");

        Dog d1 = new Dog();

        d1.setName("狗1");

        d1.setAge(1);

        d1.setCategory("品种1");

        Dog d2 = new Dog();

        d2.setName("狗2");

        d2.setAge(2);

        d2.setCategory("品种2");

        Dog d3 = new Dog();

        d3.setName("狗3");

        d3.setAge(3);

        d3.setCategory("品种3");

        ArrayList<Dog> list = new ArrayList<Dog>();

        list.add(d1);

        list.add(d2);

        list.add(d3);

        response.getWriter().append("<?xml version='1.0'?>");

        response.getWriter().append("<pet>");

        for(Dog d:list){

            response.getWriter().append("<dog name='"+d.getName()+"'>");

            response.getWriter().append("<age>"+d.getAge()+"</age>");

            response.getWriter().append("<category>"+d.getCategory()+"</category>");

            response.getWriter().append("</dog>");

        }

        response.getWriter().append("</pet>");

    }

    /**

     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        // TODO Auto-generated method stub

        doGet(request, response);

    }

}
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"

    pageEncoding="ISO-8859-1"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>Insert title here</title>

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

    $("#d1").click(function(){

        $.ajax({

            url:"testajax2",

            data:{},

            type:"POST",

            dataType:"XML",

            success:function(httpdata){

                var dogs = $(httpdata).find("dog");

                for(var i=0;i<dogs.length;i++){

                    var n =$(dogs).eq(i).attr("name");

                    var a =$(dogs).eq(i).find("age").text();

                    var c =$(dogs).eq(i).find("category").text();

                    var tr ="<tr>";

                    tr+="<td>"+n+"</td>";

                    tr+="<td>"+a+"</td>";

                    tr+="<td>"+c+"</td>";

                    tr+="</tr>";

                    $("#tb").append(tr);

                }

            }

        });

    });

});

</script>

</head>

<body>

<div id="d1">11111</div>

<table id="tb" width="100%" cellpadding="5" cellspacing='1' border="0">

</table>

</body>

</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. db2新添用户

    --1.新添用户  -目录 /XX/XX  -组  XX 用户名useradd -d /home/xx -g users xx--2.修改密码passwd xx--3.在QC中grant权限.新添表空 ...

  2. 使用nginx搭建一个简单的负载均衡

    在windows系统上使用IIS模拟出两个不同服务器的站点: 然后再NGINX使用轮询机制配置两个服务器以及虚拟服务器的端口: 需要注意的是,配置虚拟代理域名的话需要找到windowsC盘下的host ...

  3. codeforce Gym 100570B ShortestPath Query （最短路SPFA）

    题意:询问单源最短路径,每条边有一个颜色,要求路径上相邻边的颜色不能相同,无重边且边权为正. 题解:因为路径的合法性和边的颜色有关, 所以在做spfa的时候,把边丢到队列中去,松弛的时候注意判断一下颜 ...

  4. oracle 快速复制一张表，并在此创建索引，日志及并行度

    复制表结构及其数据 create table table_name_new as select * from table_name_old 只复制表结构 create table table_name ...

  5. Linux运维笔记--第一部

                                 CentOS 学习总结                                                             ...

  6. iOS 通过storyboard设置UIView或者其他layer图层的圆角

    通常我们给Button或者UIView添加圆角是通过如下代码进行实现的 self.button.layer.cornerRadius=10; 但是如果你是使用的故事版或者xib进行设计视图的话,实际上 ...

  7. C#经典面试题——递归运算

    今天开始写递归,然而始终不得甚解.借鉴别人的理解:假设我们现在都不知道什么是递归,我们自然想到打开浏览器,输入到谷歌的网页,我们点击搜索递归,然后我们在为维基百科中了解到了递归的基本定义,在了解到了递 ...

  8. NOIP模拟赛 机器人

    [题目描述] 早苗入手了最新的Gundam模型.最新款自然有着与以往不同的功能,那就是它能够自动行走,厉害吧. 早苗的新模型可以按照输入的命令进行移动,命令包括‘E’.‘S’.‘W’.‘N’四种,分别 ...

  9. 面试：如何把xxx.sh使用/etc/init.d/xxx.sh start启动，并且可以用chkconfig配置开机自启动

    chkconfig原理: 1.脚本放到/etc/init.d下面,并且可执行(/etc/init.d/sshd) 需要被chkconfig管理,需要添加进去chkconfig  --add  sshd ...

  10. phpExcel使用方法一

    include 'PHPExcel.php'; include 'PHPExcel/Writer/Excel2007.php'; //或者include 'PHPExcel/Writer/Excel5 ...