JSONP跨域与百度搜索实现-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_32392057/article/details/60600845

JSONP实现跨域功能

通过动态创建<script>元素实现，使用时，使用时可以为src属性指定一个跨域URL.

实现百度搜索功能

学习要点

打开开发者工具中的Network选项，当搜索框中键入值时，能在其jQuery...方法JSON参数的s属性中获取到后台数据；
创建script元素，通过其src属性，访问链接；

效果图

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度一下</title>
    <meta name="keyword" content="" >
    <meta name="descript" content="" >
    <link rel="stylesheet" href="css/mystyle.css">
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .pic {
            width: 300px;
            height: 150px;
            display: block;
            margin: 80px auto 0;
        }
        .show {
            width: 650px;
            height: 40px;
            background: #eee;
            margin: 40px auto 0;
            position: relative;
        }
        .show .input {
            width: 550px;
            height: 36px;
            float: left;
            text-indent: 10px;
        }
        .show .btn {
            width: 96px;
            height: 40px;
            float: left;
            line-height: 40px;
            background: #3388ff;
            color: #fff;
            text-align: center;
            cursor: pointer;
        }
        .show .btn:hover {
            background: #317ef3;
        }
        .show .search {
            width: 552px;
            border: 1px solid #ddd;
            position: absolute;
            top: 40px;
            display: none;
        }
        .show ul li {
            list-style: none;
            width: 550px;
            height: 30px;
            line-height: 30px;
            text-indent: 10px;
            font-family: "微软雅黑";
        }
        .show ul li a {
            width: 552px;
            height: 30px;
            line-height: 30px;
            text-decoration: none;
            display: block;
            color: #000;
        }
        .show ul li a:hover {
            background: #ddd;
        }

    </style>
</head>
<body>
    <img src="image/1.png" class="pic" alt="">
    <div class="show">
        <input type="text" class="input">
        <div class="btn">百度一下</div>
        <div class="search" id="search">
            <ul>
            </ul>
        </div>
    </div>
    <script>
        var oInput = document.getElementsByTagName('input')[0];
        var oSearch = document.getElementById('search');
        var oUl = document.getElementsByTagName('ul')[0];

        var wuw = function (myJosn) {                      //函数名对应src的cb值   
            var arr = myJosn.s;
            oUl.innerHTML = "";
            for (var i = 0; i < arr.length; i++) {
                var oLi = document.createElement("li");
                oLi.innerHTML = '<a href=https://www.baidu.com/s?wd='+ arr[i]+'>'+ arr[i]+'</a>';
                oUl.appendChild(oLi);
                // console.log("ooo");
            }
        }

        oInput.onkeyup = function () {
            var text = this.value;

            if (text) {
                oSearch.style.display = "block";
            } else {
                oSearch.style.display = "none";
            }
            var oS = document.createElement("script");
            oS.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+text+'&json=1&p=3&sid=1434_21118_21931_22035_22074&req=2&csor=1&cb=wuw';   
            document.body.appendChild(oS);
        }
    </script>
</body>
</html>

实现显示当前IP地址，地理位置功能

这里写图片描述

效果图

这里写图片描述

function handleResponse(response) {
    alert("you're at IP address" + response.ip + ", which is in " + response.city + ", " + response.region_name);
}

var script = document.createElement("script");
script.src = "http://freegeoip.net/json/?callback=handleResponse";
document.body.insertBefore(script, document.body.firstChild);