jQuery如何实现jsonp调用

最新推荐文章于 2023-11-18 15:19:41 发布
最新推荐文章于 2023-11-18 15:19:41 发布
阅读量1.2k 收藏
点赞数
文章标签： javascript json xhtml ViewUI
原文链接：https://my.oschina.net/u/2444569/blog/3081201
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
     <title>Untitled Page</title>
      <script type="text/javascript" src=jquery.min.js"></script>
      <script type="text/javascript">
     jQuery(document).ready(function(){ 
        $.ajax({
             type: "get",
             async: false,
             url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
             dataType: "jsonp",
             jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
             jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
             success: function(json){
                 alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。');
             },
             error: function(){
                 alert('fail');
             }
         });
     });
     </script>
     </head>
  <body>
  </body>
</html>

这里针对ajax与jsonp的异同再做一些补充说明：

1、ajax和jsonp这两种技术在调用方式上”看起来”很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装。

2、但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加

参考地址：

https://blog.csdn.net/hansexploration/article/details/80314948

转载于:https://my.oschina.net/u/2444569/blog/3081201

chizhe3380
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JQuery 中的JSONP
zero________________的博客
06-24 527
对于JSONP不太熟悉的可以先看这一篇文章  https://blog.csdn.net/zero________________/article/details/80792394熟悉jQuery的朋友应该知道，jQuery在AJAX中方法中封装了JSONP,然而我们试用只需设置 dayaTpe值为jsonp即可开启跨域访问 那么接下来我们也模拟jQuery封装一下JSONP我也希望通过$.aja...
对jQuery ajax jsonp的理解和使用实例
Eiwen的博客
12-21 4778
目前主流的前端跨域请求方式有两种，一种是XHR2 CORS，也就是在服务端填上响应头： header(“Access-Control-Allow-Origin:*”); /星号表示所有的域都可以接受，/ header(“Access-Control-Allow-Methods:GET,POST”);CORS不支持ie10以下。但是第二种是更加方便的就是jsop了，jsop有很多种实现方式，除了
jQuery搜索框自动提示代码.zip
05-27
jQuery搜索框自动提示代码基于jquery.1.8.2.js制作，利用JsonpAjax.js制作搜索框输入文字提示下拉框代码，ajax数据调用的是百度文字库。
jquery调用jsonp接口
qq_35285268的博客
07-26 378
if($type=='jsonp'){      $sel=$pdo->query("select * from zhoukao1 where biao like '%$title%'")->fetchAll();      $str=json_encode($sel);      $callback=$_GET['callback'];      echo $callback."(".$
百度等搜索引擎智能提示（JSONP跨域实现自动补全搜索建议）
热门推荐
donghua-li的博客
09-04 2万+
百度、淘宝、搜狗等搜索引擎智能提示（JSONP跨域实现自动补全搜索建议））， 搜索引擎智能提示JSONP跨域实现自动补，ajax，jsonp
jquery中的ajax方法怎样通过JSONP进行远程调用
04-12 1800
可以在传递过程中自定义函数名，只要使用jsonpCallback参数就可以了。jsonp：表示传递的参数，默认为callback，我们也可以自定义，服务器段通过此参数，获取自定义的函数名称，服务器这样获取 Request.QueryString["callback"]jsonpCallback：表示传递的参数值，也就是回调的函数名称，这是自定义的名称。$.ajax({
AJAX的跨域问题使用jQuery封装的JsonP的方式实现跨域------AJAX
最新发布
春风若有怜花意，可否许我再少年
11-18 307
AJAX的跨域问题使用jQuery封装的JsonP的方式实现跨域------AJAX
jquery ajax jsonp跨域调用实例代码
10-26
今天研究了AJAX使用JSONP进行跨域调用的方法，发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下，方便需要的朋友
jQuery中JSONP的两种实现方式详解
10-21
在jQuery中，JSONP提供了两种实现方式，主要用于解决JavaScript进行AJAX请求时遇到的跨域问题。 ### 第一种实现方式 在jQuery中，我们可以通过设置`dataType`参数为`"jsonp"`来指定使用JSONP。同时，我们需要指定`...
jquery-jsonp.js
04-08
　7、为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON...
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
10-26
jQuery-JSONP是一个支持 JSONP 调用的 jQuery 插件，使用它是因为它支持出错时的 ajax 回调，而 jQuery 的 $.ajax 不支持，我们已经在实际项目中使用，在开始使用时遇到了2个问题，在这里记录并分享一下。
jsonp跨域，原生js和ajax实现百度，360，必应等浏览器搜索框的智能补全提示技术，带搜索功能的搜索框
梦之所以
04-23 531
相信许多刚学前端的的同学，都曾对浏览器搜索框自动提示提示的功能挺好奇的，接下让我们一起揭露他的神秘面纱吧！ 相信学过javascript的同学都引用过外部的JavaScript吧！，其实跨域就是动态的创建script标签，将script标签url的内容渲染到指定的页面。下面我们将以百度搜索框为例，进行讲解。 第一种方法，jsonp原理，动态生成script标签 <!DOCTYPE html&...
搜索框自动补全(模糊匹配)功能实现
qq_42112846的博客
03-02 2533
本地实现了一个搜索框自动补全的小功能,在JQuery UI的autocomplete插件的基础上,加入了自己的业务代码,贴出来回顾一下,同时可以给大家一个参考 首先贴出的是JQuery Ui 的自动补全插件部分的代码,后面的功能都是在其基础上追加的,直接拷贝到你的本地就可以直观的看到运行效果,也可以到官网上面体验和查看,为了方便,我这里是直接引入的JS链接； jQueryUI 链接：https...
javascript搜索框联想搜索_模拟百度搜索框自动联想功能，原生js+jsonp轻松搞定
weixin_42348394的博客
01-14 409
链接下面是我闲暇时总结的JS、CSS、算法总结，欢迎大家点赞、star～～有趣实用的CSS效果前端博客 传送门LeetCode个人题解 传送门讲解如何利用百度接口仿写一个搜索联想词功能效果图 HTML部分ul>div>CSS样式部分* {padding: 0;margin: 0;}.wrapper {position: absolute;margin-left: -260px;left...
44 Ajax 同源策略 跨域 JSONP 搜索提示案例 防抖 节流
Write less，do more
09-16 443
目标 能够知道什么是同源策略和跨域 能够知道什么是JSONP 能够说出JSONP的实现原理 能够知道防抖和节流的概念 同源策略(⭐⭐⭐) 什么是同源 如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源。 例如，下表给出了相对于 http://www.test.com/index.html 页面的同源检测： 什么是同源策略 同源策略（英文全称 Same origin policy）是浏览器提供的一个安全功能 MDN 官方给定的概念：同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源
jquery+ajax+jsonp模仿必应搜索框
caimaomaocai的博客
04-24 469
不废话了，直接上代码&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; body{background: #33
使用jsonp跨域调用百度js实现搜索框智能提示，并实现鼠标和键盘对弹出框里候选词的操作【附源码】...
weixin_34389926的博客
07-31 149
项目中常常用到搜索，特别是导航类的网站。自己做关键字搜索不太现实，直接调用百度的是最好的选择。使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值，当然$.getScript也可以实现跨域调用js。 jsonp快速入门：【原创】说说JSON和JSONP，也许你会豁然开朗，含jQuery用例关于jquery.ajax的jsonp方法是用以及其error回调函数不能正确执行...
jQuery的事件，ajax请求、proxy、jsonp跨域以及举例
weixin_49070186的博客
12-21 1366
jQuery事件绑定语法形式 1. $( ).事件类型(事件处理函数) ------ 是jQuery伪数组支持的事件类型 //例子 $('div').click(function(){ consloe.log('我是div标签对象') }) 2. $( ).on(事件类型 ， 事件处理函数) ------- 所有时间类型 都支持 //例子 $('[name=pwd]').on('input' , function(){ console.log('...
jQuery实现自动搜索功能
dafen496050286的专栏
10-09 601
<br />一、页面上：<br />1.导入所需的js文件：<br /><script type="text/javascript" src="<c:url value='/js/jquery.js' />"></script><br /><script type="text/javascript" src="<c:url value='/js/j.suggest.js' />"></script><br /><script type="text/javascript" src="<c:url value=
深入解析jQuery源码：自调用匿名函数的秘密
jQuery 的动画功能包括 `.animate()`, `.fadeIn()`, `.slideToggle()` 等，它们通过 jQuery 内部的定时器系统实现了平滑的过渡效果。 9. **Ajax 请求** jQuery 的 `$.ajax()` 方法提供了一种统一的方式来处理异步...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值