[JS]筆記18_AJAX2_iframe元素&AJAX跨域&JSONP跨域
阿新 • • 發佈：2018-10-31
1、iframe元素
- iframe元素會建立包含另外一個文件的內聯框架
常用屬性：
frameborder屬性規定是否顯示框架周圍的邊框 值：0/1
src屬性規定要顯示的文件的URL 可是：html、文字、ASP等
scrolling屬性規定是否顯示滾動條 值：yes no auto
<iframe frameborder=“0” src=“abc.html” scrolling=“auto”></iframe>- 跨域可以簡單的理解為從一個域名訪問另一個域名，出於安全考慮，瀏覽器不允許這麼做。
- 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-child.html程式碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe</title>
<style>
img{width:400px;}
</style 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裡，讓瀏覽器去獲取
- 最終獲得一個類似這樣的資料：
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>