jquery下的ajax和jsonp实现与区别
json和jsonp和ajax的实质和区别
ajax的两个问题
1.ajax以何种格式来交换数据
2.跨域的需求如何解决
数据跨域用自定义字符串或者用XML来描述
跨域可以用服务器代理来解决
jsonp来跨域
json是一种数据交换格式 “暗号” 描述信息格式
jsonp是非官方跨域数据交互协议 “接头方式” 信息传递双方约定的方法
json是基于文本的数据交换方式或者数据描述格式
json的优点
1.基于纯文本,跨平台传递极其简单;
2.javascript原生支持,后台语言几乎全部支持
3.轻量级数据格式,占用字符数量极小,特别适合互联网传递
4.可读性比较强,不必xml那么一目了然但在合理的依次缩进之后还是很容易识别的
5.容易编写和解析,当然前提是知道数据结构
json的格式或者规则
json以非常简单的方式来描述数据结构 xml能做的它都能做
1.json的数据两种数据类型 大括号{}和方括号[] 其余英文冒号,是分隔符 冒号:是映射符 英文双引号""是定义符
2.{}是描述一组 不同类型的无序键值对集合 每个键值对理解为OOP的属性描述
[]是描述一组 相同类型的有序数据的集合 对应OPP的数组
3.{}不同类型无序键值对和[]相同类型有序集合中有有多个子项,通过英文逗号分隔
4.键值对以英文冒号:分隔并且建议键名都加英文双引号"",以便不同语言的解析
5.json内部常用数据类型是字符串(必须用双引号引起来其他不用) 数字 布尔 日期 null
日期比较特殊??????
jsonp的产生原因
1.Ajax直接请求普通文件存在跨域无权限访问的问题(静态页、动态页、web服务、wcf只要是跨域请求一律不准)
2.web的页面上调用js文件是不受跨域的影响(凡拥有src属性的标签都拥有跨域能力script img iframe)
3.可以判断 现在想通过纯web端(ActiveX控件、服务端代理、H5之Websocket等方式不算)跨域访问数据就只有一种可能,就是在远程服务器上设法把数据装进js格式的文件里,供客户度调用和进一步处理;
4.json的纯字符数格式可以简洁的描述复杂数据还被js原生支持
5.web客户端通过与调用脚本一样的方式来调用跨域服务器上动态生成的js格式文件(后缀.json),服务器之所以要动态生成json文件目的把客户端需要的数据装入进去
6.客户端在对json文件调用成功后获得自己所需的数据剩下的就按照自己需求进行处理和展现,这种获取远程数据的方式非常像ajax其实并一样
7.为了方便客户端使用数据逐渐形成非正式传输协议jsonp
该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住json数据 这样客户端就可以随意定制自己的函数来自动处理返回数据
jquery下的ajax实现
$.ajax({url:'/comm/test1.php',type:'POST', //GETasync:true, //或false,是否异步data:{name:'yang',age:25},timeout:5000, //超时时间dataType:'json', //返回的数据格式:json/xml/html/script/jsonp/textsuccess:function(data,textStatus,jqXHR){console.log(data)console.log(textStatus)console.log(jqXHR)},error:function(xhr,textStatus){console.log('错误')console.log(xhr)console.log(textStatus)},complete:function(){console.log('结束')}
})
jquery下的jsonp实现
$.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');}});
案例
百度自动提示:
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=ja返回数据为
window.baidu.sug({q:"j",p:false,s:["京东","京东商城","极限挑战","军师联盟","jd","json","js","极限挑战第三季","绝地求生大逃杀"]});
所以js中必须有window.baidu.sug的方法
html代码:
<div class="div1"><input class="inp" type="text"><button>shous</button><ul class="ul1"></ul></div>
css代码:
<style>*{margin: 0; padding: 0;}.div1 input{width: 240px;}.div1 button{width: 48px;}li{list-style: none; background: #999; margin: 2px;}.div1{width:300px;margin: 50px auto;}</style>
效果图如下:
需要实现效果,在输入框输入时根据百度自动提示
js代码,注意
window.baidu={};
window.baidu.sug=function(data)
和
jsonp:"cd",
jsonpCallback:"window.baidu.sug"
<script src="jquery-1.12.4.js"></script><script>$(function(){//事件$(".inp").keyup(function() {var val=$(this).val();var url="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+val;searchUrl(url);});})//处理数据函数,根据返回的函数名命名。window.baidu={};window.baidu.sug=function(data){console.log(data.s);$(".ul1").html("");var data1=data.s;for(var i=0;i<data1.length;i++){var li=$("<li></li>").append(data1[i]);$(".ul1").append(li);}}//jsonp获取数据function searchUrl(url){console.log(url);$.ajax({url:url,type:"get",dataType:"jsonp",jsonp:"cd",jsonpCallback:"window.baidu.sug"})}</script>
效果:
转载于:https://www.cnblogs.com/lpdong/p/8480537.html
jquery下的ajax和jsonp实现与区别相关推荐
- Jquery下的Ajax调试方法
Jquery下的Ajax调试方法 介绍 本文介绍Jquery下的Ajax调试方法:很多调试方法,就是一点就通,但是,在还没有通之前,会让人困惑,不知所以然: Ajax 可以为用户提供更为丰富的用户体验 ...
- jQuery下的ajax【5分钟掌握】
jquery下的ajax方法 load ajax get post load()方法 jQuery load() 方法是简单但强大的 AJAX 方法. load() 方法从服务器加载数据,并把返回的数 ...
- jQuery下的ajax之省市区三级联动
jQuery下的ajax之省市区三级联动 小编提醒一下别忘了引入jQuery文件哟 HTML 所在省份:<select name="province"><opti ...
- Ajax基础使用与jquery下使用ajax教程
ajax是目前项目上使用 比较频繁的技术,非常的实用.本人目前做的项目中几乎都使用了ajax去后台请求数据.现在讲本人的学习笔记以及练习使用心得分享给大家,纯手打,大家多多支持.本分享为基础的ajax ...
- ajax隐藏button,jquery下的ajax应用-form和button触发
使用jquery的ajax,一种是form提交,一种是button直接提交. 1. 引用 2.js脚本ajax-form.js jQuery(function($) { $('form[data-as ...
- ajax远程调用,jquery中的ajax方法怎样通过JSONP进行远程调用
关于JSONP的概念和为什么要使用JSONP网上已经有很多教程,这一节主要演示下在JQUERY中的ajax方法怎样通过JSONP进行远程调用 首先介绍下$.ajax的参数 type:请求方式 GET/ ...
- jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据,表单序列化(异步获取表单内容)
jQuery中使用ajax: 在jQuery中使用ajax首先需要引入jQuery包,其引入方式可以采用网络资源,也可以下载包到项目文件中,这里推荐下载包到文件中:市面上有多个版本的jQuery库,这 ...
- ie中用ajax提示未定义,Jquery在IE7下无法使用 $.ajax解决方法
通过查看源码发现 // Create the request object; Microsoft failed to properly // implement the XMLHttpRequest ...
- Java程序员从笨鸟到菜鸟之(八十九)跟我学jquery(五)jquery中的ajax详解
Ajax让用户页面丰富起来, 增强了用户体验. 使用Ajax是所有Web开发的必修课. 虽然Ajax技术并不复杂, 但是实现方式还是会因为每个开发人员的而有所差异.jQuery提供了一系列Ajax函数 ...
最新文章
- QPropertyAnimation实现游戏地图场景变换
- jQuery同时监听两个事件---实现同时操控两个按键
- D. Anton and Chess 模拟题 + 读题
- 前端学习(601):集成react插件
- Oracle查询今天、昨天、本周、上周、本月、上月数据
- sql语句优化总结 mysql_MySQL-SQL优化总结
- Java-java.util.concurrent.LinkedBlockingQueue
- 蓝桥杯 ALGO-124 算法训练 数字三角形
- Spring在多线程中bean的注入问题
- JSP的自定义标签(四)之定义函数
- 麒麟系统常见问题详解
- Python代码加密-PyArmor
- 高级程序员的思维模式
- 广告roi怎么计算公式_ROI计算公式和提升ROI的方法是什么?
- 微信支付服务商模式(电商收付通)实现分账操作
- Unity-黑暗之魂复刻-玩家输入输出
- realme手机配什么蓝牙耳机?realme蓝牙耳机推荐
- AWVS安装激活教程
- hadoop3.3.0版本搭建
- 字、字节、位(word、byte、bit)的关系