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. erlang实现一个进程池 pool

    erlang的实现一个简单的进程池. erlang进程是非常轻量级的,这个进程池的主要目的是用一种通用的方式去管理和限制系统中运行的资源占用.当运行的工作者进程数量达到上限,进程池还可以把任务放到队列 ...

  2. vi相关命令

    vi相关命令在行首加#        :% s/^/#        删除#        :% s/#//在行末加#        :% s/$/#        删除        :% s/#$ ...

  3. getMeasuredHeight(),getScrollY(),getHeight()的区别和联系

    前言:关于控件的高度有两种获取方式,一个是获得控件的实际大小(getMeasuredHeight),就是包含显示部分和已显示的部分: 而getHeight是获得控件的显示的大小,如果控件大小超出的屏幕 ...

  4. PHPstudy如何在本地搭建多站点

    参考地址: http://jingyan.baidu.com/article/e52e36154227ef40c70c5147.html

  5. Paint的setPathEffect(PathEffect effect)、以及Path的具体使用，收益多多！

    Paint的setPathEffect(PathEffect effect).以及Path的具体使用,收益多多! 在这首先申明一下介绍只是为了学习使用 内容都来自:http://www.cnblogs ...

  6. 【BZOJ3333】排队计划 树状数组+线段树

    [BZOJ3333]排队计划 Description Input Output Sample Input 6 2 160 163 164 161 167 160 2 3 Sample Output 6 ...

  7. 九度OJ 1204：农夫、羊、菜和狼的故事 （遍历、BFS）

    时间限制:1 秒 内存限制:32 兆 特殊判题:是 提交:744 解决:502 题目描述: 有一个农夫带一只羊.一筐菜和一只狼过河. 果没有农夫看管,则狼要吃羊,羊要吃菜. 但是船很小,只够农夫带一样 ...

  8. Python菜鸟之路：Python操作MySQL-即pymysql/SQLAlchemy用法

    上节介绍了Python对于RabbitMQ的一些操作,本节介绍Python对于MySQL的一些操作用法 模块1:pymysql(等同于MySQLdb) 说明:pymysql与MySQLdb模块的使用基 ...

  9. centos下安装pip时失败：

    [root@wfm ~]# yum -y install pipLoaded plugins: fastestmirror, refresh-packagekit, securityLoading m ...

  10. wecenter 问答社区 dockerfile,不用纠结于物理机的运行环境

    FROM webdevops/php-nginx:centos-7-php56 ADD . /app RUN ["chmod", "777", "/a ...