json

xiaoxiao2021-02-28  51

json

json是 JavaScript Object Notation 的首字母缩写,单词的意思是javascript对象表示法,这里说的json指的是类似于javascript对象的一种数据格式,目前这种数据格式比较流行,逐渐替换掉了传统的xml数据格式。 #javascript自定义对象: var oMan = { name:'tom', age:16, talk:function(s){ alert('我会说'+s); } } #json格式的数据:(属性名称和字符串值必须使用双引号) { "name":"tom", "age":18 } #json数据格式数组 ["tom",18,"programmer"]

ajax(同源)与jsonp(跨域)

ajax技术的目的: 是让javascript发送http请求,与后台通信,获取数据和信息。原理:实例化xmlhttp对象,使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行,从而实现异步。相同点:相同的方法、相同的参数 #衍生出两个子方法:发送数据 # 四个参数: 地址(url 必填项)、dataType、data、success $.get() #语法 $(selector).get(url,data,success(response,status,xhr),dataType) $.post()
同步与异步
现实:同步指的是同时做几件事情,异步指的是做完一件事后再做另外一件事程序:同步指的是做完一件事后再做另外一件事,异步指的是同时做几件事情
局部刷新和无刷新
局部刷新,也叫做无刷新,无刷新指的是整个页面不刷新,只是局部刷新,ajax可以自己发送http请求,不用通过浏览器的地址栏,所以页面整体不会刷新,ajax获取到后台数据,更新页面显示数据的部分,就做到了页面局部刷新。 # 同源策略 #ajax请求的页面或资源只能是同一个域下面的资源,不能是其他域的资源,这是在设计ajax时基于安全的考虑。特征报错提示: XMLHttpRequest cannot load https://www.baidu.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. # $.ajax使用方法 # 常用参数: 1、url 请求地址 2type 请求方式,默认是'GET',常用的还有'POST' 3、dataType 设置返回的数据格式,常用的是'json'格式,也可以设置为'html' 4、data 设置发送给服务器的数据 5、success 设置请求成功后的回调函数 6error 设置请求失败后的回调函数 7、async 设置是否异步,默认值是'true',表示异步 # 以前写法 $.ajax({ url: 'js/data.json', type: 'GET', dataType: 'json', data:{'aa':1} success:function(data){ alert(data.name); }, error:function(){ alert('服务器超时,请重试!'); } }); #新写法 $.ajax({ url: 'js/data.json', type: 'GET', dataType: 'json', data:{'aa':1} }) .done(function(data) { alert(data.name); }) .fail(function() { alert('服务器超时,请重试!'); }); // data.json里面的数据: {"name":"tom","age":18}
jsonp
ajax只能请求同一个域下的数据或资源,有时候需要跨域请求数据,就需要用到jsonp技术,jsonp可以跨域请求数据原理: 主要是利用了 #jsonp和ajax原理完全不一样,不过jquery将它们封装成同一个函数。 $.ajax({ url:'js/data.js', type:'get', dataType:'jsonp', jsonpCallback:'fnBack' }) .done(function(data){ alert(data.name); }) .fail(function() { alert('服务器超时,请重试!'); }); // data.js里面的数据: fnBack({"name":"tom","age":18}); ###获取360搜索关键词联想数据 $(function(){ // keyup 键盘按下后抬起事件 $('#txt01').keyup(function(){ var sVal = $(this).val(); $.ajax({ url:'https://sug.so.360.cn/suggest?', type:'get', dataType:'jsonp', data: {word: sVal} }) .done(function(data){ var aData = data.s; $('.list').empty(); for(var i=0;i<aData.length;i++) { var $li = $('<li>'+ aData[i] +'</li>'); $li.appendTo($('.list')); } }) }) }) //...... <input type="text" name="" id="txt01"> <ul class="list"></ul>
转载请注明原文地址: https://www.6miu.com/read-2625046.html

最新回复(0)