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. css3中font-face属性的用法详解

    @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许 ...

  2. Angular关于$anchorScroll的定位滚动

    以下是实现定位滚动的代码: <!DOCTYPE html> <html lang="en" ng-app="app"> <head ...

  3. Mybatis中的关联映射和查询

    一.商品订单数据模型 1.数据表 这里定义了四个表,分别表示用户,商品,订单,和订单详情. 用户表user CREATE TABLE `user` ( `id` int(11) NOT NULL AU ...

  4. js滚动到指定位置显示或隐藏元素

    $(function(){ $(window).scroll(function(){ var scroll_top=$(window).scrollTop(); console.log(scroll_ ...

  5. 为system对象添加扩展方法

    ////扩展方法类:必须为非嵌套,非泛型的静态类 public static class DatetimeEx { //通过this声明扩展的类,这里给DateTime类扩展一个Show方法,只有一个 ...

  6. Linux mariadb(Mysql)的主从复制架构

    mysql的主从复制架构,需要准备两台机器,并且可以通信,安装好2个mysql,保持版本一致性 mysql -v 查看数据库版本 1.准备主库的配置文件  /etc/my.cnf 写入开启主库的参数[ ...

  7. 《编程导论（Java）&#183;1.1.2 颠倒的世界(柏拉图法则)》

    假设你读<编程导论(Java)·1.1.2 颠倒的世界(柏拉图法则)>感到无趣,请尝试评价这个段子. 3. Classes Classes drive me crazy. That mig ...

  8. 从硬盘设计思想到RAID改良之道

    监控硬盘的前生今世关于桌面硬盘.企业级近线硬盘(NL-SAS/SATA)和监控硬盘的差别,我们在前文中已经讲得很详细,这里再换一个角度来看看. "监控硬盘是希捷和西数为视频监控定制的,典型的 ...

  9. urllib2下载网页的三种方法

    1.最直接的方法 #-*- coding: utf-8 -*- import urllib2 #直接请求 response = urllib2.urlopen('https://www.baidu.c ...

  10. MySQL与Oracle的语法区别详细对比

    MySQL与Oracle的语法区别详细对比 Oracle和mysql的一些简单命令对比在本文中将会涉及到很多的实例,感兴趣的你不妨学习一下,就当巩固自己的知识了   Oracle和mysql的一些简单 ...