封装JavaScript的AJAX
// 创建request对象
function createXMLHttpRequest() {
try {
return new XMLHttpRequest();//大多数浏览器
} catch (e) {
try {
return ActvieXObject("Msxml2.XMLHTTP");//IE6.0
} catch (e) {
try {
return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本
} catch (e) {
alert("用的是什么浏览器啊？");
throw e;
}
}
}
}
//option对象有如下属性
/*请求方式*/method,
/*请求的url*/ url,
/*是否异步*/asyn,
/*请求体*/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);
}
};
};
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<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">
<script type="text/javascript" src="<c:url value='/ajax-lib/ajaxutils.js'/>"></script>
<script type="text/javascript">
window.onload = function() {
var btn = document.getElementById("btn");
btn.onclick = function() {
ajax(
{
url:"<c:url value='/AServlet'/>",
type:"json",
callback:function(data) {
document.getElementById("h3").innerHTML = data.name + ", " + data.age + ", " + data.sex;
}
}
);
};
};
</script>
</head>
<body>
<%-- 点击按钮后，把服务器响应的数据显示到h3元素中 --%>
<button id="btn">点击这里</button>
<h1>显示自己封装的ajax小工具</h1>
<h3 id="h3"></h3>
</body>
</html>
index.jsp
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 {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
/*
* 向客户端发送json串
*/
String str = "{\"name\":\"zhangSan\", \"age\":18, \"sex\":\"male\"}";
response.getWriter().print(str);
System.out.println(str);
}
}
AServlet
封装JavaScript的AJAX的更多相关文章
- 第一百六十节，封装库--JavaScript，ajax注册表单到数据库
封装库--JavaScript,ajax注册表单到数据库 效果图 前台js var biaodan = $().xu_lie_biao_dan($('form').sh_jd()); //序列化获取表 ...
- 第一百五十八节，封装库--JavaScript，ajax说明
封装库--JavaScript,ajax说明 封装库ajax()方法,ajax通讯方法,跨页面向动态页面发送或获取数据 /** ajax()方法,ajax通讯方法,跨页面向动态页面发送或获取数据 * ...
- 封装、调用ajax
1.JavaScript代码 //封装ajaxfunction ajax(obj) { var xhr = new createXHR(); obj.url = obj.url + '?rand=' ...
- 初识JavaScript，Ajax，jQuery，并比较三者关系
一.基本认识 1.JavaScript 定义: javaScript的简写形式就是JS,是由Netscape公司开发的一种脚本语言,一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态 ...
- javascript进阶——Ajax
统的Web 页面和应用中,用户每点击页面上的某个部分,浏览器就会向服务器发出一个请求,等待服务器做出响应,然后返回一个完整新网页,但在大多数情况下用户不得不忍受页面闪烁和长时间的等待.随着Web技术的 ...
- javascript实现ajax
什么是 ajax ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取. http 请求 首先需要了解 htt ...
- JavaScript、Ajax与jQuery的关系
简单总结: 1.JS是一门前端语言. 2.Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新. 3.jQuery是一个框架,它对JS进行了封装 ...
- 第一百二十八节，JavaScript，Ajax
JavaScript,Ajax 学习要点: 1.XMLHttpRequest 2.GET与POST 3.封装Ajax 2005年Jesse James Garrett发表了一篇文章,标题为:" ...
- 原生 JavaScript 实现 AJAX、JSONP
相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的 ...
随机推荐
- iptables之链之间的跳转
创建一个新的链 按照管理,用户自定义的链用小写来区分它们 iptables -N newchain 可以在这个链的尾部跳转到INPUT链 iptables -A newchain -j INP ...
- delphi cxgrid 使用方法
delphi cxgrid 使用方法1.绑定数据 方法 cxGrid1DBTableView1.DataController.DataSource:=DataSource12.去掉"Drag ...
- Linux实时流量监控工具 - iftop
*本文转自ggjucheng的博客 介绍 iftop是一款实时流量监控工具,监控TCP/IP连接等,缺点就是无报表功能.必须以root身份才能运行. 实例 默认是监控第一块网卡的流量 iftop 监控 ...
- 【STL】 set集合容器常用用法
set集合容器:实现了红黑树的平衡二叉检索树的数据结构,插入元素时,它会自动调整二叉树的排列,把元素放到适当的位置,以保证每个子树根节点键值大于左子树所有节点的键值,小于右子树所有节点的键值:另外,还 ...
- jquery格式化时间
使用方法: new Date().format("yyyy-MM-dd hh:mm:ss"); 格式: Date.prototype.format = function (form ...
- Android Multimedia框架总结（二）MediaPlayer框架及播放网络视频案例
前言:前面一篇我们介绍MediaPlayer相关方法,有人说,没有实际例子,看得不是很明白,今天在分析MediaPlayer时,顺带一个播放网络视频例子.可以自行试试.今天分析的都是下几篇介绍各个模块 ...
- s:iterator，s:if与OGNL的嵌套使用
今天在写代码时,遇到个如下问题,要求当前登陆用户的id与系统参数类型代码所属维护人的id相同时,显示单选框.如下效果: 代码如下: <s:iterator value="vo.page ...
- WaxPatch中demo注意问题
问题一 https://github.com/mmin18/WaxPatch网址中提供的demo是可以运行,但是存在一个问题,如果把patch.zip换成自己的并且上传到自己的服务器(github), ...
- webstorm配置scss自动编译路径
webstorm支持sass的同步编译,也就是即写即编译,并且可以指定编译后的css的目录. 本文使用的webstorm为8.0版本 scss安装:http://www.w3cplus.com/sas ...
- Innodb之监控Buffer pool Load progress
你可以使用PERFORMANCE SCHEMA中的相关信息监控BUFFER POOL状态加载进程. 1. 启用 stage/innodb/buffer pool load instrument: 2. ...