一个简单的ajax对象
function ajax(options) {
//请求参数
options = {
//类型
type: options.type || "Post",
//地址
url: options.url || "",
//超时时间
timeout: options.timeout || 5000,
//完成函数
onComplete: options.onComplete || function () { },
//错误函数
onError: options.onError || function () { },
//执行成功
onSuccess: options.onSuccess || function () { },
//传递数据
data: options.data || "",
//返回的数据类型
datatype: options.datatype || "string",
};
//创建请求对象
var xml = new XMLHttpRequest();
//初始化异步请求
xml.open(options.type, options.url, true);
//请求超时时间
var timeoutLength = options.timeout;
//请求是否成功
var requestDone = false;
//初始化一个超时执行回调函数,用于取消请求
setTimeout(function () {
requestDone = true;
}, timeoutLength); //监听文档状态的更新
xml.onreadystatechange = function () {
//保持等待,直到数据完全加载,并保证请求并未超时
if (xml.readyState == 4 && !requestDone) {
//检查请求是否成功
if (httpSuccess(xml)) {
//以服务器返回的数据作为参数调用成功回调函数
options.onSuccess(httpData(xml, options.datatype));
} else {
//发生错误时执行错误回调函数
options.onError();
}
//执行完成回调函数
options.onComplete();
//清理文档,避免内存泄露
xml = null;
}
};
//建立与服务器的连接
xml.send(); //判断http是否响应成功
function httpSuccess(r) {
try {
//如果得不到服务器状态且我们正在请求本地文件,认为成功
return !r.status && location.protocol == "file:" ||
//所有的200~300状态码表示成功
(r.status >= 200 && r.status < 300) ||
//文档未修改也表示成功
r.status == 304 ||
//Safari在文档未修改时返回空状态
navigator.userAgent.indexOf("Safari") >= 0
&& typeof r.status == "undefined";
} catch (e) {
//若检查状态失败,则假定请求是失败的
return false
}
} //从http响应中解析正确的数据
function httpData(r, type) {
//获取content-type的首部
var ct = r.getResponseHeader("content-type");
//若没有提供类型,判断服务器返回的是否是xml形式
var data = !type && ct && ct.indexOf("xml") >= 0;
//若是,获得xml文档对象,否则返回文本内容
data = type == "xml" || data ? r.responseXml : r.responseText;
//若指定类型是 script ,则以Javascript形式返回文本
if (type == "script") {
eval.call(window, data);
} else if (type == "json") {
data = eval(data);
}
//返回响应数据
return data;
}
}
使用
ajax({
url: "/Home/GetTestData",
type: "get",
datatype: "json",
onSuccess: function (result) {
alert(result);
},
onError: function (xhr) {
var x = xhr;
}
});
一个简单的ajax对象的更多相关文章
- Ajax得知(两)—— 一个简单的Ajax示例
通过部分博客认识Ajax之后,我们通过一个简单的实例来消化消化理论知识,一睹Ajax的庐山真面目. 1.实例功能: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZ ...
- 一个简单的AJAX实例
创建一个简单的XMLHttpRequest,从一个TXT文件中返回数据. 来源于菜鸟教程 <!DOCTYPE html><html><head><meta c ...
- DOM编程艺术章12:一个简单的Ajax例子
大概入了JavaScript的门,现在要回过头恶补Ajax和json了,随手翻到dom编程艺术发现有一个适合回忆的例子,先抄录下来,引入对Ajax作用的大概印象,再去掰开了研究. <!DOCTY ...
- 自己封装一个简单的ajax插件
function myAjax(obj) { var xmlHttp; //保存xmlHttpRequest对象 var type = obj.requestType; //保存请求方式 var ca ...
- 注解@requestBody自动封装复杂对象 (成功,自己的例子封装的不是一个复杂对象,只是一个简单的User对象,将jsp页面的name转成json字符串,再用JSON.stringify()传参就行了)
注意:ajax向后台传值的时候,必须加上contentType:"application/json"; springmvc的注解@requestBody可以通过页面提交json来自 ...
- 封装一个简单的ajax请求
记录自己第一次封装ajax,肯定有很多考虑不周到,如有错误请指出,本人必将虚心改正. /** * * @param {Object} obj =>header:请求头:url:请求地址:meth ...
- 一个简单的aJax——后台用servlet技术
示例:webDemo 一.客户端 <%-- Created by IntelliJ IDEA. User: Administrator Date: 15-12-2 Time: 上午5:41 To ...
- struts2框架下的一个简单的ajax例子
举个例子 jsp页面: <%@ page language="java" import="java.util.*" pageEncoding=" ...
- 一个简单的ajax上传 上传进度显示
本例用了jquery.form.js请到演示页面查看 CSS Code <style> form { display: block; margin: 20px auto; backgrou ...
随机推荐
- python 下的数据结构与算法---3:python内建数据结构的方法及其时间复杂度
目录 一:python内部数据类型分类 二:各数据结构 一:python内部数据类型分类 这里有个很重要的东西要先提醒注意一下:原子性数据类型和非原子性数据类型的区别 Python内部数据从某种形式上 ...
- iOS_SN_CoreDate(一)封装使用
看过一篇封装CoreData的文章挺不错,有基本使用封装,但是没有写怎么与tableView结合使用,我自己用的过程有些小波折,自己做了一个demo,大家可以看源码一些基本使用应该不难了, 原文:ht ...
- java下载文件
/** * * @param file * @param response */ private void downLoad(File file, HttpServletResponse respon ...
- 用ThreadLocal管理事务
1.适用场景 一个service,操作两个dao,要求两个dao为同一个事务,要么全成功,要么全失败.
- C++从多n个数中选取m个数的组合
//start 是从哪个开始取, picked代表已经取了多少个数 //process和data是全局变量数组 //语言说明比较难,我举个例子吧 //从[ 1, 2, 3, 4 ]中选取 2 个数 / ...
- VS2012 编写C++程序的时候DOS窗口一闪而过解决办法。
在我每次通过VS2012 运行C++程序的时候,DOS窗口在显示结果的时候都是一闪而过.这样让人没法观察输出的结果.经试验找到了一较好的解决办法: 首先包含头文件"stdlib.h" ...
- Linux 常用命令使用方法大搜刮
Linux 常用命令使用方法大搜刮 1.# 表示权限用户(如:root),$ 表示普通用户 开机提示:Login:输入用户名 password:输入口令 用户是系统注册用户成功登陆后,可以进入 ...
- js判断当前操作系统
function validataOS(){ if(navigator.userAgent.indexOf(“Window”)>0){ return ”Windows”; }else if(na ...
- LINUX VPS 查看系统信息命令
系统# uname -a # 查看内核/操作系统/CPU信息# head -n 1 /etc/issue # 查看操作系统版本# cat /proc/cpuinfo # 查看CPU信息# hostna ...
- 文成小盆友python-num9 socket编程
socket编程 网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个socket. Socket的英文原义是“孔”或“插座”.作为BSD UNIX的进程通信机制,取后一种意思 ...