JSONP实现跨域功能

来源：互联网发布：ssh项目源码编辑：程序博客网时间：2024/05/19 17:09

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);

0 0