[JS]笔记18_AJAX2_iframe元素&AJAX跨域&JSONP跨域
来源:互联网 发布:qq windows phone版 编辑:程序博客网 时间:2024/05/16 15: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 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跨域
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>
0 0
- [JS]笔记18_AJAX2_iframe元素&AJAX跨域&JSONP跨域
- ajax学习笔记二-jsonp跨域
- jQuery Ajax jsonp 跨域
- jquery ajax跨域 jsonp
- ajax跨域jsonp
- jsonp解决ajax跨域
- jquery ajax jsonp 跨域
- ajax跨域jsonp处理
- ajax jsonp跨域
- ajax跨域?(jsonp)
- ajax 跨域 jsonp 处理
- ajax 跨域jsonp
- struts2 ajax jsonp跨域
- ajax jsonp 跨域
- jquery ajax jsonp 跨域
- ajax跨域jsonp详解
- jquery ajax跨域 jsonp
- Ajax跨域 ---jsonp
- 感知器 机器学习算法
- android手机通过蓝牙连接佳博打印机
- Git使用及团队合作
- 【如何正确使用const,static,extern】|那些人追的干货
- 下载量最高的 100 个 Laravel 扩展包推荐
- [JS]笔记18_AJAX2_iframe元素&AJAX跨域&JSONP跨域
- 欢迎使用CSDN-markdown编辑器
- $.each遍历json对象
- MongoDB之分页查询
- matlab曲线拟合
- tomcat/apache 日志 --定时分割文件
- nfs网络挂载
- 脉搏波相关概念及内容-记录整理
- iOS开发网络——数据缓存