（1）取得服务端当前时间
jquery对象.load(url,sendData,function(backData,textStatus,xhr){... ...})
load()：如果无参的话，就以GET方式发送
如果有参的话，就以POST方式发送

（2）检查注册用户名是否存在
$.get(url,sendData,function(backData,textStatus,xhr){... ...})
$.post(url,sendData,function(backData,textStatus,xhr){... ...})

getTime.jsp

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

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

 <html>

   <head>

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

   </head>

   <body>

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

       <hr/>

       <div></div>

       <script type="text/javascript">

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

               /*

                 url表示异步请求的路径

                 sendData表示发送的数据，该数据的格式为{"key":value,"key":value}

                 function(){}表示回调处理函数，由服务端触发，类似于xhr.onreadystatechange

               */

               var url = "/jsExamples/TimeServlet?time="+new Date().getTime();

             var sendData = {"username":"杰克","password":"102030"};

               //哪个jquery对象调用load()方法，

               //返回值就设置到这个jquery对象的html()方法中

               $("div").load(url,sendData,function(backData,textStatus,xhr){

                   alert(backData+":"+textStatus+":"+xhr.status)

               });

           });

       </script>

   </body>

 </html>

TimeServlet.java

 package cn.itcast.web.servlet;

 import java.io.IOException;

 import java.text.DateFormat;

 import java.util.Date;

 import java.util.Locale;

 import javax.servlet.ServletException;

 import javax.servlet.http.HttpServlet;

 import javax.servlet.http.HttpServletRequest;

 import javax.servlet.http.HttpServletResponse;

 public class TimeServlet extends HttpServlet {

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

         DateFormat df = DateFormat.getDateTimeInstance(

                 DateFormat.FULL,

                 DateFormat.DEFAULT,

                 Locale.CHINA);

         String now = df.format(new Date());

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

         response.getWriter().write(now);

     }

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

         request.setCharacterEncoding("UTF-8");

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

         String ip = request.getRemoteAddr();

         if(ip.equals("127.0.0.1")){

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

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

             response.getWriter().write(username+":"+password);

         }

     }

 }

ajax_2.jsp  调用$.get()方法

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

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

 <html>

   <head>

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

   </head>

   <body>

     用户名[GET]：<input type="text"/><span></span>

     <script type="text/javascript">

         $(":text").blur(function(){

             //获取用户在文本框中填入的值

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

             //去空格

             username = $.trim(username);

             //判断

             if(username==null || username.length==0){

                 $("span").html("用户名必填");

             }else{

                 /*

                 回调函数有三个参数：

                 backData:表示服务端返回的数据

                 textStatus:表示服务端返回的数据的文本表达，如果成功，返回success

                 xhr:表示ajax引警对象

                 */

                 var url = "/day30/UserServlet?time="+new Date().getTime();

                 var sendData = {"username":username};

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

                     //定位span标签

                     var $span = $("span");

                     //将清span标签中的内容

                     $span.html("");

                     //创建img标签

                     var $img = $("<img src='" + backData + "'/>")

                     //将img标签设置到span标签内部，形成父子关系

                     $span.append( $img );

                 });

             }

         });

     </script>

   </body>

 </html>

ajax_3.jsp调用 $.post()方法

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

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

 <html>

   <head>

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

   </head>

   <body>

     用户名[POST]：<input type="text" name="username"/>

     <span></span>

     <script type="text/javascript">

         $(":text").blur(function(){

             //获取用户在文本框中填入的值

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

             //去空格

             username = $.trim(username);

             //判断

             if(username==null || username.length==0){

                 $("span").html("<font color='red'><b>用户名必填</b></font>");

             }else{

                 /*

                 回调函数有三个参数：

                 backData:表示服务端返回的数据

                 textStatus:表示服务端返回的数据的文本表达，如果成功，返回success

                 xhr:表示ajax引警对象

                 */

                 var url = "/day30/UserServlet?time="+new Date().getTime();

                 //var sendData = {"username":username};传统

                 var sendData = $(":text").serialize();//优化

                 $.post(url,sendData,function(backData,textStatus,xhr){

                     //定位span标签

                     var $span = $("span");

                     //将清span标签中的内容

                     $span.html("");

                     //创建img标签

                     var $img = $("<img width='30' height='30' src='" + backData + "'/>")

                     //将img标签设置到span标签内部，形成父子关系

                     $span.append( $img );

                 });

             }

         });

     </script>

   </body>

 </html>

UserServlet.java

 package cn.itcast.web.servlet;

 import java.io.IOException;

 import javax.servlet.ServletException;

 import javax.servlet.http.HttpServlet;

 import javax.servlet.http.HttpServletRequest;

 import javax.servlet.http.HttpServletResponse;

 public class UserServlet extends HttpServlet {

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

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

         byte[] buf = username.getBytes("ISO8859-1");

         username = new String(buf,"UTF-8");

         String imagePath = "images/MsgSent.gif";

         if("哈哈".equals(username)){

             imagePath = "images/MsgError.gif";

         }

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

         response.getWriter().write(imagePath);

     }

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

         request.setCharacterEncoding("UTF-8");

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

         String imagePath = "images/MsgSent.gif";

         if("哈哈".equals(username)){

             imagePath = "images/MsgError.gif";

         }

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

         response.getWriter().write(imagePath);

     }

 }

jquery ajax例子的更多相关文章

  1. 一个jquery ajax例子

    上次搞了个jquery的AutoComplete效果,感觉很久没写jquery了,趁热打铁,再找点东西练练手.这不,看了一下jquery手册,顺便写了一个小例子,源码我直接贴上来了.   1.新建一个 ...

  2. jquery ajax 应用返回类型是html json

    jquery ajax 例子:    function JudgeUserName()        {            $.ajax({            type:"GET&q ...

  3. php+jquery+ajax+json简单小例子

    直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...

  4. jquery ajax跨域请求后台的简单例子

    一.简介AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新. ajax() 方法通过 HTTP 请求加载远程数据. 该方法是 jQuery 底层 AJAX 实现.简 ...

  5. WCF入门教程（四）通过Host代码方式来承载服务 一个WCF使用TCP协议进行通协的例子 jquery ajax调用WCF，采用System.ServiceModel.WebHttpBinding System.ServiceModel.WSHttpBinding协议 学习WCF笔记之二 无废话WCF入门教程一[什么是WCF]

    WCF入门教程(四)通过Host代码方式来承载服务 Posted on 2014-05-15 13:03 停留的风 阅读(7681) 评论(0) 编辑 收藏 WCF入门教程(四)通过Host代码方式来 ...

  6. Django1.7+JQuery+Ajax集成小例子

    Ajax的出现让Web展现了更新的活力,基本所有的语言,都动态支持Ajax与起服务端进行通信,并在页面实现无刷新动态交互. 下面是散仙使用Django+Jquery+Ajax的方式来模拟实现了一个验证 ...

  7. jQuery Ajax 方法调用 Asp.Net WebService 以及调用aspx.cs中方法的详细例子

    一.jQuery Ajax 方法调用 Asp.Net WebService (引自Terry Feng) Html文件 <!DOCTYPE html PUBLIC "-//W3C//D ...

  8. jquery ajax请求后台 的简单例子

    jQuery.ajax(url,[settings]) 概述 通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax ...

  9. jQuery Ajax 实例 ($.ajax、$.post、$.get)

    jQuery Ajax 实例 ($.ajax.$.post.$.get) 转 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. ...

随机推荐

  1. HTTP 无状态啊无状态啊

    无状态的根本原因 根本原因是:因为,HTTP协议使用的是Socket套接字TCP连接的,每次监听到的套接字连接是不可能一个个保存起来的.(很消耗资源,假如一个人服务器只保存一个通信连接,一万个岂不是要 ...

  2. Android之判断时间是否为今天

    字符串:      sdate =  2013-07-16 13:35:02 /** * 判断给定字符串时间是否为今日 * @param sdate * @return boolean */ publ ...

  3. openssh-server

    安装 apt-get install openssh-server 配置 sudo gedit /etc/ssh/sshd_config PermitRootLogin without-passwor ...

  4. phpExcel导出文件时内存溢出的问题

    在使用PHPExcel导出文件时,经常会因为文件过大导致PHP内存溢出报错,为了解决这个问题,可以使用PHPExcel提供的参数进行优化.这里说的Excel文件过大并不一定是文件大小,更关键的在于文件 ...

  5. 【BZOJ】【2527】【POI2011】Meteors

    整体二分+树状数组 整体二分……感谢zyf提供的入门题 简单粗暴的做法:枚举每一个国家,二分他的$w_i$,然后计算……然而这样效率很低…… 整体二分就是:对所有的国家一起进行二分,$w_i$在mid ...

  6. 架构师书单 2nd Edition

    了2007年的目标,列了下面待读或重读的书单.    "其实中国程序员,现在最需要的是一张安静的书桌.",的确,中国架构师大多缺乏系统的基础知识,与其自欺欺人的宣扬"读书 ...

  7. ObservableCollection

    1)可以使绑定控件与基础数据源保持同步2)还可以在您添加.删除.移动.刷新或替换集合中的项目时引发 CollectionChanged 事件3)还可以在您的窗口以外的代码修改基础数据时做出反应4)相互 ...

  8. 【小程序】wxs使用

    wxs使用 WXS(WeiXin Script)是小程序的一套脚本语言,结合WXML,可以构建出页面的结构. wxs可以说就是为了满足能在页面中使用js存在的,在wxml页面中,只能在插值{{ }}中 ...

  9. 笔记本wifi热点设置好后，手机连上但不能上网问题

    这个问题我遇到过,我的原因是因为电脑上装有安全防护软件360的原因 解决方法是:打开360-->找到功能大全中的流量防火墙-->打开局域网防护-->关闭局域网隐身功能,立刻解决了这个 ...

  10. svmtrain princomp 出现的问题

    错误一: >> modelw = svmstrain(wine_label,wine_data); Undefined function 'svmstrain' for input arg ...