04.Jquery语法下
来源:互联网 发布:合同 风险控制矩阵 编辑:程序博客网 时间:2024/05/23 14:33
一、json
json是 JavaScript Object Notation 的首字母缩写,单词的意思是javascript对象表示法,这里说的json指的是类似于javascript对象的一种数据格式,目前这种数据格式比较流行,逐渐替换掉了传统的xml数据格式。
javascript对象字面量:
var tom = { name:'tom', age:18}
json格式的数据:
{ "name":'tom', "age":18}
与json对象不同的是,json数据格式的属性名称需要用双引号引起来,用单引号或者不用引号会导致读取数据错误。
json的另外一个数据格式是数组,和javascript中的数组字面量相同。
['tom',18,'programmer']
二、ajax与jsonp
ajax技术的目的是让javascript发送http请求,与后台通信,获取数据和信息。ajax技术的原理是实例化xmlhttp对象,使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行,从而实现异步。
同步和异步
现实生活中,同步指的是同时做几件事情,异步指的是做完一件事后再做另外一件事,程序中的同步和异步是把现实生活中的概念对调,也就是程序中的异步指的是现实生活中的同步,程序中的同步指的是现实生活中的异步。
局部刷新和无刷新
ajax可以实现局部刷新,也叫做无刷新,无刷新指的是整个页面不刷新,只是局部刷新,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 请求地址
2、type 请求方式,默认是’GET’,常用的还有’POST’
3、dataType 设置返回的数据格式,常用的是’json’格式,也可以设置为’html’
4、data 设置发送给服务器的数据
5、success 设置请求成功后的回调函数
6、error 设置请求失败后的回调函数
7、async 设置是否异步,默认值是’true’,表示异步
以前的写法:
$.ajax({ url: 'js/user.json', type: 'GET', dataType: 'json', data:{'aa':1} success:function(data){ ...... }, error:function(){ alert('服务器超时,请重试!'); }});
新的写法(推荐):
$.ajax({ url: 'js/user.json', type: 'GET', dataType: 'json', data:{'aa':1}}).done(function(data) { ......}).fail(function() { alert('服务器超时,请重试!');});
jsonp
ajax只能请求同一个域下的数据或资源,有时候需要跨域请求数据,就需要用到jsonp技术,jsonp可以跨域请求数据,它的原理主要是利用了script标签可以跨域链接资源的特性。
jsonp的原理如下:
<script type="text/javascript"> function aa(dat){ alert(dat.name); }</script><script type="text/javascript" src="....../js/data.js"></script>
页面上定义一个函数,引用一个外部js文件,外部js文件的地址可以是不同域的地址,外部js文件的内容如下:
aa({"name":"tom","age":18});
外部js文件调用页面上定义的函数,通过参数获取数据。
实践一下,还有些注意事项:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ajax test</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $.ajax({ url: 'data.json',//服务器的地址,需要服务器的环境 type: 'get',//get请求 dataType: 'json'//设置返回的数据格式 }) .done(function(data) { //console.log(data); alert(data.name); }) .fail(function() { console.log("error"); }); </script></head><body></body></html>
jsonp
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <!-- <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script> --> <script type="text/javascript"> function aa(dat){ alert(dat.name);//不需要服务器的环境 } </script> <script type="text/javascript" src="data.js"></script></head><body></body></html>data.js文件的内容:aa({"name":"tom"});
用jsonp改写上一个例子:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jquery jsonp</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $.ajax({ url: 'data.js', type: 'get', dataType:'jsonp',//设置返回的数据格式 jsonpCallback:'aa'//需要服务器环境 }) .done(function(data) { alert(data.name); }) .fail(function() { console.log("error"); }) </script></head><body></body></html>
jsonp公开接口:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ //松开键盘 $('#txt01').keyup(function(){ var val = $(this).val(); $.ajax({ url: 'https://sug.so.360.cn/suggest?', type: 'get', dataType: 'jsonp', data: {word: val} }) .done(function(data) { $('.list').empty(); for(var i=0;i<data.s.length;i++){ var $li = $('<li>'+ data.s[i] +'</li>'); $li.prependTo('.list'); } }) .fail(function() { console.log("error"); }) }) }) </script></head><body> <input type="text" name="" id="txt01"> <ul class="list"></ul></body></html>
三、本地存储
本地存储分为cookie,以及新增的localStorage和sessionStorage
1、cookie
存储在本地,容量最大4k,在同源的http请求时携带传递,损耗带宽,可设置访问路径,只有此路径及此路径的子路径才能访问此cookie,在设置的过期时间之前有效。
jquery 设置cookie$.cookie('mycookie','123',{expires:7,path:'/'});jquery 获取cookie$.cookie('mycookie');
2、localStorage
存储在本地,容量为5M或者更大,不会在请求时候携带传递,在所有同源窗口中共享,数据一直有效,除非人为删除,可作为长期数据。
//设置:localStorage.setItem("dat", "456");localStorage.dat = '456';//获取:localStorage.getItem("dat");localStorage.dat//删除localStorage.removeItem("dat");
3、sessionStorage 存储在本地,容量为5M或者更大,不会在请求时候携带传递,在同源的当前窗口关闭前有效。
localStorage 和 sessionStorage 合称为Web Storage , Web Storage支持事件通知机制,可以将数据更新的通知监听者,Web Storage的api接口使用更方便。
iPhone的无痕浏览不支持Web Storage,只能用cookie。
cookiedemo:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>cookie</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript" src="js/jquery.cookie.js"></script> <script type="text/javascript"> // cookie的读和写需要在服务器环境下 //写cookie $.cookie('mycookie','ok!',{expires:7,path:'/'}); //读cookie var val = $.cookie('mycookie'); alert(val); </script></head><body></body></html>
本地存储:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> //写入 //localStorage.setItem('mystorage','ok!'); //sessionStorage.setItem('pwd','123'); // 读取 alert(localStorage.mystorage); </script></head><body></body></html>
查看本地存储的内容:
- 04.Jquery语法下
- 04.JavaScript语法下
- jQuery 语法
- jquery语法
- jQuery 语法
- jQuery语法
- jQuery 语法
- jQuery 语法
- JQuery语法
- jQuery 语法
- jQuery 语法
- jQuery 语法
- jQuery 语法
- jQuery语法
- jQuery语法
- jQuery 语法
- jQuery--语法
- jQuery 语法
- draft.js--富文本编辑器框架的实践(二)
- php7-internal 7.7 zval的操作
- 03.Jquery语法中
- 9月28日云栖精选夜读:阿里云MaxCompute澳大利亚开服,“领跑”人工智能市场
- 【c#】枚举
- 04.Jquery语法下
- Caused by: java.lang.NumberFormatException: For input string: ""
- Windows下查看JDK安装路径;Linux下查看JDK安装路径
- Sublime Text 3 快捷键精华版
- vmware下安装ubutun系统wifi连接问题
- 如何使用yum安装软件
- 深度学习与计算机视觉系列(10)_细说卷积神经网络
- 题目289:苹果
- 玩转Unity资源,对象和序列化(下)