目的：简化客户端与服务端进行局部刷新的异步通讯

（1）取得服务端当前时间

简单形式：jQuery对象.load(url)

返回结果自动添加到jQuery对象代表的标签中间

如果是Servlet的话，采用的是GET方式

复杂形式：jQuery对象.load(url,sendData,function(backData,textStatus,ajax){... ...})

sendData = {"user.name":"jack","user.pass":"123"};

以JSON格式文本方式发送，使用POST方式发送，服务端能收到数据

注意：对于load方法而言，如果请求体无参数发送的话，load方法

采用GET方式提交

注意：对于load方法而言，如果请求体有参数发送的话，load方法

采用POST方式提交

注意：使用load方法时，自动进行编码，无需手工编码

<%@ page language="java" pageEncoding="UTF-8"%>

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

<html>

  <head>

    <title>取得服务端当前时间</title>

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

  </head>

  <body>

    当前时间：<span id="time"></span><br/>

    <input type="button" value="获取时间"/>

    <script type="text/javascript">

        $(":button").click(function(){

            //参数一:发送的路径

            var url = "${pageContext.request.contextPath}/servlet/TimeServlet?time="+new Date().getTime();

            //参数二:以JSON文本书写的发送的参数

            var sendDate = {

                "name" : "哈哈",

                "sal"  :  6000

            };

            //参数三:回调函数

            $("#time").load(url,sendDate,function(backData,textStatus,xmlHttpRequest){

                //回调函数中参数一：backData表示返回的数据，它是js对象

                //回调函数中参数二：textStatus表示返回状态的文本描述，例如：success，error，

                //回调函数中参数三：xmlHttpRequest表示ajax中的核心对象

                //alert("backData=" + backData);//它是一个js对象

                //alert("textStatus=" + textStatus);

                //alert("xmlHttpRequest=" + xmlHttpRequest.readyState);

                //alert("xmlHttpRequest=" + xmlHttpRequest.status);

                //alert("xmlHttpRequest=" + xmlHttpRequest.responseText);//它是一个字符串

                //项目中只需要使用backDate即可

            });

            //$("#time").load(url,sendDate);

            //$("#time").load(url);

        });

    </script>

  </body>

</html>
package loaderman.time;

import java.io.IOException;

import java.io.PrintWriter;

import java.text.SimpleDateFormat;

import java.util.Date;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

/**

 * 取得服务端当前时间

 * @author AdminTC

 */

public class TimeServlet extends HttpServlet {

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

        System.out.println("GET");

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

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

        System.out.println(name+":"+sal);

        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");

        String str = sdf.format(new Date());

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

        PrintWriter pw = response.getWriter();

        pw.write(str);

        pw.flush();

        pw.close();

    }

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

        System.out.println("POST");

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

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

        System.out.println(name+":"+sal);

        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");

        String str = sdf.format(new Date());

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

        PrintWriter pw = response.getWriter();

        pw.write(str);

        pw.flush();

        pw.close();

    }

}

load()方法参数解释：

参数一：url发送到哪里去

参数二： sendData发送请求体中的数据，符合JSON格式，例如：{key:value,key:value}

参数三：function处理函数，类似于传统方式ajax.onreadystatechange = 处理函数

其中参数三为function处理函数最多可以接收三个参数，含义如下

第一个参数：服务端返回的数据，例如：backData

第二个参数：服务端状态码的文本描述，例如：success、error、

第三个参数：ajax异步对象，即XMLHttpRequest对象

以上所有参数的名字可以任意，但必须按顺序书写，尽量做到见名知意

检查注册用户名和密码是否存在

$.get(url,sendData,function(backData,textStatus,ajax){... ...})

$.post(url,sendData,function(backData,textStatus,ajax){... ...})赵君提倡

注意：使用get或post方法时，自动进行编码，无需手工编码

jQuery对象.serialize()

作用：自动生成JSON格式的文本

注意：为每个jQuery对象设置一个name属性，因为name属性会被认为请求参数名

注意：必须用<form>标签元素

适用：如果属性过多，强烈推荐采用这个API

<%@ page language="java" pageEncoding="UTF-8"%>

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

<html>

  <head>

    <title>检查注册用户名和密码是否存在</title>

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

  </head>

  <body>

    <!--

        在异步提交的方式下，form标签的action和method属性没有意义

    -->

    <form action="01_time.jsp" method="GET">

        <table border="2" align="center">

            <tr>

                <th>用户名</th>

                <td><input type="text" name="username"/></td>

            </tr>

            <tr>

                <th>密码</th>

                <td><input type="password" name="password"/></td>

            </tr>

            <tr>

                <td colspan="2" align="center">

                    <input type="button" value="检查" style="width:111px"/>

                </td>

            </tr>

        </table>

    </form>

    <span></span>

    <script type="text/javascript">

        $(":button").click(function(){

            var username = $(":text").val();//哈哈

            var password = $(":password").val();//123

            var url = "${pageContext.request.contextPath}/servlet/UserServlet?time="+new Date().getTime();

            /*手工写JSON文本

            var sendData = {

                "username" : username,

                "password" : password

            };

            */

            var sendData = $("form").serialize();

            $.post(url,sendData,function(backDate){

                //backDate：

                //如果服务器返回html，即backDate就是string，不要解析

                //如果服务器返回json，即backDate就是object，要解析

                //如果服务器返回xml，即backDate就是object，要解析

                var $img = $("<img src='"+backDate+"' width='14px' height='14px'>");

                $("span").text("");

                $("span").append($img);

            });

        });

    </script>

  </body>

</html>
package loaderman.user;

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;

/**

 * 检查注册用户名和密码是否存在

 * @author AdminTC

 */

public class UserServlet extends HttpServlet {

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

        request.setCharacterEncoding("UTF-8");

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

        String password = request.getParameter("password");//

        String tip = "images/MsgSent.gif";

        if("哈哈".equals(username) && "123".equals(password)){

            tip = "images/MsgError.gif";

        }

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

        PrintWriter pw = response.getWriter();

        pw.write(tip);

        pw.flush();

        pw.close();

    }

}

jQuery常用AJAX-API的更多相关文章

  1. JQuery常用的api[最好是系统地学习一下《锋利的JQuery》]

    text http://api.jquery.com/text/ Get the combined text contents of each element in the set of matche ...

  2. jQuery常用ajax操作

    在做asp.net项目的时候经常会用到ajax操作,现总结常用的ajax操作供平时项目中参考 第一种: 前端代码: <script type="text/javascript" ...

  3. jQuery常用的API

    1.jQuery给标签添加子元素(父子关系) jQuery对象.append("子"); 将div标签插入到ul标签之后 $("ul").append($('d ...

  4. jquery 常用api 小结2

    *一)jQuery常用方法API实战 (1)DOM简述与分类 A)DOM是一种标准,它独立于平台,语言,浏览器. B)如果项目中,你完全按照DOM标准写代码,你就能在各大主流的浏览器中操作标准控件. ...

  5. jQuery中ajax的4种常用请求方式

    jQuery中ajax的4种常用请求方式: 1.$.ajax()返回其创建的 XMLHttpRequest 对象. $.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数 ...

  6. jquery的常用ajax操作

    $.ajax() 定义和用法 ajax() 方法通过 HTTP 请求加载远程数据. 该方法是 jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() ...

  7. jquery中最常用的API有哪些

    jquery中最常用的API有哪些 一.总结 一句话总结:取html的方法,class相关的方法,val相关的方法,data相关的方法,attr相关的方法 1.jQuery Object Access ...

  8. JQuery常用API 核心 效果 JQueryHTML 遍历 Event事件

    JQuery 常用API 参考资料:JQuery 官网   jQuery API 中文文档 核心 jQuery 对象 jQuery() 返回匹配的元素集合,无论是通过在DOM的基础上传递的参数还是创建 ...

  9. jQuery常用API之jQuery选择器

    3.jQuery常用API 3.1 jQuery选择器 3.1.1 jQuery基础选择器 原生JS获取元素的方式很多.很杂,而且兼容性情况不一致,因此jQuery给我做了封装,是获取元素统一了标准 ...

  10. 实现Web请求后端Api的Demo，实现是通过JQuery的AJAX实现后端请求，以及对请求到的数据的解析处理，实现登录功能

    本篇实现Web请求后端Api的Demo,实现是通过JQuery的AJAX实现后端请求,以及对请求到的数据的解析处理,实现登录功能需求描述:1. 请求后端Api接口地址2. 根据返回信息进行判断处理前端 ...

随机推荐

  1. Async 配置线程池

    需要注意一下 ThreadPoolTaskExecutor  和 Executor  区别 @Configuration public class ExecutorConfig { /** Set t ...

  2. HTML5学习：表格

    HTML代码 <table> <thead> <tr> <th>标题1</th> <th>标题2</th> < ...

  3. Ubuntu系统---FeiQ安装记录

    Ubuntu系统---FeiQ安装记录 linux下安装飞秋/飞鸽传书之类的软件iptux信使,可以与windows在一个局域网下聊天与传书文件,安装很简单. 首先,直接运行下面的语句即可:sudo ...

  4. CCPC2019厦门站游记

    day0 人生第二次坐飞机,快乐 出机场到厦门,周围短袖短裤,我秋衣秋裤,快乐 宾馆条件不错,快乐 day1 早上休闲模式,整版子写模板题,快乐 宾馆有露天平台,有桌椅,有风,快乐 中午报道,领衣服, ...

  5. 关于C++编译时内链接和外链接

      最近在阅读<大规模C++ 程序设计> 在第1部分,作者讨论了内链接和外链接问题(因为大规模的C++程序有繁多的类和单元.因此编译速度是个大问题) 这里记录一下关于内链接和外链接的理解. ...

  6. MySQL--------SQL优化审核工具实战

    1. 背景 SQLAdvisor是由美团点评公司技术工程部DBA团队(北京)开发维护的一个分析SQL给出索引优化建议的工具.它基于MySQL原生态词法解析,结合分析SQL中的where条件.聚合条件. ...

  7. MyBatis-08-使用注解开发

    8.使用注解开发 8.1.面向接口编程 面向接口编程的根本原因:解耦,可拓展,提高复用,分层开发中.上层不用管具体的实现,大家都遵守共同的标准,使得开发变得容易,规范性好 8.2.使用注解开发 注解在 ...

  8. springmvc处理一个请求的全流程

    首先,用户的浏览器发出了一个请求,这个请求经过互联网到达了我们的服务器. Servlet 容器首先接待了这个请求,并将该请求委托给 DispatcherServlet 进行处理. 接着 Dispatc ...

  9. Acwing-287-积蓄程度(树上DP, 换根)

    链接: https://www.acwing.com/problem/content/289/ 题意: 有一个树形的水系,由 N-1 条河道和 N 个交叉点组成. 我们可以把交叉点看作树中的节点,编号 ...

  10. 36. ClustrixDB 使用ClustrixDB加密连接

    ClustrixDB使用sha256_password插件支持SSL和身份验证. 一些安全规则要求对存储在数据库中的用户密码进行更强的保护.与默认的mysql_native_password插件相比, ...