使用js手写兼容jquery的ajax

jquery-ajax.js

var $ = new function()
{
    this.ajax = function(param)
    {
        if(!param){return;}
        // compatible all new browsers and IE5 and IE6
        var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
        if (xmlhttp == null) {alert("Your browser does not support XMLHTTP.");return;}
        var type = param[‘type‘] ? param[‘type‘] : ‘get‘;
        var url = param[‘url‘] ? param[‘url‘] : ‘#‘;
        var async = param[‘async‘] == false ? false : true;
        var data = param[‘data‘] ? param[‘data‘] : null;
        var dataType = param[‘dataType‘] ? param[‘dataType‘] : ‘html‘;
        var success = typeof param[‘success‘] == ‘function‘ ? param[‘success‘] : function(){};
        var error = typeof param[‘error‘] == ‘function‘ ? param[‘error‘] : function(){};
        var complete = typeof param[‘complete‘] == ‘function‘ ? param[‘complete‘] : function(){};
        var timeout = param[‘timeout‘] ? param[‘timeout‘] : 3000;
        try
        {
            xmlhttp.open(type,url,async);
            xmlhttp.send(data);
            xmlhttp.onreadystatechange = function()
            {
                if(xmlhttp.readyState != 4){return;}
                switch (xmlhttp.status)
                {
                    case 200 : success(xmlhttp.responseText);complete(xmlhttp,‘success‘);break;
                    case 404 : error(xmlhttp,‘Not Found‘,null);complete(xmlhttp,‘error‘);break;
                    case 500 : error(xmlhttp,‘Internal Server Error‘,null);complete(xmlhttp,‘error‘);break;
                    default : error(xmlhttp,‘error‘,null);complete(xmlhttp,‘error‘);break;
                }
            };
        }
        catch(e)
        {
            error(xmlhttp,‘error‘,e);
            complete(xmlhttp,‘error‘);
        }
    };
};

调用方法同jquery的ajax一样

$.ajax({
    url : ‘‘,
    type : ‘post‘,
    async : true,
    data : {data : data},
    success : function(data) {
        //do some thing
    }
});
时间: 2024-12-26 21:33:08

使用js手写兼容jquery的ajax的相关文章

js手写'Promise'

/* * pending:初始化成功 * fulfilled:成功 * rejected:失败 * */ function Promise(executor) {// 执行器 this.status = 'pending'; this.value = undefined; this.reason = undefined; this.fulfilledCallback = []; this.rejectCallback = []; let resolve = (value)=>{ if(this.

轮播图--JS手写

轮播图基本每个网站都会有,也有很多的JQuery插件可以用,这里是用JS代码写的. @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Test</title> <script src="~/Scripts/jq

js源码 模仿 jquery的ajax的获取数据(get,post )的请求封装

function ajax(obj){ // 默认参数 var defaults = { type : 'get', data : {}, url : '#', dataType : 'text', async : true, success : function(data){console.log(data)} } // 处理形参,传递参数的时候就覆盖默认参数,不传递就使用默认参数 for(var key in obj){//把输入的参数与设置的默认数据进行覆盖更新 defaults[key]

简单的 js手写轮播图

html: <div class="na1">   <div class="pp">    <div class="na">     <img class="dd" src="../img/shouji/1.jpg">    </div>    <div class="na">     <img class=&

浅谈时钟的生成(js手写代码)

在生成时钟的过程中自己想到布置表盘的写法由这么几种: 当然利用那种模式都可以实现,所以我们要用一个最好理解,代码有相对简便的方法实现 1.利用三角函数 用js在三角函数布置表盘的过程中有遇见到这种情况:是在表盘的刻度处,利用三角函数计算具体的值时不能得到整数,需要向上或者向下取整,这样无形中就会存在些许偏差,而且这样的偏差难利用样式来调整到位,即使最终效果都可以实现,但是细微处的缝隙和角度的偏差都会影响整体的视觉体验,作为一名程序开发人员,这样的视觉体验很难让别人认可,放弃. 2.利用遮罩层 j

js手写一个实现一个简单的promise__小前端chenMr

1.首先来看一下promise常用场景 function chenPromise (arg) { return new Promise (resolve, reject) { if () { doSomeThing(arg) resolve(val) } else { reject(val) } } }chenPromise(arg).then(((val) => {}, (err) =>{}) 2.了解promise状态 1.常规分三种:PENDING, RESOLVED, REJECTED

手写一个简易的ajax请求

function ajax(url){ const p=new Promise((resolve,reject)=>{ const xhr=XMLHttpRequest() xhr.open('GET','/data/test.json',true) xhr.onreadystatechange=function(){ if(xhr.readyState===4){ if(xhr.status===200){ JSON.parse(xhr.responseText) }else if(xhr.s

js手写数组Api--模拟实现常见数组Api

数组的API经常用,但是api的内部实现还没研究过,于是就研究学习了下. 原文地址: https://www.cnblogs.com/yalong/p/11606865.html 数组的API的具体使用方看这里 API详细用法本文记录了数组中的 every,filter, find , indexOf, forEach, from, includes, isArray, map, reduce,slice,splice, sort这些个API的实现,如有不当,欢迎指出. Every 定义和用法:

js手写日历插件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>日历</title> <style> table {