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. servlet的重定向和作用域

    <?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://w ...

  2. codeforce Gym 100685F Flood (topo排序)

    如果直接模拟水向周围流会TLE,因为某些个结点被重复扩展了多次, 科学做法是topo排序,每次只把入度为0的点放入队列,这样就严格保证了每个结点只被扩展一次. #include<bits/std ...

  3. 剑指offer55 字符流中第一个不重复的字符(最典型错误)

    典型并且基础的错误: class Solution { public: //Insert one char from stringstream void Insert(char ch) { ) res ...

  4. Java中的List接口特有的方法

    import java.util.ArrayList; import java.util.List; /* List接口中特有方法: 添加 add(int index, E element) addA ...

  5. mysql grant 用户权限说明

    mysql grant 用户权限说明 Mysql 有多个个权限?经常记不住,今天总结一下,看后都能牢牢的记在心里啦!! 很明显总共28个权限:下面是具体的权限介绍:转载的,记录一下: 一．权限表 my ...

  6. Vue和MVVM对应关系

    Vue和MVVM的对应关系 Vue是受MVVM启发的,那么有哪些相同之处呢?以及对应关系? MVVM(Model-view-viewmodel) MVVM还有一种模式model-view-binder ...

  7. NOIP模拟赛 水灾

    大雨应经下了几天雨,却还是没有停的样子.土豪CCY刚从外地赚完1e元回来,知道不久除了自己别墅,其他的地方都将会被洪水淹没. CCY所在的城市可以用一个N*M(N,M<=50)的地图表示,地图上 ...

  8. 【上下界网络流 费用流】bzoj2055: 80人环游世界

    EK费用流居然写错了…… Description     想必大家都看过成龙大哥的<80天环游世界>,里面的紧张刺激的打斗场面一定给你留下了深刻的印象.现在就有这么     一个80人的团 ...

  9. Linux网络配置指令

    版权声明:本文为博主原创文章,未经博主允许不得转载. 原文地址: https://www.cnblogs.com/poterliu/p/6686799.html 重启网卡service network ...

  10. django开发之model篇-Field类型讲解

    今天介绍一下django开发中,定义模型时用到的相关字段类型和字段选项. 先说说常用的字段类型:1) AutoField: 自增字段类型,当自定义自增类型的id时,可以使用此类型:2) BigAuto ...