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. readonly const关键字

    readonly 关键字与 const 关键字不同. const 字段只能在该字段的声明中初始化. readonly 字段可以在声明或构造函数中初始化. 因此,根据所使用的构造函数,readonly  ...

  2. xcode编译时，有第三方库时，编译设置build active architecture only问题

    本文转载至 http://blog.csdn.net/ysysbaobei/article/details/16371263 编译静态库 1.http://blog.csdn.net/dengdeng ...

  3. Python小白的发展之路之Python基础（二）【字符串、列表、集合、文件操作】

    列表.元组操作 字符串操作 字典操作 集合操作 文件操作 字符编码与转码 1.列表.元组操作 (1)列表 列表是可变的(mutable)——可以改变列表的内容,这不同于字符串和元组,字符串和元组都是不 ...

  4. html 自动跳转,meat(http-equiv)标签详解

    http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变 ...

  5. 重载(overload)、覆盖(override)和隐藏(hide)

    写正题之前,先给出几个关键字的中英文对照,重载(overload),覆盖(override),隐藏(hide).在早期的C++书籍中,可能翻译的人不熟悉专业用语(也不能怪他们,他们不是搞计算机编程的, ...

  6. iOS GPUImage 滤镜介绍

    这里直接引用官方描述: The GPUImage framework is a BSD-licensed iOS library that lets you apply GPU-accelerated ...

  7. centos6下nginx配置php可用

    先查看下所有服务的状态,看看php-fpm有没有正在运行 [root@centos64 html]# service --status-all php-fpm (pid  3568) 正在运行... ...

  8. git本地分支管理

    查看分支:git branch创建分支:git branch dev重命名分支:git branch -m dev dev1删除分支:git branch -d dev切换分支:git checkou ...

  9. C#实例，熟练使用泛型数组等，课程选择小软件

    CourseItem.cs using System; using System.Collections.Generic; using System.Linq; using System.Text; ...

  10. pymysql插入datetime类型

    第一种 create_time=datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S") 第二种 update_time=time ...