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. vue搭建骨架屏步骤配置

    1．什么是骨架屏幕? 在页面加载数据之前,有一段空白时间,要么用loading加载,要么就用骨架屏. 在开发webapp的时候总是会受到首屏加载时间过长的影响,主流的解决方法是在载入完成之前显示loa ...

  2. Android商城开发系列（六）——使用 OkHttpUtils 请求网络 + 使用 fastjson解析数据

    OkHttp是Google推荐使用的一个开源的网络请求框架,Android开发中涉及到网络请求和接口调用现在大部分都是使用OkHttp,网上已经有不少人针对OkHttp进行了封装,这里推荐一下鸿洋大神 ...

  3. 2017年团体程序设计天梯赛 - 大区赛 L3-3

    题意:有向图找哈密顿回路 比赛的时候剪枝只剪了vis 状压没剪对 反而只拿17分... 比赛结束后还去看了一发这个NP问题的QB(快速回溯法...但是对于本题好像大材小用...) 上网看了一个神犇的写 ...

  4. PWD简介与妙用(一个免费、随时可用的Docker实验室)

    转载自 https://baiyue.one/archives/472.html 本文介绍下 PWD 的历史,并依据本站最近学习心得,经过多次尝试,终于打通了 Docker 与常规宝塔面板搭建,因此, ...

  5. Html5的等学习

    看了w3c感觉是说明文档,没有详细的说明,然后就去看其他的 html5其实就是在html的基础上做了一些改变,感觉html5的推广还是需要时间的,因为习惯问题,虽然html5有很多很方便的标签如art ...

  6. SQL数据库中各种字段类型的说明

    (1)char.varchar.text和nchar.nvarchar.ntext     char和varchar的长度都在1到8000之间,它们的区别在于char是定长字符数据,而varchar是 ...

  7. linux 安装并且设置环境lua环境变量

    在lua官网下载lua安装包并安装: http://www.lua.org/download.html 解压编译: wget http://www.lua.org/ftp/lua-5.3.2.tar. ...

  8. cocos2d-x中解决暂停并保存画面和开始的功能

    1.调用所有对象的pauseSchedulerAndActions().太麻烦,不太现实,而且有很多对象不易获取. 2.CCDirector::sharedirector()->pause(). ...

  9. Angular-constructor和ngOnInit区别

    参考文档:https://blog.csdn.net/u010730126/article/details/64486997 总结:constructor做依赖注入,避免业务操作: ngOninit做 ...

  10. 896. Monotonic Array

    An array is monotonic if it is either monotone increasing or monotone decreasing. An array A is mono ...