/*

 * 我们使用了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. js获取宽度

    alert(window.screen.width );//浏览设备的分辨率(电脑.手机.平板等) alert(window.screen.availWidth );//浏览设备的实际可用宽度(电脑. ...

  2. HDU 1542 矩形面积并【离散化+线段树+扫描线】

    <题目链接> 题目大意: 给你n个矩形,求出它们面积的并. 解题分析: 此题主要用到了扫描线的思想,现将各个矩形的横坐标离散化,然后用它们离散化后的横坐标(相当于将矩形的每条竖线投影在x轴 ...

  3. caffe 利用VGG训练自己的数据

    写这个是因为有童鞋在跑VGG的时候遇到各种问题,供参考一下. 网络结构 以VGG16为例,自己跑的细胞数据 solver.prototxt: net: "/media/dl/source/E ...

  4. 安卓工作室 android studio 汉化后，报错。 设置界面打不开。Can't find resource for bundle java.util.PropertyResourceBundle, key emmet.bem.class.name.element.separator.label

    安卓工作室 android studio 汉化后,报错. 设置界面打不开. Android studio has been sinified and reported wrong.The setup ...

  5. BZOJ.3585.mex(线段树)

    题目链接 题意:多次求区间\(mex\). 考虑\([1,i]\)的\(mex[i]\),显然是单调的 而对于\([l,r]\)与\([l+1,r]\),如果\(nxt[a[l]]>r\),那么 ...

  6. Python3基础系列——枚举类型大揭秘

    为什么使用枚举 枚举类型是定义常量的一种最优选择. 常量的广义概念是:不变化的量 对于常量的通俗比喻--如同大山不被轻而易举地改变 地球上的重力加速度到海枯石烂也会改变 人们使用的常量是时间不很漫长的 ...

  7. C++ 引用 & 的详解

    转载来自:CSDNinsistGoGo  (http://blog.csdn.net/insistgogo/article/details/6655077) 引用的应用: 常引用: 语法: const ...

  8. 如何对MongoDB 3.2.7进行用户权限管理配置

    转自:https://www.jianshu.com/p/a4e94bb8a052 上次写了一篇在CentOS7上源码安装MongoDB 3.2.7,完成了MongoDB 3.2.7的安装,但需要应用 ...

  9. 第二章 flex输入输出结构

    对于一个词法分析程序,一般读取文件或者终端 一个默认lex程序大致看上去像这样 YY_BUFFER_STATE bp; extern FILE* yyin; ... whatever the prog ...

  10. 在windows下安装git中文版客户端并连接gitlab

    下载git Windows客户端 git客户端下载地址:https://git-scm.com/downloads 我这里下载的是Git-2.14.0-64-bit.exe版本 下载TortoiseG ...