一个简单的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 ...
随机推荐
- Linux最小化安装后配置网络
vi /etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE=eth0HWADDR=00:0C:29:DD:AD:B9TYPE=EthernetUUID=d7 ...
- iOS_SN_地图的使用(3)
地图的定位,记得不用定位的时候要关掉定位不然会一直定位,使电量使用过快. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional ...
- Google推出iOS功能性UI测试框架EarlGrey
经过了一段时间的酝酿后,Google很高兴地宣布了EarlGrey,一款针对于iOS的功能性UI测试框架.诸如YouTube.Google Calendar.Google Photos.Google ...
- 捷易拍与springMVC系统结合
1. 捷易拍高拍仪在jsp页面的调用 使用ActiveX插件的方式处理解决此问题,捷易拍公司提供了支持IE8以上的32位浏览器的插件,安装插件后,我们可以使用Object标签,使用高拍仪 注意: 1. ...
- Sed命令学习
1.Sed简介 流数据编辑器 Stream editer(sed),它是一种行编辑器(对应于全屏编辑器),一次处理一行的内容.默认不编辑原文件内容(-i会直接修改原文件).处理时,它先将当前符 ...
- mysql/tokudb安装
一.环境要求: Operating Systems:64-bit Linux Memory: >=1G 二.安装步骤 1.下载安装包mysql-5.5.41-tokudb-7.5. ...
- Thinkphp join 连接查询
public function test ( ) { $User = M('authlist'); $rs = $User->join('left join wifi_shop on wifi_ ...
- 被误解的 MVC 和被神化的 MVVM
被误解的 MVC 和被神化的 MVVM 被误解的 MVC MVC 的历史 MVC,全称是 Model View Controller,是模型 (model)-视图 (view)-控制器 (contro ...
- controller 和 指令 通讯方法
在 angular 中我们经常会使用多个 controller 和 指令 他们拥有各自的 $scope , 这就产生了跨$scope调用的问题. 有几种常见的方法来可以使用. 方法一 : 指令 req ...
- PYTHON线程知识再研习C---线程互斥锁
结合例子,就很好理解了. 就是不要让共享变量被各个线程无序执行,导致结果不可预期 threading模块中定义了Lock类,可以方便的处理锁定: #创建锁mutex = threading.Lock( ...