GET和POST的区别

发表于 2017-11-03

GET和POST的区别

最直观的区别就是GET把参数包含在URL中，POST通过request body传递参数

‘标准答案’

GET在浏览器回退时是无害的，而POST会再次提交请求。
GET产生的URL地址可以被Bookmark，而POST不可以。
GET请求会被浏览器主动cache，而POST不会，除非手动设置。
GET请求只能进行url编码，而POST支持多种编码方式。
GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
GET请求在URL中传送的参数是有长度限制的，而POST么有。
对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
GET参数通过URL传递，POST放在Request body中。

GET和POST是什么？HTTP协议中的两种发送请求的方法。

HTTP是什么？HTTP是基于TCP/IP的关于数据如何在万维网中如何通信的协议.

HTTP的底层是TCP/IP。所以GET和POST的底层也是TCP/IP，也就是说，GET/POST都是TCP链接。GET和POST能做的事情是一样一样的。你要给GET加上request body，给POST带上url参数，技术上是完全行的通的。

GET和POST本质上就是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。

GET产生一个TCP数据包；POST产生两个TCP数据包。

对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；
而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。

icomoon生成字体图标的方法

发表于 2017-10-18

icomoon生成字体图标的方法

进入icomoon官网地址.
新建图集
上传svg图片一般由公司UI提供，注意 svg要是path来画，其他格式无法有效生成；上传完毕后，选中上传的svg图然后点击右下角的生成字体
生成字体后这些字体的名字可以自己重新命名修改，最后打包下载，就可以引入到自己的项目当中去了。

JS原型&&闭包

发表于 2017-10-18

学习总结JS原型&&闭包

一、一切都是对象

先分析下数据类型

值类型
- undefined
- number
- string
- boolean
引用类型
- 函数
- 数组
- 对象
- null
- new Number()

值类型的类型判断用typeof，引用类型的类型判断用instanceof.
一切（引用类型）都是对象，对象是属性的集合.

二、函数与对象的关系

对象都是通过函数创建的

三、 prototype原型

每个函数都有一个属性叫做prototype。这个prototype的属性值是一个对象，默认的只有一个叫做constructor的属性，指向这个函数本身。

function Fn() {} 
Fn.prototype.name = 'taoge';
Fn.prototype.age = 99;
var fn = new Fn();
console.log(fn.name);
console.log(fn.age);

Fn是一个函数，fn对象是从Fn函数new出来的，这样fn对象就可以调用Fn.prototype中的属性。
因为每个对象都有一个隐藏的属性proto，这个属性引用了创建这个对象的函数的prototype。
即fn.(下划线)proto(下划线) === Fn.prototype。

四、隐式原型

每个对象都有一个proto 称为隐式原型
每个对象都有一个proto属性，指向创建该对象的函数的prototype。
Object.prototype确实一个特例——它的proto指向的是null。
每一个实例也有一个constructor属性，默认调用prototype对象的constructor属性。

原生ajax & JSONP

发表于 2017-10-18

直接撸代码

封装方法：

function ajax(options) {
    options = options || {};
    options.type = (options.type || "GET").toUpperCase();
    options.dataType = options.dataType || "json";
    var params = formatParams(options.data);

    //创建 - 非IE6 - 第一步
    if (window.XMLHttpRequest) {
        var xhr = new XMLHttpRequest();
    } else { //IE6及其以下版本浏览器
        var xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }

    //连接 和 发送 - 第二步
    if (options.type == "GET") {
        xhr.open("GET", options.url + "?" + params, true);
        xhr.send(null);
    } else if (options.type == "POST") {
        xhr.open("POST", options.url, true);
        //设置表单提交时的内容类型
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(params);
    }

    //接收 - 第三步
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
                options.success && options.success(xhr.responseText, xhr.responseXML);
            } else {
                options.error && options.error(xhr.status);
            }
        }
    }
}
//格式化参数
function formatParams(data) {
    var arr = [];
    for (var name in data) {
        arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
    }
    arr.push(("v=" + Math.random()).replace(".", ""));
    console.log(arr);
    return arr.join("&");
}

请求实例：

ajax({
    url: "http://www.xxx.com/app/index",              //请求地址
    type: "get",                       //请求方式
    data: { page: "page" },        //请求参数
    dataType: "json",
    success: function (response, xml) {
        // 此处放成功后执行的代码
        console.log(JSON.parse(response))
    },
    error: function (status) {
        // 此处放失败后执行的代码
    }
});

JSONP

JSONP的核心是动态添加script标签来调用服务器提供的js脚本

function jsonp(options) {
    options = options || {};
    if (!options.url || !options.callback) {
        throw new Error("参数不合法");
    }

    //创建 script 标签并加入到页面中
    var callbackName = ('jsonp_' + Math.random()).replace(".", "");
    var oHead = document.getElementsByTagName('head')[0];
    options.data[options.callback] = callbackName;
    var params = formatParams(options.data);
    var oS = document.createElement('script');
    oHead.appendChild(oS);

    //创建jsonp回调函数
    window[callbackName] = function (json) {
        oHead.removeChild(oS);
        clearTimeout(oS.timer);
        window[callbackName] = null;
        options.success && options.success(json);
    };

    //发送请求
    oS.src = options.url + '?' + params;

    //超时处理
    if (options.time) {
        oS.timer = setTimeout(function () {
            window[callbackName] = null;
            oHead.removeChild(oS);
            options.fail && options.fail({ message: "超时" });
        }, time);
    }
};

//格式化参数
function formatParams(data) {
    var arr = [];
    for (var name in data) {
        arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[i]));
    }
    return arr.join('&');
}

ajax与jsonp本质上不是一个东西，ajax的核心是通过XMLHttpRequest对象来获取非本页的内容，而jsonp则是通过动态创建script标签来获取服务器端的js脚本。

ajax与jsonp的本质区别不在于是否跨域，ajax通过服务器端代理（浏览器请求同源服务器，再由后者请求外部服务）也一样可以实现跨域，jsonp本身也可以获取同源的数据。

同源策略

javascript只能访问与包含他的文档在同一页面下的内容。

即主机名、协议、端口相同。

//下表给出了相对http://store.company.com/dir/page.html同源检测的示例:
//URL    结果    原因
http://store.company.com/dir2/other.html           成功     
http://store.company.com/dir/inner/another.html    成功     
https://store.company.com/secure.html              失败    协议不同
http://store.company.com:81/dir/etc.html           失败    端口不同
http://news.company.com/dir/other.html             失败    主机名不同

GET和POST的区别

GET和POST本质上就是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。

GET产生一个TCP数据包；POST产生两个TCP数据包。

icomoon生成字体图标的方法

学习总结JS原型&&闭包

一、 一切都是对象

二、 函数与对象的关系

三、 prototype原型

四、 隐式原型

JSONP

同源策略

一、一切都是对象

二、函数与对象的关系

四、隐式原型