简单的封装ajax函数

//封装一个ajax函数

  // 参数约定:
    // url  必须
    // method 可选, 默认是 get
    // data 可选, 可以是字符串, 也可以是对象( 键值对 )
    // fn 处理响应回来的数据, 函数需要有参数, 即响应回来的数据

function ajax( options ){
    //定义参数
   var url=options.url,
        method=options.method || "GET",
        data=options.data || null,
        fn=options.fn || null

    //首先转换data参数
    var tmp=[];
    //如果传入的是字符串,不需要处理,如果传入的是一个键值对,转换成字符串
    if(data != null && typeof data =="object"){
        for( var k in data){
            tmp.push(k + "=" + data[k] );
        }
        data=tmp.join("&");
    }

    //开始发送ajax请求
    var xhr=new XMLHttpRequest();
    xhr.open(method,url);
    //如果请求方式是post  设置头
    if( method.toLowerCase() == "post"){
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    }
    xhr.onreadystatechange=function(){
        if( xhr.readyState===4 && xhr.status==200){
            if(typeof fn =="function"){
                fn( xhr.responseText );
            }
        }
    };
    xhr.send(data);
};

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏xingoo, 一个梦想做发明家的程序员

互联网标准 之 微格式

微格式 微格式其实并不是浏览器或者HTML的某种标准,而是很多人进行起草创建的。它帮助我们更有效的管理前端代码,不仅让人能够读取其中的信息,也能让机器理解(典...

1957
来自专栏后台及大数据开发

springBoot系列教程06:参数验证及验证信息国际化

在springboot应用中要验证参数是否正确很简单,web应用已经包含了validation的

1062
来自专栏杂七杂八

urllib模拟浏览器登录

使用build_opener()修改报头 由于urlopen()不支持一些HTTP的高级功能,所以,我们如果要修改报头,可以使用urllib.request.b...

3105
来自专栏跟着阿笨一起玩NET

C#后台调用前台javascript的五种方法

201
来自专栏爱撒谎的男孩

Struts2之动态调用

-在struts核心配置文件详解(action)中已经详细讲解了method的用法,使用这个方式可以指定Action类中的不同的方法映射请求,那么就完成了动态调...

3186
来自专栏电光石火

简单的Ajax封装

/* *参数说明: *opts: {'可选参数'} **method: 请求方式:GET/POST,默认值:'GET'; **u...

1919
来自专栏GreenLeaves

C#程序之Main()方法

一、Main()方法的简介 1、一般情况下,一个C#可执行程序只有一个应用程序对象(也就是就程序入口),但是在某些情况,可能会有多个应用程序对象(程序入口),如...

1928
来自专栏码农阿宇

ASP.NET WebAPI String 传值问题

如果我们再WebAPI中定义了只有一个string参数的WebAPI函数,如下所示: [HttpPost] public string TrackBill(st...

3416
来自专栏从零开始学自动化测试

python笔记20-获取当前运行函数名

写完代码之后,一般为了方便查看日志,可以在日志输出中加入当前运行的函数名称或类和方法名称,以便于代码报错的时候能快速找到报错的是哪个函数或方法。 那么如何获取当...

771
来自专栏向治洪

React 语法之let和const命令

let命令 基本用法 ES6新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。 { let a = ...

3475

扫码关注云+社区