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. Python snap

    orderedDict enum sys.path 注册装饰器 装饰器检查 入参 Flask01 flask_script flask blue print functools.partial dns ...

  2. Centos date 设置自定义时间

    [1]手动修改 (1)设置日期 # date -s 20190315 (2)设置时间 # date -s 15:23:34 (3)设置日期和时间 # date -s "20190315 15 ...

  3. Linux tar包安装Nginx

    1.首先安装依赖包(依赖包有点多.我们採用yum的方式来安装) yum -y install zlib zlib-devel openssl openssl-devel pcre pcre-devel ...

  4. 一次 read by other session 的处理过程

     一个哥们给我打电话.他说系统中一直出现等待事件 read by other session .而且该等待都是同一个sql引起的.比較紧急,请我帮忙远程看看. 远程过去之后,用脚本把 等待事件给抓 ...

  5. MySQL的max()函数使用时遇到的小问题

    通常我们获取某个表的某个字段最大值时可以使用max()函数. 使用场景举例: 获取某个表id的最大值:SQL: SELECT max(id) FROM table_name; SELECT max(` ...

  6. 安装PyTorch 0.4.0

    https://blog.csdn.net/sunqiande88/article/details/80085569 https://blog.csdn.net/xiangxianghehe/arti ...

  7. 【BZOJ3270】博物馆 期望DP+高斯消元

    [BZOJ3270]博物馆 Description 有一天Petya和他的朋友Vasya在进行他们众多旅行中的一次旅行,他们决定去参观一座城堡博物馆.这座博物馆有着特别的样式.它包含由m条走廊连接的n ...

  8. OpenCV玩耍（一）批量resize一个文件夹里的所有图像

    鉴于用caffe做实验的时候,里面牵扯到一个问题是必须将训练集和测试集都转成256*256的图像,而官网给出的代码又不会用,所以我用opencv转了.其实opencv只转一幅图会很简单,关键在于“批量 ...

  9. An Ordinary Game(简单推导)

    An Ordinary Game Time limit : 2sec / Memory limit : 256MB Score : 500 points Problem Statement There ...

  10. Stacks of Flapjacks(栈)

     Stacks of Flapjacks  Background Stacks and Queues are often considered the bread and butter of data ...