每天10个前端知识点：ajax & jsonp

2017-02-18 本文已影响1108人 WangChloe

个人博客已上线，欢迎前去访问评论！
无媛无故 - wangchloe的个人博客

以下内容若有问题烦请即时告知我予以修改，以免误导更多人。

嗯！正式准备一日一更了，大家做好准备。

1. Ajax前导

(1) XMLHttpRequest

*兼容：除IE6
ie6 -> 报错

(2) readyState就绪状态

0 uninitialized ajax 对象创建成功
1 loading 打开连接(已经建立连接)
2 loaded 发送数据
3 interactive 下载内容
4 complete 完成

(3) HTTP状态码

重点

200 ok
304 not modified
403 Forbidden
404 Not found
405 Not allowed
414 Request-URI Too Long
500 Internal Server Error
502 Bad Gateway

附：全部状态码
'100': 'Continue',
'101': 'Switching Protocols',
'102': 'Processing',
'200': 'OK',
'201': 'Created',
'202': 'Accepted',
'203': 'Non-Authoritative Information',
'204': 'No Content',
'205': 'Reset Content',
'206': 'Partial Content',
'207': 'Multi-Status',
'208': 'Already Reported',
'226': 'IM Used',
'300': 'Multiple Choices',
'301': 'Moved Permanently',
'302': 'Found',
'303': 'See Other',
'304': 'Not Modified',
'305': 'Use Proxy',
'307': 'Temporary Redirect',
'308': 'Permanent Redirect',
'400': 'Bad Request',
'401': 'Unauthorized',
'402': 'Payment Required',
'403': 'Forbidden',
'404': 'Not Found',
'405': 'Method Not Allowed',
'406': 'Not Acceptable',
'407': 'Proxy Authentication Required',
'408': 'Request Timeout',
'409': 'Conflict',
'410': 'Gone',
'411': 'Length Required',
'412': 'Precondition Failed',
'413': 'Payload Too Large',
'414': 'URI Too Long',
'415': 'Unsupported Media Type',
'416': 'Range Not Satisfiable',
'417': 'Expectation Failed',
'418': 'I'm a teapot',
'421': 'Misdirected Request',

'422': 'Unprocessable Entity',
'423': 'Locked',
'424': 'Failed Dependency',
'425': 'Unordered Collection',
'426': 'Upgrade Required',
'428': 'Precondition Required',
'429': 'Too Many Requests',
'431': 'Request Header Fields Too Large',
'451': 'Unavailable For Legal Reasons',
'500': 'Internal Server Error',
'501': 'Not Implemented',
'502': 'Bad Gateway',
'503': 'Service Unavailable',
'504': 'Gateway Timeout',
'505': 'HTTP Version Not Supported',
'506': 'Variant Also Negotiates',
'507': 'Insufficient Storage',
'508': 'Loop Detected',
'509': 'Bandwidth Limit Exceeded',
'510': 'Not Extended',
'511': 'Network Authentication Required'

(4) ajax提交方式

GET 数据在open提交
载体：url
POST 数据在send提交
载体：请求头(setRequestHeader)

2. Ajax

原生编写ajax.js

<script>
    function ajax(json) {
        // url, data, type, success, error, time, loading, complete
        //路径，数据，方式，成功回调函数，失败回调函数，超时时间，等待动画，完成后的回调函数
        // data数据格式为json

        json = json || {};
        if(!json.url) {
            alert('url is null!');
            return;
        }

        json.data = json.data || {};
        json.type = json.type || 'get'; // 默认提交方式为GET
        json.time = json.time || 3000;  // 默认超时时间为3000ms

        var timer = null;
        clearTimeout(timer);

        // 1. 获得ajax
        if(window.XMLHttpRequest) {  // 查看当前浏览器XMLHttpRequest是否是全局变量
            var oAjax = new XMLHttpRequest();
        } else {
            var oAjax = new ActiveXObject('Microsoft.XMLHTTP');  // IE6，传入微软参数
        }

        switch(json.type.toLowerCase()) {
            case 'get':
                // 2. 打开地址
                oAjax.open('GET', json.url + '?' + jsonToURL(json.data), true);  // 提交方式(大写)，url，是否异步
                // 3. 发送数据
                oAjax.send();
                break;
            case 'post':
                // 2. 打开地址
                oAjax.open('POST', json.url, true);  // 提交方式(大写)，url，是否异步
                oAjax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');  // 设置请求头
                // 3. 发送数据
                oAjax.send(jsonToURL(json.data));

        }

        json.loading && json.loading();  // 执行等待动画

        // 4. 接收数据
        oAjax.onreadystatechange = function() {  // 监控状态
            if(oAjax.readyState == 4) {
                json.complete && json.complete();
                if(oAjax.status >= 200 && oAjax.status < 300 || oAjax.status == 304) {
                    json.success && json.success(oAjax.responseText);  // 执行成功的回调函数，responseText为响应内容
                } else {
                    json.error && json.error(oAjax.status);  // 执行失败的回调函数
                }
                clearTimeout(timer);
            }
        };

        // 网络超时时执行
        timer = null;
        timer = setTimeout(function() {
            console.log('请求超时');
            oAjax.onreadystatechange = null;
        }, json.time);

    }

    function jsonToUrl(json) {
        var arr = [];
        for(var name in json) {
            arr.push(name + '=' + json[name]);
        }
        return arr.join('&');
    }
</script>

3. Ajax服务器相关

oAjax.getAllResponseHeaders(); 获取ajax服务全部信息
oAjax.getResponseHeader('xxx'); 获取ajax服务器相关信息

4. Ajax2.0事件

oAjax.onload 替代oAjax.onreadystatechange
oAjax.onerror 发生错误(网络层级的错误才会触发)
oAjax.onprogress 上传进度(ev.loaded/ev.total)
oAjax.onabort 中断

5. 关于锚点hash

应用：刷新保留分页页码

cookie只有4k左右，此处应用hash保留分页页码

<style>
    a{
        display: block;
        width: 50px;
        height: 50px;
        border:1px solid #000;
        text-align: center;
        line-height: 50px;
        text-decoration: none;
        float: left;
        margin:10px;
    }
    a:hover{
        background: #f60;
        color: #fff;
    }
    a.active{
        background: #f60;
        color: #fff;
    }
</style>

    <a href="javascirpt:;" class="active">1</a>
    <a href="javascirpt:;">2</a>
    <a href="javascirpt:;">3</a>
    <a href="javascirpt:;">4</a>
    <a href="javascirpt:;">5</a>

<script>
    window.onload = function() {
        var aA = document.getElementsByTagName('a');
        var hash = window.location.hash;
        var index = hash.substring(1);
        if(hash) {
            tab(index-1);
        }

        for (var i = 0; i < aA.length; i++) {
            aA[i].index = i;
            aA[i].onclick = function() {
                var index = this.index;
                tab(index);
                window.location.hash = '#' + (this.index + 1);
            };
        }

        function tab(index) {
            for (var i = 0; i < aA.length; i++) {
                aA[i].className = '';
            }
            aA[index].className = 'active';
        }
    };
</script>

6. Ajax跨域

同源策略：Ajax只能同域名下取数据

js跨域请求方式

jsonp(json with padding)
修改document.domain跨子域
window.name
H5 window.postMessage(IE6 7不支持)
CORS(跨域资源共享) 设置header: Access-Control-Allow-Origin
nginx反向代理

JavaScript跨域总结与解决办法

7. jsonp前导

jsonp原理
动态创建script标签，利用script:src可以跨域的属性跨域
不需要服务器环境

jsonp接口测试网址

8. jsonp

原生编写jsonp.js

<script>

    function jsonp(json) {
        // url, data, cbName, success
        // 路径，参数，回调函数名字，回调函数

        json = json || {};
        if(!json.url) {
            return;
        }
        json.data = json.data || {};
        json.cbName = json.cbName || 'cb';  // 默认回调函数名字为cb，回调函数名一般为cb或callback

        var fnNmae = 'jsonp_' + Math.random();
        fnName = fnName.replace('.', '');  // 定义随机函数名，但名内不能包含.

        // 全局函数防止与外部函数jsonp()重名
        window[fnName] = function(json2) {
            json.success && json.success(json2);
            oHead.removeChild(oS);
        };

        json.data[json.cbName] = fnName;
        var arr = [];
        for(var name in json.data) {
            arr.push(name + '=' + json.data[name]);
        }

        var oS = document.createElement('script');  // **动态创建script标签
        var oHead = document.getElementsByTagName('head')[0];
        oS.src = json.url + '?' + arr.join('&');  // 动态script的src属性为jsonp的路径
        oHead.appendChild(oS);  // 插入到<head>标签最末
    }

</script>

更多内容可以订阅本人微信公众号，一起开启前端小白进阶的世界！

公众号是坚持日更的，不发文的时候推送一些我觉得好用的前端网站或者看到的一些问题的解决方案，也更便于大家交流，就酱。

微信公众号：无媛无故