[JS]笔记18_AJAX2_iframe元素&AJAX跨域&JSONP跨域

其他 2018-10-31 17:42:28 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/express_yourself/article/details/53067329

1、iframe元素

  1. iframe元素会创建包含另外一个文档的内联框架
    常用属性：
    frameborder属性规定是否显示框架周围的边框 值：0/1
    src属性规定要显示的文档的URL 可是：html、文本、ASP等
    scrolling属性规定是否显示滚动条 值：yes no auto
<iframe frameborder=“0” src=“abc.html” scrolling=“auto”></iframe>
  1. 跨域可以简单的理解为从一个域名访问另一个域名，出于安全考虑，浏览器不允许这么做。
  2. img、script、iframe等元素的src属性可以直接跨域请求资源

iframe框架demo:

iframe-index代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe</title>
<style>
iframe{
    width:520px;
    height:300px;
}
</style>
</head>
<body>
<h1>主页内容</h1>
<p>使肌肤的离开是解放军就打开链接发到了三家就看电视啦积分技术开了房间</p>
<iframe src="iframe-child.html" frameborder="0" scrolling='auto'></iframe>
</body>
</html>

iframe-child.html代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe</title>
<style>
img{width:400px;}
</style>
</head>
<body>
<h2 id="tit">子页面内容</h2>
<img src="http://www.pptbz.com/pptpic/UploadFiles_6909/201203/2012031220134655.jpg" alt="">
<p>及萨芬撒娇急死俺姐夫的拉萨就看谁拉的家里假的就撒了就家里开的奇偶撒娇</p>
</iframe>
<script>
    var tit=document.getElementById('tit');
    alert(tit.innerHTML);
</script>
</body>
</html>

2、AJAX跨域

  1. ajax跨域： ajax本身并不能跨域！
    实现跨越的方式：
    1.可以让服务器去别的网站获取内容然后返回页面
    2.给页面的ajax一个url，ajax把这个url传给服务器，由服务器去访问跨域地址

  2. GET与POST区别
    GET：
    更常用，更方便
    性能好
    明文发送数据，没有POST安全
    传输数据大小有限制：数据通过URL传递，但是URL有一定长度限制。
    POST：
    使用相对较少
    性能只有GET的1/3左右
    比GET稍微安全一点
    没有传输数据大小限制

  3. get 和 post 选用：
    • 接口允许用哪个就用哪个
    • 接口两个都允许，首选用get
    • 当遇到需要传递密码等私密信息的时候，选择POST
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//POST请求需添加http头

3、JSONP跨域

  • jsonp就是利用script标签的跨域能力请求资源
  • 既然叫jsonp，显然目的还是json，而且是跨域获取
  • 利用js创建一个script标签，把json的url赋给script的scr属性，把这个script插入到dom里，让浏览器去获取
  • 最终获得一个类似这样的数据：
    callback({“name”:”Jack”,”from”:”加勒比海”});
  • callback是页面存在的回调方法，参数就是想得到的json
  • 回调方法要遵从服务端的约定一般是用 callback 或者 cb

1-jsonp_API说明：

百度关键词：
url地址:http://suggestion.baidu.com/su?wd=

-----请求参数-----
   cb      回调函数
   wd      关键词

-----返回数据-----

JSON返回示例：
{
   q: "123",
   p: false,
   s: [
    0: "12306"
    1: "12306铁路客户服务中心"
    2: "12306火车票网上订票官网"
    3: "12333"
    4: "12333社保查询网"
    5: "12306验证码识别"
    6: "123网址之家"
    7: "12345"
    8: "123456hd"
    9: "12308"
       ]


电话号码查询：
url地址:http://tcc.taobao.com/cc/json/mobile_tel_segment.htm
-----请求参数-----
 callback    回调函数
   tel       电话号码
-----返回数据-----
JSON返回示例：
 {
    mts:'1352055',
    province:'北京',
    catName:'中国移动',
    telString:'13520559717',
    areaVid:'29400',
    ispVid:'3236139',
    carrier:'北京移动'
 }


IP地址查询：
url地址:http://freegeoip.net/json/
-----请求参数-----
 callback    回调函数
-----返回数据-----

JSON返回示例：
  {
    city: "北京"
    country_code: "CN"
    country_name: "中国"
    ip: "124.207.4.162"
    latitude: 39.9289
    longitude: 116.3883
    metro_code: 0
    region_code: "11"
    region_name: "北京市"
    time_zone: "Asia/Shanghai"
    zip_code: ""
  }

2-jsonp-关键词查询：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsonp-123</title>
<style>
*{margin:0;padding:0;list-style: none;}
#box{width:500px;margin:30px auto 0;padding:10px;background: #e3e3e3;}
#ipt{width:496px;line-height: 30px;font-size: 18px;color:blue;}
#list{margin-top:10px;background: #e3e3e3;}
#list li{line-height: 26px;font-size: 16px;color: blue;padding: 0 10px;}
#list li:hover{background: #ccc;}
</style>
</head>
<body>
<div id="box">
    <input id="ipt" type="text">
    <ul id="list">
        <!-- <li>123fd</li>
        <li>213213</li> -->
    </ul>
</div>
<script>
    var ipt=document.getElementById('ipt');
    var list=document.getElementById('list');
    var Script=null;//Script初始化为空对象
    ipt.onkeyup=function(){//键盘松开触发事件
        if (Script) {//清理前面创建的Script
            document.body.removeChild(Script);
        }
        Script=document.createElement('script');//创建一个新的script节点
        //json的url赋给script的scr属性
        Script.src='http://suggestion.baidu.com/su?wd='+ipt.value+'&cb=callback&_='+new Date().getTime();
        document.body.appendChild(Script);//创建好的节点插入到页面中
    }
    //callback是页面存在的回调方法，参数就是想得到的json
    function callback(json){
        list.innerHTML='';
        for (var i = 0; i < json.s.length; i++) {
            list.innerHTML+='<li>'+json.s[i]+'</li>';
        }
    }
    /*["12306铁路客户服务中心", "12306验证码识别", "12306火车票网上订票官网", "12306退票手续费", "12306.cn", "12306身份信息待核验要多久",…]*/
</script>
</body>
</html>
<!--  jsonp跨域思想：
利用js创建一个script标签，把json的url赋给script的scr属性，把这个script插入到dom里，让浏览器去获取 -->

3-jsonp-IP地址查询：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsonp-IP地址查询</title>
<style>
*{margin:0;padding:0;list-style: none;}
#box{width:500px;margin:30px auto 0;padding:10px;background: #e3e3e3;}
#list{margin-top:10px;background: #e3e3e3;}
#list li{line-height: 26px;font-size: 16px;color: blue;padding: 0 10px;}
#list li:hover{background: #ccc;}
</style>
</head>
<body>
<div id="box">
    <h3>IP地址查询</h3>
    <button id="btn">查询</button>
    <ul id="list">
    </ul>
</div>
<script>
    var list=document.getElementById('list');
    var btn=document.getElementById('btn');
    var Script=null;
    btn.onclick=function(){
        if (Script) {
            document.body.removeChild(Script);
        }
        Script=document.createElement('script');
        Script.src='http://freegeoip.net/json/?callback=mycallback&_='+new Date().getTime();
        document.body.appendChild(Script);
    }
    function mycallback(json){
        list.innerHTML='';
        list.innerHTML='<li>城市：'+json.city+'，IP：'+json.ip+'，区域：'+json.time_zone+'，地区：'+json.region_name+'</li>';
    }
    /*{ip: "124.207.4.161", country_code: "CN", country_name: "China", region_code: "11",…}*/
</script>
</body>
</html>

4-jsonp-电话查询：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsonp-电话号码</title>
<style>
*{margin:0;padding:0;list-style: none;}
#box{width:500px;margin:30px auto 0;padding:10px;background: #e3e3e3;}
#ipt{width:496px;line-height: 30px;font-size: 18px;color:blue;}
#list{margin-top:10px;background: #e3e3e3;}
#list li{line-height: 26px;font-size: 16px;color: blue;padding: 0 10px;}
#list li:hover{background: #ccc;}
</style>
</head>
<body>
<div id="box">
    <h3>电话号码查询</h3>
    <input id="ipt" type="text">
    <!-- 输入完整后进行查询 -->
    <button id="btn">查询</button>
    <ul id="list">
    </ul>
</div>
<script>
    var ipt=document.getElementById('ipt');
    var list=document.getElementById('list');
    var btn=document.getElementById('btn');
    var Script=null;
    btn.onclick=function(){
        if (Script) {
            document.body.removeChild(Script);
        }
        Script=document.createElement('script');
        Script.src='http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel='+ipt.value+'&callback=mycallback&_='+new Date().getTime();
        document.body.appendChild(Script);
    }
    function mycallback(json){
        list.innerHTML='';
        list.innerHTML='<li>'+'号段：'+json.mts+'，省份：'+json.province+'，运营商：'+json.catName+'，地区运营商：'+json.carrier+'</li>';
        /*号段：1846358，省份：山东，运营商：中国移动，地区运营商：山东移动*/
    }
</script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/express_yourself/article/details/53067329
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022