封装 Ajax

因为Ajax 使用起来比较麻烦，主要就是参数问题，比如到底使用GET 还是POST；到

底是使用同步还是异步等等，我们需要封装一个Ajax 函数，来方便我们调用。

   封装支持接收来自服务端的数据，不可以发送数据到服务端

/**

* 此封装只支持接收来自服务端的数据，不可以发送数据到服务端

 */

function ajax(obj) {

    var xhr = new XMLHttpRequest();

    obj.url = obj.url + '?rand=' + Math.random();

    xhr.open(obj.method, obj.url, obj.async);

    xhr.send(null);

    if (obj.async === false) {

        callback();

    }

    if (obj.async === true) {

        xhr.onreadystatechange = function () {

            if (xhr.readyState == 4) {

                callback();

            }

        };

    }

    function callback () {

        if (xhr.status == 200) {

            obj.success(xhr.responseText); //回调

        } else {

            alert('数据返回失败！状态代码：' + xhr.status + '，状态信息：' + xhr.statusText);

        }

    }

}

　　

把上面的代码封装在ajax2.js中，在页面上引入该文件。

<!DOCTYPE html>

<html>

<head>

    <title>Ajax的封装</title>

    <meta charset="utf-8">

    <script src="ajax2.js"></script>

</head>

<body>

<button id="btn">调用Ajax</button>

<script>

    document.getElementById("btn").onclick=function(){

        ajax({

            method : 'get',

            url : 'http://localhost:3000/api/2',

            success : function (text) {

                alert(text);

            },

            async :false

        });

    };

</script>

</body>

</html>

7.2  封装支持接收来自服务端的数据，又可以发送数据到服务端

function ajax(obj) {

    var xhr = new XMLHttpRequest();

    obj.url = obj.url + '?rand=' + Math.random();

    obj.data = params(obj.data);

    if (obj.method === 'get') {

        obj.url = obj.url.indexOf('?') == -1 ? obj.url + '?' + obj.data : obj.url + '&' + obj.data;

    }

    if (obj.async === true) {

        xhr.onreadystatechange = function () {

            if (xhr.readyState == 4) {

                callback();

            }

        };

    }

    xhr.open(obj.method, obj.url, obj.async);

    if (obj.method === 'post') {

        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

        xhr.send(obj.data);

    } else {

        xhr.send(null);

    }

    if (obj.async === false) {

        callback();

    }

    function callback () {

        if (xhr.status == 200) {

            obj.success(xhr.responseText); //回调

        } else {

            alert('数据返回失败！状态代码：' + xhr.status + '，状态信息：' + xhr.statusText);

        }

    }

}

//名值对编码

function params(data) {

    var arr = [];

    for (var i in data) {

        arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));

    }

    return arr.join('&');

}

　         希望能够帮到你！

Ajax的封装。的更多相关文章

  1. 原生态AJAX详解和jquery对AJAX的封装

    AJAX: A :Asynchronous [eI`sinkrenes] 异步 J :JavaScript    JavaScript脚本语言 A: And X :XML 可扩展标记语言 AJAX现在 ...

  2. 【前端学习笔记04】JavaScript数据通信Ajax方法封装

    //Ajax 方法封装 //设置数据格式 function setData(data){ if(!data){ return ''; } else{ var arr = []; for(k in da ...

  3. 原生ajax与封装的ajax使用方法

    当我们不会写后端接口来测试ajax时,我们可以使用node环境创建一个本地服务器. 1.创建一个本地服务器可参考http://www.cnblogs.com/heyujun-/p/6793900.ht ...

  4. Ajax入门（二）Ajax函数封装

    如果看了的我上一篇博客<Ajax入门(一)从0开始到一次成功的GET请求>的话,肯定知道我们已经完成了一个简单的get请求函数了.如下: 1234567891011121314151617 ...

  5. js进阶ajax函数封装（匿名函数作为参数传递）（封装函数引入文件的方式非常好用）

    js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用) 一.总结 2.匿名函数作为参数传递 二.js进阶ajax函数封装 ajax1.js function ajax(ur ...

  6. jQuery-实现简单的Ajax请求封装

    封装的意义在于复用,在于减少重复的代码. 我在项目中做了简单的Ajax请求封装,实现方式如下: //封装Ajax请求 $.extend({ ajaxDirect:function(url,type,d ...

  7. JQ中的Ajax的封装

    1.认识JQ中ajax的封装      jQ 对于ajax的封装有两层实现:$.ajax 为底层封装实现:基于 $.ajax ,分别实现了$.get 与$.post 的高层封装实现: 2.Ajax的底 ...

  8. Jquery Ajax简单封装(集中错误、请求loading处理)

    Jquery Ajax简单封装(集中错误.请求loading处理) 对Jquery Ajax做了简单封装,错误处理,请求loading等,运用到项目中集中处理会很方便. 技术层面没有什么好说的,请求是 ...

  9. Ajax的封装，以及利用jquery的ajax获取天气预报

    1.Ajax的封装 function ajax(type,url,param,sync,datetype,callback){//第一个参数是获取数据的类型,第二个参数是传入open的url,第三个是 ...

随机推荐

  1. [51Nod1850] 抽卡大赛

    link $solution:$ 朴素 $dp$,暴力枚举选择 $i$ 号人的第 $j$ 张卡片,朴素 $dp$ 即可,时间复杂度 $O(n^4)$ . 考虑对于朴素 $dp$ 的优化,发现其实是一个 ...

  2. 2019 上海市大学生网络安全大赛 RE部分WP

    这次比赛就做了这一道逆向题,看到队友的WP,下面的对v10的加密方式为RC4,从我提取的v4数组就能够察觉出这是CR4了,自己傻乎乎的用OD调试,跟踪数据半天才做出来,还是见得的少了... ...下面 ...

  3. spring.jar是包含有完整发布的单个jar 包，spring.jar中包含除了spring-mock.jar里所包含的内容外其它所有jar包的内容，因为只有在开发环境下才会用到 spring-mock.jar来进行辅助测试，正式应用系统中是用不得这些类的。

    Spring jar包的描述:针对3.2.2以上版本 org.springframework spring-aop ——Spring的面向切面编程,提供AOP(面向切面编程)实现 org.spring ...

  4. Linux系统性能测试工具（七）——网络性能工具之iperf

    本文介绍关于Linux系统(适用于centos/ubuntu等)的网络性能测试工具-iperf.磁盘io性能测试工具包括: iperf: netperf 参考链接:https://www.cnblog ...

  5. php理解递归

    递归有一段时间很让人难已理解,突然发现一个很好的办法来理解,现在跟大家分享一下: <?php function fact(n){ if( n == 1){ return 1; } retrun ...

  6. 安装win10笔记

    1.使用pe安装的时候,要利用winNTSetup安装 2. 3.引导和安装驱动器都选择c盘 4.版本选择教育版,专业版photoshop 不好使.

  7. 一、MyBatis基本使用，包括xml方式、注解方式、及动态SQL

    一.简介 发展历史:MyBatis 的前 身是 iBATIS.最初侧重于 密码软件的开发 , 后来发展成为一款基于 Java 的持久层框架. 定      位:MyBatis 是一款优秀的支持自定义 ...

  8. 数据库JDBC

    数据库概述 什么是数据库?数据库就是存储数据的仓库,本质是一个文件系统,数据按照特定的格式将数据存储起来,用户可以通过SQL对数据库进行增删改查操作. 数据库对应一个应用系统,在系统中有很多的功能,每 ...

  9. 多对多关系表的创建方式、forms组件

    目录 多对多关系表的三种创建方式 1.全自动,Django自动创建 2.纯手撸 3.半自动(推荐使用) forms组件 小例子 forms组件 校验器 钩子函数 局部钩子 全局钩子 forms组件常用 ...

  10. css----动画（图片无限放大缩小）

    先给大家推荐animate.css库,里面有一些效果很不错的过度样式,不想自己写的也可以直接安装这个库来使用,如果不想安装这个库也可以去https://daneden.github.io/animat ...