引语

ajax 允许在不干扰 web 应用程序的显示和行为的情况下在后台进行数据检索。Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索。由于受到浏览器的限制，该方法不允许跨域通信。克服该限制更理想方法是在 Web 页面中插入动态脚本元素，该页面源指向其他域中的服务 URL 并且在自身脚本中获取数据，我们可用JSONP 实现，所谓的 JSONP 服务是一种带有附加功能的 Web 服务，该功能支持在特定于用户的函数调用中打包返回的 JSON 数据。这种方法依赖于接受回调函数名作为请求参数的远程服务。然后该服务生成对该函数的调用，将 JSON 数据作为参数传递，在到达客户端时将其插入 Web 页面并开始执行。
 
一、模仿百度搜索栏
 
１、在Google Chrome获取百度的 API步骤：

打开百度首页

按下F12  审查元素

即：http://suggestion.baidu.com/su?wd=关键字&cb=成功后回调函数&t=时间戳
 
<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

#div1{width:500px; margin:50px auto; height:25px;}

#text1{ width:500px; height:25px;}

#ul1{ width:500px; margin:50px auto; border:1px solid #e5e5e5;}

</style>

<script type="text/javascript">

function succ(json){

var oUl=document.getElementById("ul1");

oUl.innerHTML="";

for(var i=0; i<json.s.length; i++){

var oLi=document.createElement("li");

oLi.innerHTML=json.s[i];

oUl.appendChild(oLi);

}

}

window.onload=function (){

var oTxt=document.getElementById("text1");

var oS=null;

oTxt.onkeyup=function (){

if (oS){

document.body.removeChild(oS);

}

oS=document.createElement("script");

var url="http://suggestion.baidu.com/su?wd="+oTxt.value+"&cb=succ";

oS.src=url;

document.body.appendChild(oS);

}

}

</script>

</head>

<body>

<div id="div1">

<input type="text" id="text1"/>

</div>

<ul id="ul1">

</ul>

</body>

</html>
 
 
 

使用JSONP实现跨域通信的更多相关文章

  1. 使用 JSONP 实现跨域通信

    简介 Asynchronous JavaScript and XML (Ajax) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的 ...

  2. 跨域通信的解决方案JSONP

    在web2.0时代,熟练的使用ajax是每个前端攻城师必备的技能.然而由于受到浏览器的限制,ajax不允许跨域通信. JSONP就是就是目前主流的实现跨域通信的解决方案. 虽然在在jquery中,我们 ...

  3. JavaScript 跨域：window.postMessage 实现跨域通信

    JavaScript 跨域方式实现方式有很多,之前,一篇文章中提到了 JSONP 形式实现跨域.本文将介绍 HTML5 新增的 api 实现跨域:window.postMessage . 1 othe ...

  4. 【JavsScript】父子页面之间跨域通信的方法

    由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇“跨域,不再纠结” 开始照着尝试时 ...

  5. 【JavaScript】父子页面之间跨域通信的方法

    由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇“跨域,不再纠结” 开始照着尝试时 ...

  6. JavaScript系列----AJAX机制详解以及跨域通信

    1.Ajax 1.1.Ajax简介 Ajax简介这一部分我们主要是谈一下ajax的起源,ajax是什么?因为这些是跟技术无关的.所以,大多细节都是一笔带过. Ajax的起源? Ajax一词源于2005 ...

  7. 使用JSONP实现跨域

    什么是跨域? 简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即"同源策略".而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通 ...

  8. JSONP解决跨域方案

    一.jsonp原理 本质并不是ajax,只是执行了跨域js,所以该方式只支持get方式 html中,所有带src属性的标签都可以跨域script img iframe 所以,可以通过script加载其 ...

  9. 【13】javascript跨域通信

    javascript跨域通信 同源:两个文档同源需满足 协议相同 域名相同 端口相同 跨域通信方法: 01,通过设置img,script,link,iframe元素的src,href属性为目标url. ...

随机推荐

  1. 十三、java_GUI

    目录: 一.AWT 二.组件和容器 三.布局管理器 四.事件处理 五.java图形 六.window事件 一.AWT AWT(Abstract Window Toolkit)包括了很多类和接口,用于J ...

  2. 简易ATM机

    简易ATM机(代码如下): /* * 功能:简易银行系统 */package day8; import java.util.Scanner; /** * * @FengYan Huang Admini ...

  3. Spring+quartz 实现定时任务job集群配置【原】

    为什么要有集群定时任务? 因为如果多server都触发相同任务,又同时执行,那在99%的场景都是不适合的.比如银行每晚24:00都要汇总营业额.像下面3台server同时进行汇总,最终计算结果可能是真 ...

  4. 动态生成js数据Response.Expires=1440竟然无效？

    项目当中有一些数据,比如多语言翻译,要求做语言包,起初当然是做成i18n.js文件,但是每个阶段版本更新都会增加一些key,那么发布的时候只能给<script>的src增加?2018091 ...

  5. LL(1)文法分析表的构造和分析过程示例

    在考完编译原理之后才弄懂,悲哀啊.不过懂了就好,知识吗,不能局限于考试. 文法: E→TE' E'→+TE'|ε T→FT ' T'→*FT'|ε F→id| (E) 一.首先判断是不是 LL(1)文 ...

  6. git回滚远程仓库代码/错提master分支的恢复

    前言 今天周五了,刚接了个新微服务模块,下班前高高兴兴开发完,提交git代码,jenkins发布到测试环境.突然看到一个提示 我最近提的代码呢?!! 想到可能会提错仓库,转念一想,不对呀,我怎有这么高 ...

  7. Lucene Query In Kibana

    1. Terms 一个查询由词条与操作组成.词条可以是单词,或者短语. hello #单独项 "hello pzdn" #双引号引起来短语 2. Field Lucene 支持字段 ...

  8. 3 快速创建SpringBoot项目

    一.Intellij IDEA 创建Spring Boot项目 1.创建工程  2.选择Spring Initializr 3.设置Maven版本管理参数  4.选择引用模块  5.命名工程名 6.选 ...

  9. 20155220 2016-2017-2 《Java程序设计》第七周学习总结

    20155220 2016-2017-2 <Java程序设计>第七周学习总结 教材学习内容总结 Lambda 如果使用JDK8的话,可以使用Lambda特性去除重复的信息. 在只有Lamb ...

  10. 以前的 Delphi版本

                    Delphi 1 Delphi 2 Delphi 3 Delphi 4 Delphi 5 Delphi 6 Delphi 7 Delphi 8 Delphi 2005