/*

 * 我们使用了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. Python 枚举【一】

    1. 枚举的定义 首先,定义枚举要导入enum模块. 枚举定义用class关键字,继承Enum类. 用于定义枚举的class和定义类的class是有区别[下一篇博文继续分享]. 示例代码: from ...

  2. RocketMQ msgId生成算法

    当我们用RocketMQ发送信息的时候通常都会返回如下信息: SendResult [sendStatus=SEND_OK, msgId=0A42333A0DC818B4AAC246C290FD000 ...

  3. css文字效果（文字剪贴蒙版，text-shodow的应用，文字排版等…）

    .katex { display: inline-block; text-align: initial; } .katex { font-family: Consolas, Inconsolata, ...

  4. Java基础--对象的克隆

    文章转载自https://www.cnblogs.com/Qian123/p/5710533.html 阅读目录 为什么要克隆? 如何实现克隆 浅克隆和深克隆 解决多层克隆问题 总结 假如说你想复制一 ...

  5. HTTP那些事儿

    一.HTTP和HTTPSHTTP协议通常承载于TCP协议之上,在HTTP和TCP之间添加一个安全协议层(SSL或TSL),这个时候,就成了我们常说的HTTPS.HTTP是超文本传输协议,信息是明文传输 ...

  6. 查找最大或最小的 N 个元素

    使用内置的heapd模块 In [1]: import heapq In [2]: nums = [1,8, 2, 23, 7, -4, 18, 23, 42, 37, 2] In [3]: prin ...

  7. grpc 使用流程、使用技巧

    1.通过maven插件编译出java stub类. 2.对于批量调用的场景,我们可以使用FutureStub,对于普通的业务类型RPC,我们应该使用BlockingStub. 3.创建批量生成多个语言 ...

  8. 潭州课堂25班：Ph201805201 爬虫高级 第一课 pyspider框架 (课堂笔记）

    利用wheel安装 S1: pip install wheelS2: 进入www.lfd.uci.edu/~gohlke/pythonlibs/,Ctrl + F查找pycurl 这个包名是pycur ...

  9. Bracket 使用指南

    Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由Adobe 创建和维护,根据MIT许可证发布,支持 Windo ...

  10. SharePoint 2019 图文安装教程

    前言 SharePoint 2019刚刚发布,很多群友在寻找安装教程,霖雨正好也下载了进行体验,就把完整的安装过程做成图文教程,分享给大家了,有需要的人可以有个参考. 文章从创建虚拟机开始,可能有点啰 ...