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. C#中静态成员和实例变量

    昨天晚上看静态成员和实例变量的时候,看到这样的一句话:默认情况下,若成员被定义为实例变量,这就意味着类需要为每个实例都建立一个副本,而在定义一个静态变量的时候,只存在此成员的一个副本. 呵呵,今天跟前 ...

  2. 地址栏传值 JS取值方法

    function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&] ...

  3. python 之format字符串格式化

    print函数之format字符串格式化方法的使用与学习笔记. 一.映射关系 (1)“映射”示例,以下通过位置举例说明: [+]Example_1: >>> print(" ...

  4. OpenGL小试牛刀第一季

    效果截图:代码展示:using System;using System.Collections.Generic;using System.ComponentModel;using System.Dat ...

  5. python 基础之while无限循环

    用户登录程序 username = "chenxi" passwed = "testki" counter = 0 while counter < 3: ...

  6. SQLSTATE=42000 #42000

    在使用PowerDesigner生成数据库表的时候遇到了这个问题. 原来是在填写属性的类型的时候, 少了两个括号, 造成了mysql数据类型错误 本来应该是varchar(50)的,写成了varcha ...

  7. 万恶之源 Python

    学IT真他妈难受 从早上起来坐到晚上 一天对着电脑啪啪啪

  8. python - 日期处理模块

    首先就是模块的调用,很多IDE都已经安装好了很多Python经常使用到的模块,所以我们暂时不需要安装模块了. ? 1 2 3 import datetime import time import ca ...

  9. redis入门指南书中概要

    一.简介 1.redis是一个开源的.高性能的.基于键值对的缓存和存储系统,通过提供多种键值数据类型适应不同场景下的缓存和存储需求,同时redis高级功能能胜任消息队列.任务队列等不同角色. 2.内存 ...

  10. 课下作业04-2String的使用方法

    1.动手动脑之String.equals()方法public class StringEquals { public static void main(String[] args) { String ...