function createXMLHttpRequest(){

        try{

            return new XMLHttpRequest();

        }catch(e){

            try{

                return new ActiveXObject("Msxml2.XMLHTTP");

            }catch(e){

                try{

                    return new ActiveXObject("Microsoft.XMLHTTP");

                }catch(e){

                    alert("哥们，你用的什么浏览器啊！");

                    throw e;

                }

            }

        }

}

/*option对象有如下属性：*/

/*请求方式method,*/

/*请求的地址url,*/

/*是否异步aysn,*/

/*请求体params,*/

/*回调方法callback,*/

/*服务器响应数据转换成什么类型type*/

function ajax(option){

    /*

     * 1、得到xmlHttp

     */

    var xmlHttp=createXMLHttpRequest();

    /*

     * 2、打开连接

     */

    if(!option.method){//默认为GET请求

        option.method="GET";

    }

    if(option.asyn==undefined){//默认为异步

        option.asyn=true;

    }

    xmlHttp.open(option.method,option.url,option.asyn);

    /*

     * 3.判断是否为POST

     */

    if("POST"==option.method){

        xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

    }

    /*

     * 4.发送请求

     */

    xmlHttp.send(option.params);

    /*

     * 5.注册监听

     */

    xmlHttp.onreadystatechange=function(){

        if(xmlHttp.readyState==4 && xmlHttp.status==200){//双重判断

            var data;

            //获取服务器的响应数据，进行转换

            if(!option.type){//如果type不存在当成纯文本处理

                data=xmlHttp.responseText;

            }else if(option.type=="xml"){

                data=xmlHttp.responseXML;

            }else if(option.type=="text"){

                data=xmlHttp.responseText;

            }else if(option.type=="json"){

                var text=xmlHttp.responseText;

                data=eval("("+text+")");

            }

            //调用回调方法

            option.callback(data);

        }

    };

}

ajaxutils.js

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

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

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

<html>

  <head>

    <base href="<%=basePath%>">

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

    <meta http-equiv="pragma" content="no-cache">

    <meta http-equiv="cache-control" content="no-cache">

    <meta http-equiv="expires" content="0">

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="This is my page">

    <!--

    <link rel="stylesheet" type="text/css" href="styles.css">

    -->

<script type="text/javascript" src="ajax-lib/ajaxutils.js"></script>

<script type="text/javascript">

    window.onload=function(){

        var btn=document.getElementsByTagName("button")[0];

        btn.onclick=function(){

            /*

             1.ajax

             */

             ajax(

                 {

                     url:"<c:url value='/AServlet'/>",

                     type:"json",

                     callback:function(data){

                         document.getElementsByTagName("h3")[0].innerHTML=data.name+" ,"+data.age+" ,"+data.sex;

                     }

                 }

             );

        };

    };

</script>

  </head>

  <body>

      <button>点击我</button>

     <h1>演示自己封装的小工具</h1>

     <h3></h3>

  </body>

</html>

json3.jsp

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 AServlet extends HttpServlet{

    protected void doGet(HttpServletRequest req, HttpServletResponse resp)

            throws ServletException, IOException {

        String str="{\"name\":\"zhangSan\",\"age\":18,\"sex\":\"male\"}";

        resp.getWriter().print(str);

    }

}

AServlet

自定义ajax小工具以及使用的更多相关文章

  1. 常用的windows小工具指令和如何打开自定义的程序

    windows可以通过 开始->运行->输入程序名 或 windows键+R键 两种方式来启动windows中自带的程序或手动安装的程序.下面介绍一些常用的windows工具的指令和如何打 ...

  2. 小工具：天气查询 Vs自定义设置 DevGridControl中GridView排序问题 小工具：火车票查询 小工具：邮件发送 小工具：截图&简单图像处理

    小工具:天气查询   开发一个天气查询的工具主要由两步构成,一是数据的获取,二是数据的展示.  一.数据获取 数据获取又可以分为使用其它公司提供的API和手动抓取其它网站数据. 1. 某公司提供的AP ...

  3. [jQuery]jQuery DataTables插件自定义Ajax分页实现

    前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...

  4. 用c#开发微信（5）自定义菜单设置工具 （在线创建）

    读目录 1 使用 2 原理 3. 错误 上次写了<用c#开发微信 (4) 基于Senparc.Weixin框架的接收事件推送处理 (源码下载)>,有园友问到如何创建菜单的问题,今天就介绍下 ...

  5. QQ五笔词库转拼音词库小工具

    参考文章<用QQ拼音打五笔>中提供的信息而制作的小工具,功能是将QQ五笔导出词库文件转换为QQ拼音自定义短语使用的.ini格式文件,这样就可以使用QQ拼音进行五笔拼音混输了. 混输效果不错 ...

  6. 用C#Winform写个简单的批量清空文件内容和删除文件的小工具

    用C#Winform写个简单的批量清空文件内容和删除文件的小工具 本文介绍这个简单得不能再简单的小项目.做这个项目,有以下目的. 1 当然是做个能用的工具 2 学习使用Github 关于用VS2013 ...

  7. PHP API接口测试小工具

    前端时间给手机客户端做接口,当时弱爆了,写完API接口后,也不怎么测试,最后是等客户端调用的时候检验API的正确性. 后面利用PHP的curl实现Post请求,检验API接口的正确性:配合前面做的一个 ...

  8. Windows 上的 Jetty 小工具

    做项目经常遇到需要开发Java应用,我喜欢用Jetty进行开发.部署,主要是由于Jetty的轻量级. Jetty 项目主页:http://www.eclipse.org/jetty/, 最新版9.30 ...

  9. Windows下好用到必须开机自启的小工具

    折腾过linux,黑苹果,最后还是回到了盖茨大叔的windows.得出的结论是,日常使用的话,折腾Linux还不如把精力去拿去折腾windows.分享下折腾的成果,介绍下一些很不错的小工具.     ...

随机推荐

  1. resin 4.0 项目的配置

    前一篇我们了解了resin中配置数据源,依照不同项目的要求我们进行数据源的配置,如多个项目共享多个数据源,一个项目配置多个数据源,以下我们来看看项目的部署方式: 1.在一个host(虚拟主机)下配置一 ...

  2. MongoDBTemplate多条件查询的问题

    问题: 在使用Spring Data MongoDB 进行条件查询数据时,发现条件判断不起作用,结果会返回所有的数据. Criteria criteria = new Criteria(); crit ...

  3. Gone Fishing(贪心)

    Gone Fishing John is going on a fising trip. He has h hours available (1 ≤ h ≤ 16), and there are n ...

  4. iptables的例子1

      练习1:实现主机防火墙   设置主机防火墙策略为DROP: iptables -t filter -P INPUT DROP iptables -t filter -P OUTPUT DROP i ...

  5. Delphi的未来，一点浅见

    我是新手评议谈不上,但个人认为必须得跟主流大佬走,这同时也得有自己的核心技术,才最终能让自己成为大佬. ------------------------------------------------ ...

  6. 类加载（一）：static块 和 Class.forName

    1. class Some { static{ System.out.println("1"); } public Some(){ System.out.println(" ...

  7. Django使用富文本编辑器

    1.下载kindeditor 网址:http://kindeditor.net/demo.php2.解压到项目中 地址:\static\js\kindeditor-4.1.103.删除没用的文件 例如 ...

  8. 变量动态选取资源ID

    1.使用Resources 类的 getIdentifier方法  Resources res=getResources();        return res.getIdentifier(type ...

  9. swap 内存不足

    参考:https://stackoverflow.com/questions/5682854/why-is-the-linker-terminating-on-me-when-i-build-clan ...

  10. DAS、NAS、SAN

    目前磁盘存储市场上,存储分类(如下表一)根据服务器类型分为:封闭系统的存储和开放系统的存储,封闭系统主要指大型机,AS400等服务器, 开放系统指基于包括Windows.UNIX.Linux等操作系统 ...