也写一个Ajax.Request类附代码

目的:因为blog程序里的某些模块需要用到ajax,直接使用prototype.js体积比较大(40多k),而且仅仅用到其中的ajax功能,因此为了减轻下载的负担,又不能改动已经在prototype.js框架下写好的代码,只能是按照prototype的风格,自己写一个ajax类,达到零成本移植框架。

新的ajax类如下:

var Ajax = {xmlhttp:function(){
try{
return new ActiveXObject('Msxml2.XMLHTTP');
}catch(e){
try{
return new ActiveXObject('Microsoft.XMLHTTP');
}catch(e){
return new XMLHttpRequest();
}

}
};

Ajax.Request = function(){
if (arguments.length<2) return;
var _p = {asynchronous:true,method:"GET",parameters:""}; //default option
for (var key in arguments[1]){ // custom option overwrite default option
_p[key] = arguments[1][key]; 
}
var _x = Ajax.xmlhttp(); //xml obj
var _url = arguments[0]; //str
if(_p["parameters"].length>0) _p["parameters"] += '&_=';
if(_p["method"].toUpperCase()=="GET")_url += (_url.match(/\?/) ? '&' : '?') + _p["parameters"];
_x.open(_p["method"],_url,_p["asynchronous"]);
_x.onreadystatechange = function(){
if (_x.readyState==4){
if(_x.status==200){
_p["onComplete"]?_p["onComplete"](_x):"";
}else{
_p["onError"]?_p["onError"](_x):"";
}
}
}
if(_p["method"].toUpperCase()=="POST")_x.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
_x.send(_p["method"].toUpperCase()=="POST" ? _p["parameters"] : null);
};

这个类保存成js文件,体积还不到1k,足够小了。哈哈。
调用方法:

var myAjax = new Ajax.Request(
"http://localhost/abc.asp",
{
method:"post",
parameters:"demo=123456789abc",
onComplete:function(xmlhttp){
alert(xmlhttp.responseText)
}
}
);

调用的风格完全与原来相同!

目前这个新类只有两个回调函数:onComplete 与 onError,Ajax类也只有Request一个方法,毕竟现在blog程序还不需要这么多应用嘛。parameters 属性有个默认值:{asynchronous:true,method:"GET",parameters:""},可以从中知道,如果调用时不传入asynchronous、method、parameters三个参数,那么类将使用默认值。

(0)

相关推荐

  • 也写一个Ajax.Request类附代码

    目的:因为blog程序里的某些模块需要用到ajax,直接使用prototype.js体积比较大(40多k),而且仅仅用到其中的ajax功能,因此为了减轻下载的负担,又不能改动已经在prototype.js框架下写好的代码,只能是按照prototype的风格,自己写一个ajax类,达到零成本移植框架. 新的ajax类如下: var Ajax = {xmlhttp:function(){ try{ return new ActiveXObject('Msxml2.XMLHTTP'); }catch(

  • javascript写一个ajax自动拦截并下载数据代码实例

    这篇文章主要介绍了javascript写一个ajax自动拦截并下载数据代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width

  • 用python写一个福字(附完整代码)

    目录 前言: 一,扫五福活动如此火爆,为何不自己利用编程来生成福字! 二,完整代码 三,总结 前言: 支付宝 2022 集五福活动正式开启 数据显示,过去六年累计参与支付宝集五福的人数已经超过了 7 亿,每 2 个中国人里就有 1 个曾扫福.集福.送福. 一,扫五福活动如此火爆,为何不自己利用编程来生成福字! 首先作品奉上: ①,导入python库 import io from PIL import Image import requests ②,利用爬虫,获取单个汉字 def get_word

  • Java手写图书管理基本功能附代码

    目录 1.book包 2.user包 3.operate包 Java中的最主要的语法之前基本都介绍完毕,本篇将使用之前的内容来写一个简单的图书管理系统,中间会展示部分代码来讲解,源码地址在这项目: 个人练习的项目 - Gitee.com 首先还是来看看运行的效果 我们来分析一下: Java中是通过对象之间的交互来解决事情的,所以我们来看看有哪些对象 首先显而易见的两个对象:用户和书,所以创建两个包book和user 通过上图可以看到:不同用户之间有相同的操作,也有不同的操作,所以不妨将所有的操作

  • 使用Python写一个贪吃蛇游戏实例代码

    我在程序中加入了分数显示,三种特殊食物,将贪吃蛇的游戏逻辑写到了SnakeGame的类中,而不是在Snake类中. 特殊食物: 1.绿色:普通,吃了增加体型 2.红色:吃了减少体型 3.金色:吃了回到最初体型 4.变色食物:吃了会根据食物颜色改变蛇的颜色 #coding=UTF-8 from Tkinter import * from random import randint import tkMessageBox class Grid(object): def __init__(self,

  • 用ES6的class模仿Vue写一个双向绑定的示例代码

    本文介绍了用ES6的class模仿Vue写一个双向绑定的示例代码,分享给大家,具体如下: 最终效果如下: 构造器(constructor) 构造一个TinyVue对象,包含基本的el,data,methods class TinyVue{ constructor({el, data, methods}){ this.$data = data this.$el = document.querySelector(el) this.$methods = methods // 初始化 this._com

  • Java实现手写一个线程池的示例代码

    目录 概述 线程池框架设计 代码实现 阻塞队列的实现 线程池消费端实现 获取任务超时设计 拒绝策略设计 概述 线程池技术想必大家都不陌生把,相信在平时的工作中没有少用,而且这也是面试频率非常高的一个知识点,那么大家知道它的实现原理和细节吗?如果直接去看jdk源码的话,可能有一定的难度,那么我们可以先通过手写一个简单的线程池框架,去掌握线程池的基本原理后,再去看jdk的线程池源码就会相对容易,而且不容易忘记. 线程池框架设计 我们都知道,线程资源的创建和销毁并不是没有代价的,甚至开销是非常高的.同

  • vuejs手把手教你写一个完整的购物车实例代码

    由于我们公司是主营业务是海淘,所以每个项目都是类似淘宝天猫之类的商城,那么购物车就是一个重点开发功能模块.介于之前我都是用jq来写购物车的,这次就用vuejs来写一个购物车.下面我就从全选,数量控制器,运费,商品金额计算等方法来演示一下一个能用在实际场景的购物车是怎么做出来的以及记录一下这次用vuejs踩过的坑. 1.一层数据结构-全选 下面这段代码和vuejs官网里面checkbox绑定很像.不明白的可以直接上vuejs官网看看. <!DOCTYPE html> <html lang=

  • react写一个select组件的实现代码

    之前一直用的antd的Select组件,但在有些端并不适用,而原生的select样式修改不灵活,遂产生自己写一个组件的想法.观察select组件: <select onChange={(value) => {this.value=value}} <option value='1'>man</option> <option value='0'>woman</option> </select> 可以看出数据都是在option中,有值val

  • 一个PHP分页类的代码

    下面看这一段代码: PHP 复制代码 代码如下: <? /** * filename: ext_page.class.php * @package:phpbean * @author :feifengxlq<feifengxlq#gmail.com><http://www.phpobject.net/> * @copyright :Copyright 2006 feifengxlq * @license:version 2.0 * @create:2006-5-31 * @m

随机推荐