/*

 * 我们使用了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. (转)HIBERNATE与 MYBATIS的对比

    第一方面:开发速度的对比 就开发速度而言,Hibernate的真正掌握要比Mybatis来得难些.Mybatis框架相对简单很容易上手,但也相对简陋些.个人觉得要用好Mybatis还是首先要先理解好H ...

  2. P1007 独木桥

    P1007 独木桥最少的话是同时朝一个方向,最多可以这样考虑,碰头时不是转向吗?它等价于穿过另一个人,也就是两个人交换,最后取最大值就好了. #include<iostream> usin ...

  3. Springboot 2.0.x 集成基于Centos7的Redis集群安装及配置

    Redis简介 Redis是一个基于C语言开发的开源(BSD许可),开源高性能的高级内存数据结构存储,用作数据库.缓存和消息代理.它支持数据结构,如 字符串.散列.列表.集合,带有范围查询的排序集,位 ...

  4. Stream 与 byte[] 互转

    public byte[] StreamToBytes(Stream stream) { byte[] bytes = new byte[stream.Length]; stream.Read(byt ...

  5. sass那些事儿

    Sass,Syntactically Awesome StyleSheets,语法样式表.Sass有两种实现,ruby-sass与lib-sass,前者用ruby实现,后者用C/C++实现. 一.Sa ...

  6. Microsoft Corporation 去掉 windows 修改 启动加载 版权

    windows 修改 开机界面 boot启动界面 windows 修改 启动加载 版权 windows 系统如何修改开机画面的版权文字“Microsoft Corporation ... ◎Micro ...

  7. Wamp下安装Memcached

    最近的项目要用到memcache,所以要在本地安装,安装过程中很遇到一些问题,在这里记录下. 我使用的是wamp集成环境,各个版本如下: WampServer Version 2.2 Apache V ...

  8. 潭州课堂25班：Ph201805201 爬虫基础 第二课 fidder (课堂笔记)

    通过浏览器访问百度的详细过程? 一.通过dns获取百度IP地址.二.通过百度IP访问百度服务器, 三,返回数据. 四,通过渲染显示内容, fidder设置 tf 信任证书

  9. treap(树堆)

    一棵treap是一棵修改了结点顺序的二叉查找树,如图,显示一个例子,通常树内的每个结点x都有一个关键字值key[x],另外,还要为结点分配priority[x],它是一个独立选取的随机数. 假设所有的 ...

  10. C++的多态

    继承.封装.多态是面向对象编程最主要的三个特征,有人说多态是理解C++最难理解的一部分,其实我觉得单单从技术上讲,多态并不难,难的是你需要懂得在何时使用多态,就像封装一样,封装本身不难,难的是你对整个 ...