自定义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.分享下折腾的成果,介绍下一些很不错的小工具. ...
随机推荐
- 12 Memcached 缓存无底洞现象
一:Memcached 缓存无底洞现象(1)facebook的工作人员反应的,facebook在2010年左右,memcached节点就已经达到了3000个,存储的数据进千G的数据存储. 他们发现一个 ...
- RecyclerView 踩坑
一.RecyclerView设置拖动后怎么监听拖动的开始和结束 ItemTouchHelper helper = new ItemTouchHelper(new ItemTouchHelper.Cal ...
- Spring Cloud 微服务五：Spring cloud gateway限流
前言:在互联网应用中,特别是电商,高并发的场景非常多,比如:秒杀.抢购.双11等,在开始时间点会使流量爆发式地涌入,如果对网络流量不加控制很有可能造成后台实例资源耗尽.限流是指通过指定的策略削减流量, ...
- iptables启动脚本分析
#!/bin/sh # # iptables Start iptables firewall # # chkconfig: 2345 08 92 # description: Starts, stop ...
- MySQL查询优化程序
1.利用EXPLAIN 语句,查看是否用到索引: EXPLAIN 2.下面的WHERE 子句说明了怎样进行这项工作.第一行中,优化程序将简化表达式4/2 为值2,然后使用my_col 上的索引快速地找 ...
- python 之前函数补充(__del__, item系列, __hash__, __eq__) , 以及模块初体验
__str__ : str(obj) , 需求必须实现了 __str__, 要求这个方法的返回值必须是字符串 str 类型 __repr__ (意为原型输出): 是 __str__ 的备胎( ...
- 洛谷P2661 信息传递==coedevs4511 信息传递 NOIP2015 day1 T2
P2661 信息传递 题目描述 有n个同学(编号为1到n)正在玩一个信息传递的游戏.在游戏里每人都有一个固定的信息传递对象,其中,编号为i的同学的信息传递对象是编号为Ti同学. 游戏开始时,每人都只知 ...
- 记录-项目java项目框架搭建的一些问题（maven+spring+springmvc+mybatis）
伴随着项目框架的落成后,本以为启动就能成功的,but.... 项目启动开始报错误1:java.lang.ClassNotFoundException: org.springframework.web. ...
- jsp联合javascript操作html
1 执行的先后顺序 jsp先处理,给页面里面的变量赋值等等.然后整个页面发送给客户端,在客户端执行javascipt相关的代码. 2 jsp文件的构成 html文件+java程序片段+jsp标签=js ...
- 像使用linux一样使用mac
1 不能像使用windows一样使用mac 因为mac卸载不方便. 2 gcc的问题 就使用系统默认的gcc,即clang,要想使用原声的gcc是不行的,mac本身不支持.