[JS]笔记18_AJAX2_iframe元素AJAX跨域JSONP跨域-前端--易笔记-weiyer.com

　　核心提示：1、iframe元素1. iframe元素会创建包含另外一个文档的内联框架常用属性：frameborder属性规定是否显示框架周围的边框值：0/1src属性规定要显示的文档的URL 可是：html、...

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=/uploadfile/2016/1109/20161109103125549.jpg" alt="">
<p>及萨芬撒娇急死俺姐夫的拉萨就看谁拉的家里假的就撒了就家里开的奇偶撒娇</p>
</iframe>
<script>
    var tit=document.getElementById('tit');
    alert(tit.innerHTML);
</script>
</body>
</html>

2、AJAX跨域

ajax跨域： ajax本身并不能跨域！

实现跨越的方式：

1.可以让服务器去别的网站获取内容然后返回页面

2.给页面的ajax一个url，ajax把这个url传给服务器，由服务器去访问跨域地址

GET与POST区别

GET：

更常用，更方便

性能好

明文发送数据，没有POST安全

传输数据大小有限制：数据通过URL传递，但是URL有一定长度限制。

POST：

使用相对较少

性能只有GET的1/3左右

比GET稍微安全一点

没有传输数据大小限制

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里，让浏览器去获取
最终获得一个类似这样的数据：
({“name”:”Jack”,”from”:”加勒比海”});
callback是页面存在的回调方法，参数就是想得到的json
回调方法要遵从服务端的约定一般是用 callback 或者 cb

1-jsonp_API说明：

百度关键词：
url地址:https://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地址:https://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地址:https://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>
<p id="box">
    <input id="ipt" type="text">
    <ul id="list">
        <!-- <li>123fd</li>
        <li>213213</li> -->
    </ul>
</p>
<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='https://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>
<p id="box">
    <h3>IP地址查询</h3>
    <button id="btn">查询</button>
    <ul id="list">
    </ul>
</p>
<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='https://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>
<p id="box">
    <h3>电话号码查询</h3>
    <input id="ipt" type="text">
    <!-- 输入完整后进行查询 -->
    <button id="btn">查询</button>
    <ul id="list">
    </ul>
</p>
<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='https://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>

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

时间：2016/11/9 10:01:00 点击：

1、iframe元素

2、AJAX跨域

ajax跨域： ajax本身并不能跨域！

GET与POST区别

get 和 post 选用：

3、JSONP跨域

本类热门

本类推荐

本类固顶

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

时间：2016/11/9 10:01:00 点击：

1、iframe元素

2、AJAX跨域

ajax跨域： ajax本身并不能跨域！

GET与POST区别

get 和 post 选用：

3、JSONP跨域

您可能感兴趣的文章

相关评论

发表我的评论

本类热门

本类推荐

本类固顶