zoukankan      html  css  js  c++  java
  • 原生JS的面试题:jsonp的实现原理

    一、什么是跨域访问

    跨域访问就是跨域名访问,即A网站的网页在代码上访问了B网站的页面

    由于同源策略(浏览器的安全机制),所以,AJAX不能实现跨域访问

    同源策略:JavaScript或Cookie只能访问同域名下的内容

    同样的协议,同样的地址,同样的端口。

    二、jsonp

    JSONP(JSON with Padding)可用于解决主流浏览器的跨域数据访问的问题)。跟JSON没有关系。

    JSONP是如何实现跨域访问的?本质上是利用HTML元素的src属性都可以跨域的思路来解决的。

    如:img,script,iframe等标记的src属性的值都可以赋成其它域名的合法地址。

    三、jsonp的代码:

    let scriptDom = document.createElement("script");
    scriptDom.src="请求地址?callback=函数名";
    document.body.appendChild(scriptDom);

    四、获取淘宝的搜索关键字

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>百度跨域获取数据</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            ul {
                list-style: none;
            }
            #logo {
                margin: 30px auto;
                display: block;
                280px;
            }
            form[name="search-form"] {
                display: block;
                margin: 10px auto 0;
                 600px;
                font-size: 0;
            }
            input[name="search-content"] {
                 500px;
                height: 40px;
                padding: 0 10px;
                border: 1px solid #ccc;
                outline: none;
                box-sizing: border-box;
                vertical-align: bottom;
            }
            input[name="search-content"]:focus {
                border-color: #3385ff;
            }
             input[type="submit"] {
                 100px;
                height: 40px;
                border: none;
                outline: none;
                color: #fff;
                background: #3385ff;
            }
            #search-list {
                margin: 0 auto;
                 600px;
            }
            #search-list li {
                padding: 0 10px;
                line-height: 30px;
                background: #eee;
                border-bottom: 1px dashed #ccc;
            }
        </style>
    </head>
    <body>
        <img src="logo.png" id="logo">
        <form action="javascript:;" name="search-form">
            <input type="text" name="search-content">
            <input type="submit" value="百度一下">
        </form>
        <ul id="search-list">
    		
    	</ul>
        <script>
            var oSearchList = document.getElementById('search-list');
            var oSearchForm = document.forms['search-form'];
            var oSearchContent = oSearchForm.elements['search-content'];
     
            oSearchContent.oninput = function () {
                var sVal = this.value;
                oSearchList.innerHTML = '';
                if(sVal !== '') {
                    var oScript = document.createElement('script');
                    oScript.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + sVal + '&json=1&p=3&sid=1438_24869_21080_18560_17001_25177_22160&req=2&bs=1%2B&pbs=1%2B&csor=2&pwd=1%3D&cb=callback&_=1511334117083';
                    document.body.appendChild(oScript);
                }
            };
    		
            // 声明回调函数
            function callback(data) {
    			console.log(data);
                data.s.forEach((v) => {
                    var oLi = document.createElement('li');
                    oLi.innerHTML = v;
                    oSearchList.appendChild(oLi);
                });
            }
        </script>
    </body>
    </html>
    

    四、面试题:请问jsonp是不是ajax中实现跨域访问的技术

    答:jsonp不是AJAX中实现跨域访问的技术

    因为:

    1、jsonp没有使用XMLHttpRequest对象。

    2、jsonp只是在一种跨域的技巧。

    3、jsonp只支持Get方式

    五、面试题:jsonp和json的区别?

    1、jsonp和json根本就没有关系

    2、jsonp是跨域访问的技巧

    3、json是描述数据的格式

    由于按照jsonp的这种方式跨域访问时,好像可以利用javascript和服务器端交互,能达到AJAX中XMLHttpRequest对象同样的效果。所以,人们总是把

    jsonp和AJAX联系在一起。

  • 相关阅读:
    从Oracle提供两种cube产品说开
    Sql Server DWBI的几个学习资料
    Unload Oracle data into text file
    初学Java的几个tips
    我常用的Oracle知识点汇总
    benefits by using svn
    如何在windows上使用putty来显示远端linux的桌面
    building commercial website using Microsoft tech stack
    Understand Thread and Lock
    Update google calendar by sunbird
  • 原文地址:https://www.cnblogs.com/AaronNotes/p/14497264.html
Copyright © 2011-2022 走看看