/*

 * 我们使用了ajax 的xmlHttpRequest 跟服务器进行交互。

 *

 * 交互了有四个基本步骤

 * 1：创建对象

 * 2：建立连接

 * 3：发送请求

 * 4：接收数据

 *

 *  这些操作特别繁琐，一个页面有很多地方都发送ajax 请求。

 *  这里面我们就使用了一个jQuery 的框架，它提供了一些方法

 *  让我们来发送ajax 请求。 我模拟jQuery 封装一个方法出来

 *  我们以后用我们自己的方法来发送ajax 请求。

/*

 *  $.ajax({

 *      url:"",

 *      type:""

 *      data:"",

 *      success:function(){

 *      }

 *  });

 * */

var $={

    /*

     * 进来一个对象，出来一个字符串。

     * username=zhangsan&age=11

     *

     * */

    params:function(obj){

        var data='';

        for(var key in obj){

            data+=key+"="+obj[key]+"&"

        }

        return data.substring(0,data.length-1);

    },

    /*

     * 可以通过此方法来发送一个http 请求。

     * */

    ajax:function(obj){

        //实现这样的功能，可以用来发送请求。

        //接收用户传递的数据.

        var type=obj.type;

        var url=obj.url;

        var data=obj.data;

        var success=obj.success;

        var complete=obj.complete;

        var error=obj.error;

        //我必须创建一个XMLHttpRequest 对象。

        var xhr=new XMLHttpRequest();

        if(type=='get'){

            url=obj.url+"?"+this.params(data);

            data=null;

        }

        xhr.open(type,url);

        /*

         * post要给服务器端一个请求头

         * */

        if(type=='post'){

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

            data=this.params(data);

        }

        //我在这里要进行一个判断，如果用户的请求时get

        //发送服务器的参数的数据就应该在请求的地址的后面

        //username=''&age=''

        //如果我的请求是post 请求，

        //假设get ，send(null);

        //如果是post ，send("username=zhangsan&age=11")

        xhr.send(data);

        xhr.onreadystatechange=function(){

            if(xhr.readyState==4 && xhr.status==200){

               var data=xhr.responseText;

                success(data);

                complete();

            }

            else if(xhr.readyState==4 && xhr.status!=200){

                error();

                //这个属于请求完成了之后调用

                complete();

            }

        }

    }

};

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

    <script>

            $.ajax({

                url:"ajax.php",

                data:{

                    "username":"zhangsan"

                },

                type:"post",

                success:function(data){

                    alert(data);

                },

                //这个肯定是success 完成之后调用

                complete:function(){

                    alert("响应完成调用");

                },

                error:function(){

                    alert("出错了调用");

                }

            });

    </script>

</head>

<body>

</body>

</html>

  //jsonp demo。

        $.ajax({

            type: "get",

            async: false,

            url: "http://192.168.1.195:8080/yg_mobile/mobile/ygProduct/detail.do?id=1",

            dataType: "jsonp",

            jsonp: "callback", //传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)

            jsonpCallback: "fn", //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据

            success: function (json) {

                alert(json.id);

            },

            error: function () {

                alert('fail');

            }

        });

 /*生成任意长度的随机字符串。*/

 function randomString(len) {

 len = len || 32;

 var $chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/

 var maxPos = $chars.length;

 var pwd = '';

 for (i = 0; i < len; i++) {

 pwd += $chars.charAt(Math.floor(Math.random() * maxPos));

 }

 return pwd;

 };

模仿jQuery的ajax的封装的更多相关文章

  1. Ajax学习（二）：模仿jQuery的Ajax封装工具

    通过上一节的学习,基本了解Ajax的使用, 但是这样使用很麻烦,这里封装ajax为一个方法,作为一个ajax工具,传入相应参数就可以实现ajax的使用. 模仿jQuery的Ajax. 如下是jQuer ...

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

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

  3. jQuery版AJAX简易封装

    开发过程中,AJAX的应用应该说非常频繁,当然,jQuery的AJAX函数已经非常好用,但是小编还是稍微整理下,方便不同需求下,可以简化输入参数,下面是实例代码: $(function(){ /** ...

  4. js源码 模仿 jquery的ajax的获取数据（get，post ）的请求封装

    function ajax(obj){ // 默认参数 var defaults = { type : 'get', data : {}, url : '#', dataType : 'text', ...

  5. 基于jquery的ajax方法封装

    在实际的项目里,ajax的应用频率很高,所以尽管jquery或者其他的一些类似的js库做了非常不错的封装,仍然有进一步封装简化的空间和必要 举一个例子,很久很久以前,我的ajax是这么写的: $.aj ...

  6. jquery对于ajax的封装

    第一层封装 $.ajax({ 属性名:值,属性名:值}) /* url: 请求服务器地址 data:请求参数 dataType:服务器返回数据类型 error 请求出错执行的功能 success 请求 ...

  7. 为jQuery的$.ajax设置超时时间

    jQuery的ajax模块封装了非常强大的功能,有时候我们在发送一个ajax请求的时候希望能有一个超时的时间,想让程序在一段时间请求不到数据时做出一些反馈.幸运的是jQuery为我们提供了这样的参数: ...

  8. 【JavaWeb】jQuery对Ajax的支持

    jQuery对Ajax的支持 jQuery对Ajax进行封装,提供了$.ajax()方法 语法:$.ajax(options) 常用设置项 说明 url 发送请求地址 type 请求类型get|pos ...

  9. 模仿JQuery封装ajax功能

    需求分析 因为有时候想提高性能,只需要一个ajax函数,不想引入较大的jq文件,尝试过axios,可是get方法不支持多层嵌套的json,post方式后台接收方式似乎要变..也许是我不太会用吧..其实 ...

随机推荐

  1. 《Android进阶之光》--RxJava实现RxBus

    事件总线RxBus,替代EventBus和otto 1)创建RxBus public class RxBus{ private static volatile RxBus rxBus; private ...

  2. POJ-1511 Invitation Cards （单源最短路+逆向）

    <题目链接> 题目大意: 有向图,求从起点1到每个点的最短路然后再回到起点1的最短路之和. 解题分析: 在求每个点到1点的最短路径时,如果仅仅只是遍历每个点,对它们每一个都进行一次最短路算 ...

  3. UVa140 Bandwidth 【最优性剪枝】

    题目链接:https://vjudge.net/contest/210334#problem/F  转载于:https://www.cnblogs.com/luruiyuan/p/5847706.ht ...

  4. JSONObject基本内容（一）

    参考资料:http://swiftlet.net/archives/category/json,十分感谢~ 平时做项目,难免有遇到使用json对象的时候,这个东西不难,但是一不使用久了,就会忘记,所以 ...

  5. css 背景透明色， 文字不透明。

    [原]CSS实现背景透明,文字不透明,兼容所有浏览器 background-color: rgba(0,0,0,0.5); filter:Alpha(opacity=50);

  6. Python3高级基础（1）

    目录 Introducing Python Object Types 对象类型的优势 Python的核心数据类型 数字 = Number 字符串 列表 = lists 字典 = dictionary ...

  7. 使用time模块，转化时间格式

    import time ''' 时间戳:表示1970年开始计算的偏移量.我们运用type(时间戳)是float类型 结构化时间:9个元素组成的数组 格式化时间字符串 ''' '''获取当前时间戳''' ...

  8. VirtualBox 扩展包卸载或安装失败(VERR_ALREADY_EXISTS)（转）

    文章出处:http://blog.csdn.net/leshami/article/details/9232229 最近在卸载VirtualBox出现了无法卸载的错误.提示为Failed to ins ...

  9. DB2表不活动的处理方法

    DB2表不活动的处理方法(转载)首先查一下: db2 57016 SQLSTATE 57016: 因为表不活动,所以不能对其进行访问. 解决方法为:执行命令:reorg table XXX:即可. 参 ...

  10. pycharm工具下代码下面显示波浪线的去处方法

    近期安装了python后,发现使用pycharm工具打开代码后发现代码下边会有波浪线的显示:但是该代码语句确实没有错误,通过查询发现了两种方法去掉该波纹的显示,下面就具体说明一下: 方法一: 打开py ...