封装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请求方法,而其他的功能用到的很少,这显然是没必要的 ...
随机推荐
- NSOJ A fairy tale of the two（最小费用最大流、SPFA版本、ZKW版本）
n,m<=20,给两个n×m布尔矩阵,每次操作可将第一个矩阵的2个相邻元素互换.输出最少操作次数使得两个矩阵完全一样. 比赛的时候想过按照二分图完美匹配的类似做法构图,不过想到边太多以及卡各种题 ...
- Divide and conquer:Telephone Lines(POJ 3662)
电话线 题目大意:一堆电话线要你接,现在有N个接口,总线已经在1端,要你想办法接到N端去,电话公司发好心免费送你几段不用拉网线,剩下的费用等于剩余最长电话线的长度,要你求出最小的费用. 这一看又是一个 ...
- jquery stop( ) 的用法 （转）
目的:为了 了解stop()的用法,举个例子,直观的方式看看. 实物:一个id="animater"的div包含了一段文字.(以下用animator表示实物) 动画最终的完整效果: ...
- js注册读秒进度条
转载自://http://blog.csdn.net/wugouzi/article/details/12621385 <head> <meta http-equiv="C ...
- 将file转变成contenthash
一.将MultipartFile转file CommonsMultipartFile cf= (CommonsMultipartFile)file; DiskFileItem fi = (DiskFi ...
- NEFU 505 超级红与黑 (高斯消元)
题目链接 中文题,改下模板构造一下就能过了,数据有点水,不过还是需要自由变元枚举的. #include <iostream> #include <cstdio> #includ ...
- java课后作业5
[问题]随机生成10个数,填充一个数组,然后用消息框显示数组内容,接着计算数组元素的和,将结果也显示在消息框中. 设计思路: 1.申请一个长度为10的数组 2.计算机随机生成10个数,并赋给数组 3. ...
- 决绝Capturing 'demo' strongly in this block is likely to lead to a retain cycle
- (IBAction)onTest:(id)sender { BlockDemo *demo = [[BlockDemo alloc]init]; __weak typeof(BlockDemo) ...
- chrome进入控制台时自动进入断点模式的解决方法
简单粗暴,不知道为什么,去掉那个√就好了
- 阿里云服务器出现Warning: Cannot modify header information - headers already sent by (output started at 问题的解决方法
阿里云服务器出现Warning: Cannot modify header information - headers already sent by (output started at 问题的解决 ...