/*

 * 我们使用了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. Socket进程通信机制

    1.Socket通常称为“套接字”,用于描述IP地址和端口,是一个通信链的句柄. 2.应用程序通过套接字向网络发出请求或者应答网络请求. 3.Socket既不是一个程序,也不是一种协议,其只是操作系统 ...

  2. moodle3.15+,mysql完全的Unicode支持配置

    https://docs.moodle.org/dev/Releases,moodle个版本升级的主要内容和改动 在windows是mysql.ini  linux 下是mysql.cnf 因为MyS ...

  3. 《Gradle权威指南》--自定义Android Gradle工程

    No1: minSdkVersion public void minSdkVersion(int minSdkVersion){ setMinSdkVersion(minSdkVersion); } ...

  4. ubuntu18.04 lts重装VMware Tools实现主机文件共享等功能

    ubuntu18.04 lts重装VMware Tools实现主机文件共享等功能 在VMWare 14.x上安装ubunuu18.04 lts后发现,可以实现全屏显示,但是没有与主机共享文件的功能,然 ...

  5. SpringMvc @ResponseBody

    一.@Response使用条件 二. @Response在最小配置.jackson的jar包情况下,json中包含的日期类型字段都是以时间戳long类型返回 三. Jack序列化对象转为JSON的限制 ...

  6. Flask使用SQLAlchemy两种方式

    一.SQLAlchemy和Alembic 主要使用原生的SQLAlchemy进行数据库操作和使用Alemic进行数据库版本控制 I 创建数据库主要有三个步骤 创建表的父类/数据库连接/Session ...

  7. Python学习——深浅拷贝

    1.对于 数字 和 字符串 而言,赋值.浅拷贝和深拷贝无意义,因为其永远指向同一个内存地址. >>> import copy # ######### 数字.字符串 ######### ...

  8. flask-include标签使用标签

      [footer.html] <footer> 这是底部 </footer> [header.html] <style> .nav ul{ overflow: h ...

  9. loj#6076「2017 山东一轮集训 Day6」三元组 莫比乌斯反演 + 三元环计数

    题目大意: 给定\(a, b, c\),求\(\sum \limits_{i = 1}^a \sum \limits_{j = 1}^b \sum \limits_{k = 1}^c [(i, j) ...

  10. [Agc005D]K Perm Counting

    [Agc005D] K Perm Counting Description 糟糕爷特别喜爱排列.他正在构造一个长度为N的排列.但是他特别讨厌正整数K.因此他认为一个排列很糟糕,当且仅当存在至少一个i( ...