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

个人博客已上线,欢迎前去访问评论!
无媛无故 - 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>

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

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

微信公众号:无媛无故

推荐阅读更多精彩内容

  • HTML相关 1、XHTML和HTML有什么区别 HTML是一种基本的WEB网页实际语言,XHTML是一种基于XM...
    杀破狼real阅读 96评论 0 2
  • 相关知识点 数据类型、运算、对象、function、继承、闭包、作用域、原型链、事件、RegExp、JSON、Aj...
    sandisen阅读 19,917评论 24 243
  • 原文https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html...
    梁行之阅读 207评论 0 0
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 74,775评论 12 116
  • 摇曳的灯光 响彻的歌声 迷离的眼神 舞动相思 句句別出新裁的歌词 倾诉不完人间爰恨情仇 来吧 亲爰的朋友们 来吧 ...
    花惜颜阅读 79评论 0 2