JQuery中的Ajax

　　　　  jQuery 对 Ajax 操作进行了封装,

　　　　在 jQuery 中最底层的方法是 $.ajax(),

　　　　第二层是 load(), $.get() 和 $.post(), （常用）

　　　　第三层是 $.getScript() 和 $.getJSON()

　　更详尽的介绍请参见API

　　什么是回调函数：

　　这里先引用知乎网友对回调的生动形容，后续概念不再赘述回调函数概念

　　　　你到一个商店买东西，刚好你要的东西没有货，于是你在店员那里留下了你的电话，
　　　　过了几天店里有货了，店员就打了你的电话，然后你接到电话后就到店里去取了货。
　　　　在这个例子里，你的电话号码就叫回调函数，
　　　　你把电话留给店员就叫登记回调函数，
　　　　店里后来有货了叫做触发了回调关联的事件，
　　　　店员给你打电话叫做调用回调函数，
　　　　你到店里去取货叫做响应回调事件。
　　链接：https://www.zhihu.com/question/19801131/answer/13005983
　　相对正式专业的回答参见：http://www.jb51.net/article/54750.htm
 
　　先来看底层的$.ajax()方法：
 
　　　　此方法只接收一个参数，参数可能的键值对参见：http://www.runoob.com/jquery/ajax-ajax.html
　　看实例：
<span style="font-size:18px;">          // 删除

                $.ajax({

                    type : "POST",  //提交方式

                    url : "${pageContext.request.contextPath}/org/doDelete.action",//路径

                    data : {

                        "org.id" : "${org.id}"

                    },//数据，这里使用的是Json格式进行传输

                    success : function(result) {//返回数据根据结果进行相应的处理

                        if ( result.success ) {

                            $("#tipMsg").text("删除数据成功");

                            tree.deleteItem("${org.id}", true);

                        } else {

                            $("#tipMsg").text("删除数据失败");

                        }

                    }

                });

</span>

　  data：传输的数据，主要方式有三种，html拼接的，json数组，form表单经serialize()序列化（见SSM-CRUD实例）的；通过dataType指定，不指定智能判断

　这里可以参见网友的：http://www.cnblogs.com/my-effort/p/6307303.html

　　【更新】：ajax的其他属性设置请参见文档：http://tool.oschina.net/apidocs/apidoc?api=jquery

　　例如async属性：

　　　　　　ajax是异步的，不会阻塞后续代码执行，你要阻塞就改为同步的，这些都是底层的知识，所以要先学底层

$.ajax({

　　　　async:false,

           　 type: 'POST'

　　　　...
　　　$.load()方法

　　　　load() 方法是 jQuery 中最为简单和常用的 Ajax 方法, 能载入远程的 HTML 代码并插入到 DOM 中.

　　　　它的结构是: load(url[, data][,callback])

　　　　程序员只需要使用 jQuery 选择器为 HTML 片段指定目标位置, 然后将要加载的文件的 url 做为参数传递给 load() 方法即可

　　testload.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>My JSP 'index.jsp' starting page</title>

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

    <script type="text/javascript">

    $(function(){

        $("a").click(function(){

            //使用load方法处理ajax

            var url=this.href;

            var args={"time":new Date()};

            $("#content").load(url,args);

            return false;

            });

    });

    </script>

  </head>

  <body>

    <a href="helloAjax.txt">hello ajax</a>

    <div id="content"></div>

  </body>

</html>

　　任何一个HTML结点都可以使用load()方法来加载ajax，结点直接插入到html中

　　 $.get() 和 $.post()方法 

　　　　$.get() 方法使用 GET 方式来进行异步请求.

　　　　它的结构是: $.get(url[, data][, callback][, type]);

　　　　$.get() 方法的回调函数只有两个参数: data 代表返回的内容, 可以是 XML 文档, JSON 文件, HTML 片段等;

　　　　textstatus 代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种.

　　　　注意type若自动填写了会严格强制按照指定类型执行，一般的Jquery的ajax是智能判断的

　　　　$.get() 和 $.post() 方法时 jQuery 中的全局函数, 而 load() 等方法都是对 jQuery 对象进行操作的方法，两个方法类同，不再赘述

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>My JSP 'index.jsp' starting page</title>

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

  <script type="text/javascript">

      $(function(){

        $("a").click(function(){

            var url=this.href;

            var args={"time":new Date()};

            $.get(url,args,function(data){

                var name=$(data).find("name").text();

                var email=$(data).find("email").text();

                var website=$(data).find("website").text();

                $("#details").empty()

                        .append("<h2><a href='mailto:"+email+"'>"+name+"</a></h2>")

                        .append("<a href='"+website+"'>"+website+"</a>");

                });

            return false;

        });

      })

  </script>

  </head>

  <body>

    <h1>People</h1>

    <ul>

        <li><a href="files/andy.xml">Andy</a></li>

           <li><a href="files/richard.xml">Richard</a></li>

           <li><a href="files/jeremy.xml">Jeremy</a></li>

    </ul>

    <div id="details"></div>

  </body>

</html>

　//其中的function是回调函数，当响应结束时，回调函数被触发，响应结果在data中

　　testgetJSON 测试JSON数据格式

　　注：

　　　　"{result:{\"success\":\"true\",\"meg\":\"success\"}}"
　　　　"{\"success\":true,\"mesg\":\"success\"}"

　　对比两条JSON字符串，其中bool值是不需要加引号的，并且指定了JSON的type后，JSON格式变得更加严格，单引号或者不加引号都是严禁的。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>My JSP 'index.jsp' starting page</title>

<script type="text/javascript" src="../scripts/jquery-1.4.2.js"></script>

  <script type="text/javascript">

  //url:ajax请求的目标url

  //args:传递的参数：json类型

  //data:ajax响应成功后的数据，可能是xml,html,json

      $(function(){

        $("a").click(function(){

            var url=this.href;

            var args={"time":new Date()};

            $.getJSON(url,args,function(data){

                var name=data.person.name;

                var email=data.person.eamil;

                var website=data.person.website;

                $("#details").empty()

                        .append("<h2><a href='mailto:"+email+"'>"+name+"</a></h2>")

                        .append("<a href='"+website+"'>"+website+"</a>");

                });

            return false;

        });

      })

  </script>

  </head>

  <body>

    <h1>People</h1>

    <ul>

        <li><a href="files/andy.js">Andy</a></li>

           <li><a href="files/richard.js">Richard</a></li>

           <li><a href="files/jeremy.js">Jeremy</a></li>

    </ul>

    <div id="details"></div>

  </body>

</html>

　

　　

　　更多实例请参见jQuery Ajax的API Ajax 部分：http://tool.oschina.net/apidocs/apidoc?api=jquery

　　典型应用举例

　　1.校验用户名是否被占用
　　jsp页面：index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>My JSP 'index.jsp' starting page</title>

    <!-- 注意此处src的写法 -->

    <script type="text/javascript" src="${pageContext.request.contextPath }/jquery-3.1.1.min.js"></script>

    <script type="text/javascript">

        /*

            导入库

            获取name结点

            为结点添加change()事件

            获取结点的value值，进行校验

            此处直接返回HTML片段，在客户端浏览器可以查看如红色加粗提示效果

        */

        $(function(){

            $(":text[name='username']").change(function(){

                var val = $(this).val();

                val = $.trim(val);

                if(val != ""){

                    var url = "${pageContext.request.contextPath }/validateUsername";

                    var args = {"username":val,"time":new Date()};

                    $.post(url,args,function(data){

                        $("#message").html(data);

                    });

                }

            });

        })

    </script>

</head>

  <body>

    <form action="" method="post">

        UserName:<input type="text" name="username"/>

        <br/>

        <div id="message"></div>

        <br/>

        <input type="submit" value="Submit"/>

    </form>

  </body>

</html>

　　//注意点：项目名的写法，servlet的路径的匹配

　　servlet页面

package cn.servlet;

import java.io.IOException;

import java.util.Arrays;

import java.util.List;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

/**

 * Servlet implementation class validataUsernameServlet

 */

public class validataUsernameServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

    /**

     * @see HttpServlet#HttpServlet()

     */

    public validataUsernameServlet() {

        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());

    }

    /**

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

     */

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

        List<String> list = Arrays.asList("aaa","bbb","ccc");

        String username = request.getParameter("username");

        String result = null;

        if(list.contains(username)){

            result = "<font color='red'>该用户名已经被使用</font>";

        }else{

            result = "<font color='green'>该用户名可以使用</font>";

        }

        response.setContentType("text/html;charset=UTF-8");

        response.setCharacterEncoding("UTF-8");

        response.getWriter().print(result);

    }

}

　　//注意点：创建servlet时的路径写法，设置编码

　　　2.添加商品
 　　jsp页面：index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>My JSP 'index.jsp' starting page</title>

  <!--

  1.获取当前页面所有的a节点，并为每一个a节点都添加onclick响应函数，同时取消其默认行为

  2.准备发送Ajax请求：Url(a节点的href属性值);args(时间戳)

  3.响应为一个json对象，包括：bookName,totalBookNumber,totalMoney

  4.把对应的属性添加到对应的位置

   -->

   <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-3.1.1.min.js"></script>

   <script type="text/javascript">

           $(function(){

               var isHasCart="${sessionScope.sc==null}";

                  //alert(isHasCart);

                  if(isHasCart){

                $("#cartstatus").hide();

                     }else{

                        $("#cartstatus").show();

                        $("#bookName").text("${sessionScope.sc.bookName}");

                $("#totalBookNumber").text("${sessionScope.sc.totalBookNumber}");

                $("#totalMoney").text("${sessionScope.sc.totalMoney}");

                     }

               $("a").click(function(){

                   $("#cartstatus").show();

                   var url = this.href;

                   var args = {"time":new Date()}

                   $.getJSON(url,args,function(data){

                       $("#bookName").text(data.bookName);

                    $("#totalBookNumber").text(data.totalBookNumber);

                    $("#totalMoney").text(data.totalMoney);

                   });

                   return false;

               });

           })

   </script>

  </head>

  <body>

      <div id="cartstatus">

          您已经将&nbsp;<span id="bookName"></span>&nbsp;加入到购物车中，

          购物车中的书有&nbsp;<span id="totalBookNumber"></span>&nbsp;本，

          总价格&nbsp;<span id="totalMoney"></span>&nbsp;钱

    </div>      <br/><br/>

    Java<a href="${pageContext.request.contextPath}/AddToCart?id=Java&price=300">加入购物车</a>

    <br/><br/>

    Oracle<a href="${pageContext.request.contextPath}/AddToCart?id=Oracle&price=200">加入购物车</a>

    <br/><br/>

    Struts2<a href="${pageContext.request.contextPath}/AddToCart?id=Struts2&price=100">加入购物车</a>

    <br/><br/>

  </body>

</html>

　　servlet页面

package cn.servlet;

import java.io.IOException;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.http.HttpSession;

import cn.bean.ShoppingCart;

/**

 * Servlet implementation class AddToCartServlet

 */

public class AddToCartServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

    /**

     * @see HttpServlet#HttpServlet()

     */

    public AddToCartServlet() {

        super();

        // TODO Auto-generated constructor stub

    }

    /**

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

     */

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

        doPost(request,response);

    }

    /**

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

     */

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

        //1.获取请求参数 id,price

        String bookName = request.getParameter("id");

        int price = Integer.parseInt(request.getParameter("price"));

        //2.获取购物车对象

        HttpSession session = request.getSession();

        ShoppingCart sc = (ShoppingCart) session.getAttribute("sc");

        //session中无购物车则创建一辆车给他，并放在session中

        if(sc == null){

            sc = new ShoppingCart();

            session.setAttribute("sc", sc);

        }

        //3.把点击的选项加入到购物车中

        sc.addToCart(bookName, price);

        //4.准备响应的json对象

        StringBuilder sb = new StringBuilder();

          sb.append("{")

            .append("\"bookName\":\""+bookName+"\"")

            .append(",")

            .append("\"totalBookNumber\":"+sc.getTotalBookNumber())

            .append(",")

            .append("\"totalMoney\":"+sc.getTotalMoney())

            .append("}");

        //5.响应json对象

          response.setContentType("text/javascript");

          response.getWriter().print(sb.toString());

    }

}

　　ShoppingCart

package cn.bean;

import java.util.HashMap;

import java.util.Map;

public class ShoppingCart {

    //存放shoppingcartitem的map 键：书名 值：shoppingcartitem对象

    private Map<String, ShoppingCartItem> items=new HashMap<String, ShoppingCartItem>();

    private String bookName;

    public void addToCart(String bookName,int price){

        this.bookName=bookName;

        if(items.containsKey(bookName)){

            ShoppingCartItem item=items.get(bookName);

            item.setNumber(item.getNumber()+1);

        }else{

            ShoppingCartItem item=new ShoppingCartItem();

            item.setBookName(bookName);

            item.setPrice(price);

            item.setNumber(1);

            items.put(bookName, item);

        }

    }

    public int getTotalBookNumber(){

        int total=0;

        for(ShoppingCartItem item:items.values()){

            total+=item.getNumber();

        }

        return total;

    }

    public int getTotalMoney(){

        int money=0;

        for(ShoppingCartItem item:items.values()){

            money+=item.getNumber()*item.getPrice();

        }

        return money;

    }

    public String getBookName() {

        return bookName;

    }

}

　　ShoppingCartItem

package cn.bean;

public class ShoppingCartItem {

    private int number;

    private String bookName;

    private int price;

    public int getNumber() {

        return number;

    }

    public void setNumber(int number) {

        this.number = number;

    }

    public String getBookName() {

        return bookName;

    }

    public void setBookName(String bookName) {

        this.bookName = bookName;

    }

    public int getPrice() {

        return price;

    }

    public void setPrice(int price) {

        this.price = price;

    }

}

　　使用Jackson后的servlet:（Jackson简单入门见另一篇随笔）

package cn.ajax.servlet;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.http.HttpSession;

import org.codehaus.jackson.map.ObjectMapper;

import cn.itcast.beans.ShoppingCart;

public class AddToCart extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        doPost(request, response);

    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        //1.获取请求参数 id,price

        String bookName=request.getParameter("id");

        int price=Integer.parseInt(request.getParameter("price"));

        System.out.println(bookName);

        //2.获取购物车对象

        HttpSession session=request.getSession();

        ShoppingCart sc=(ShoppingCart) session.getAttribute("sc");

        if(sc==null){

            sc=new ShoppingCart();

            session.setAttribute("sc", sc);

        }

        //3.把点击的选项加入到购物车中

        sc.addToCart(bookName, price);

        //4.准备响应的json对象

//        StringBuilder result=new StringBuilder();

//        result.append("{")

//        .append("\"bookName\":\""+bookName+"\"")

//        .append(",")

//        .append("\"totalBookNumber\":"+sc.getTotalBookNumber())

//        .append(",")

//        .append("\"totalMoney\":"+sc.getTotalMoney())

//        .append("}");

        ObjectMapper mapper=new ObjectMapper();

        String result=mapper.writeValueAsString(sc);

        System.out.println(result);

        //5.响应json对象

        response.setContentType("text/javascript");

        //response.getWriter().print(result.toString());

        response.getWriter().print(mapper.writeValueAsString(sc));

    }

}

 　　结果演示：

Ajax第二天——JQuery的Ajax的更多相关文章

  1. Ajax：后台jquery实现ajax无刷新删除数据及demo

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA8gAAAFSCAIAAAChUmFZAAAgAElEQVR4nO29z4scWZbn2/+Hb30zi8

  2. Ajax -异步请求 -jquery中ajax分类 -第一层 $.ajax -第二层($.get /$.post) -第三层($.getJson/$.getScript) -相应演示

    Ajax 1.标准请求响应时浏览器的动作(同步操作) 1.1浏览器请求什么资源,跟随显示什么资源2.ajax:异步请求. 2.1局部刷新,通过异步请求,请求到服务器资源数据后,通过脚本修改页面中部分内 ...

  3. Ajax 原生和jQuery的ajax用法

    https://www.cnblogs.com/jach/p/5709175.html form数据的序列化: $('#submit').click(function(){ $('#form').se ...

  4. JavaScript封装Ajax（类JQuery中$.ajax()方法）

    ajax.js (function(exports, document, undefined){ "use strict"; function Ajax(){ if(!(this ...

  5. Ajax学习系列——jQuery中Ajax的请求方式

    在jQuery中,Ajax常见的请求方式主要有4种. 1.$.ajax()返回其创建的XMLHttpRequest对象. $.ajax({ type:"POST", content ...

  6. 【JAVAWEB学习笔记】28_jqueryAjax：json数据结构、jquery的ajax操作和表单校验插件

    Ajax-jqueryAjax 今天内容: 1.json数据结构(重点) 2.jquery的ajax操作(重点) 3.jquery的插件使用   一.json数据结构 1.什么是json JSON(J ...

  7. 《锋利的JQuery》读书要点笔记5——jQuery与Ajax的应用

    第6章 jQuery与Ajax的应用 Ajax的全称:Asynchronous JavaScript and XML (异步Javascript和XML) 传统模式中,数据提交通过表单方式实现,数据的 ...

  8. Ajax_使用 jQuery 实现Ajax

    [jQuery中的Ajax] 1.jQuery对Ajax操作进行了封装,在jQuery中最底层的方法时 $.ajax().第二层是 load() , $.get()  和 $.post(),第三层是 ...

  9. js进阶 14 jquery的ajax有哪些函数和事件（多练）

    js进阶 14 jquery的ajax有哪些函数和事件(多练) 一.总结 一句话总结:常用:load.ajax.post.get.getScript().getJSON().表单序列化,ajax事件这 ...

随机推荐

  1. 回归JavaScript基础（五）

    主题:介绍引用类型Object.Array. 在上一章中,作者就在说变量的值的时候,提到过引用类型这个概念.JavaScript中存在基本类型和引用类型,其中引用类型很重要,这里有许多我们需要注意的东 ...

  2. 《SQL Server 2008从入门到精通》20180627

    数据库范式理论 范式理论是为了建立冗余较小结构合理的数据库所遵循的规则.关系数据库中的关系必须满足不同的范式.目前关系数据库有六种范式:第一范式(1NF).第二范式(2NF).第三范式(3NF).BC ...

  3. 借助System.Linq.Dynamic， IQueryable根据排序字符串排序

    在使用Entity Framework时,若有多个排序,需要OrderBy (OrderByDescending)再ThenBy (ThenByDescending) 假设需要根据Name升序排序,再 ...

  4. 远程桌面报错解决：No Remote Desktop License Servers Available

    摘 要 用户发来反馈,使用部门Windows跳板机报错:The remote session was disconnected because there are no Remote Desktop ...

  5. ETL探索之旅

    ETL(Ectract Transform Load) 抽取-转换-加载 ETL 商业软件: Informatica IBM DataStage Microsoft SSIS Oracle  ODI ...

  6. php安装--php-5.3.28

    PHP的整合使用: 一.下载php源码包:https://pan.baidu.com/s/1Cied8ozHez4xJ9l1HQ7pKQ 二.把源码包放到/usr/src目录 三.解压源码包并进入目录 ...

  7. javascript unshift()和shift()

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  8. python 控制台单行刷新,多行刷新

    先贴出单行刷新实现的进度条: 对于控制台的单行刷新,比较简单,先直接贴出代码: strarrs = ['/','|','\\'] for i in range(15): sys.stdout.writ ...

  9. Cobalt Strike 简单使用

    1.运行服务端 其中afanti就是密码 2.客户端 用户名随意写,密码添afanti 3.创建listener 4.生成木马客户端 Attacks->Packages->Windows ...

  10. HBase学习之路 （九）HBase phoenix的使用

    HBase phoenix的下载 下载地址http://mirror.bit.edu.cn/apache/phoenix/ 选择对应的hbase版本进行下载,测试使用的是hbase-1.2.6版本