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. npm在linux即mac下更新时报错

    nam在linux即mac下需要更新到新版本:

  2. python解析xml实例

    如下,一个银行卡打标签后导出的数据 <?xml version="1.0" encoding="ISO-8859-1"?> <annotati ...

  3. FiraCode 字体 => 箭头函数变成 整体 还有 等于 不等于

    https://github.com/tonsky/FiraCode Enable in Settings → Editor → Color Scheme → Color Scheme Font →  ...

  4. websocket+订阅发布者模式模拟实现股票价格实时刷新

    1.新建文件夹 2.文件夹中新建index.html 和 index.js index.html <!DOCTYPE html> <html lang="en"& ...

  5. appium---常用的adb命令

    在测试android-app的时候,adb命令可以帮助我们解决许多问题 什么是adb Android Debug Bridge,我们一般简称为adb,主要存放在sdk安装目录下的platform-to ...

  6. 拨出网线后，网卡IP丢失

    /etc/network/interfaces与NetworkManager 问题:在Centos7上把网线拨出后,发现网卡状态是down,并且网卡上的IP丢失 原因:此网卡被NetworkManag ...

  7. Caesars Cipher-freecodecamp算法题目

    Caesars Cipher(凯撒密码.移位密码) 要求 字母会按照指定的数量来做移位. 一个常见的案例就是ROT13密码,字母会移位13个位置.由'A' ↔ 'N', 'B' ↔ 'O',以此类推. ...

  8. 【线段树合并】bzoj3545: [ONTAK2010]Peaks

    1A还行 Description 在Bytemountains有N座山峰,每座山峰有他的高度h_i.有些山峰之间有双向道路相连,共M条路径,每条路径有一个困难值,这个值越大表示越难走,现在有Q组询问, ...

  9. 【离线 线段树分治】bzoj4025: 二分图

    昨天mac的gdb挂了,今天怎么笔记本的gdb也挂了…… Description 神犇有一个n个节点的图.因为神犇是神犇,所以在T时间内一些边会出现后消失.神犇要求出每一时间段内这个图是否是二分图.这 ...

  10. php curl使用例子

    PHP支持的由Daniel Stenberg创建的libcurl库允许你与各种的服务器使用各种类型的协议进行连接和通讯.libcurl目前支持http.https.ftp.gopher.telnet. ...