自定义ajax小工具以及使用
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小工具以及使用的更多相关文章
- 常用的windows小工具指令和如何打开自定义的程序
windows可以通过 开始->运行->输入程序名 或 windows键+R键 两种方式来启动windows中自带的程序或手动安装的程序.下面介绍一些常用的windows工具的指令和如何打 ...
- 小工具：天气查询 Vs自定义设置 DevGridControl中GridView排序问题 小工具：火车票查询 小工具：邮件发送 小工具：截图&简单图像处理
小工具:天气查询 开发一个天气查询的工具主要由两步构成,一是数据的获取,二是数据的展示. 一.数据获取 数据获取又可以分为使用其它公司提供的API和手动抓取其它网站数据. 1. 某公司提供的AP ...
- [jQuery]jQuery DataTables插件自定义Ajax分页实现
前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...
- 用c#开发微信（5）自定义菜单设置工具 （在线创建）
读目录 1 使用 2 原理 3. 错误 上次写了<用c#开发微信 (4) 基于Senparc.Weixin框架的接收事件推送处理 (源码下载)>,有园友问到如何创建菜单的问题,今天就介绍下 ...
- QQ五笔词库转拼音词库小工具
参考文章<用QQ拼音打五笔>中提供的信息而制作的小工具,功能是将QQ五笔导出词库文件转换为QQ拼音自定义短语使用的.ini格式文件,这样就可以使用QQ拼音进行五笔拼音混输了. 混输效果不错 ...
- 用C#Winform写个简单的批量清空文件内容和删除文件的小工具
用C#Winform写个简单的批量清空文件内容和删除文件的小工具 本文介绍这个简单得不能再简单的小项目.做这个项目,有以下目的. 1 当然是做个能用的工具 2 学习使用Github 关于用VS2013 ...
- PHP API接口测试小工具
前端时间给手机客户端做接口,当时弱爆了,写完API接口后,也不怎么测试,最后是等客户端调用的时候检验API的正确性. 后面利用PHP的curl实现Post请求,检验API接口的正确性:配合前面做的一个 ...
- Windows 上的 Jetty 小工具
做项目经常遇到需要开发Java应用,我喜欢用Jetty进行开发.部署,主要是由于Jetty的轻量级. Jetty 项目主页:http://www.eclipse.org/jetty/, 最新版9.30 ...
- Windows下好用到必须开机自启的小工具
折腾过linux,黑苹果,最后还是回到了盖茨大叔的windows.得出的结论是,日常使用的话,折腾Linux还不如把精力去拿去折腾windows.分享下折腾的成果,介绍下一些很不错的小工具. ...
随机推荐
- git 撤销已经push到远端的代码
其实是没有直接让远端代码回复到某次的指令,实现撤销push的思路如下: 1.先让代码恢复到想要恢复的前一次提交记录 2.重新提交代码,覆盖端上的代码,就相当于撤销了push 的提交 实现方式如下: 1 ...
- 由浅到深理解ROS（4）
消息和消息类型 节点能相互传递消息,节点之间通信也是基于消息.消息类型也就是数据类型数据类型,理解消息的类型很重要,因为它决定了消息的内容.也就是说,一个话题的消息类型能告诉你该话题中每个消息携带了哪 ...
- cocos2d-x 3.0rc1 使用iconv库 解决UTF8乱码问题
多国语言要用到开源字符转换 iconv 先贴出自己的使用代码 你能够做成头文件 #if (CC_TARGET_PLATFORM == CC_PLATFORM_ANDROID) #include &qu ...
- LCD驱动程序(二)
上节我们主要是对fb_info结构体的配置,对fb_info结构体的配置主要分为一下步骤: static int lcd_init(void){ /* 1. 分配一个fb_info */ s3c_lc ...
- 【BZOJ3230】相似子串 后缀数组+二分+RMQ
[BZOJ3230]相似子串 Description Input 输入第1行,包含3个整数N,Q.Q代表询问组数.第2行是字符串S.接下来Q行,每行两个整数i和j.(1≤i≤j). Output 输出 ...
- [SCOI2009]生日礼物(尺取法)
Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 2201 Solved: 1186[Submit][Status][Discuss] Descript ...
- 核函数 深度学习 统计学习 强化学习 神经网络 xx
- Qt状态机框架（状态机就开始异步的运行了，也就是说，它成为了我们应用程序事件循环的一部分了）
状态机框架 Qt中的状态机框架为我们提供了很多的API和类,使我们能更容易的在自己的应用程序中集成状态动画.这个框架是和Qt的元对象系统机密结合在一起的.比如,各个状态之间的转换是通过信号触发的,状态 ...
- spring bean实例化的三种方式
一.使用类的无参构造创建 配置文件 java代码 注意若类里面没有无参的构造,则会出现异常 二.使用静态工厂创建 配置文件 java代码 Factory类 测试类 结果 三.使用实例工厂 配置文件 1 ...
- ABAP制作密码输入框
[转自 http://blog.csdn.net/saphome/article/details/6956911] 这几天做一个系统维护的程序,需要用户输入用户名和密码登录.可怎样实现输入密码显示星号 ...