Web存储和Ajax
2017-06-26 16:06
405 查看
Web存储
自HTML5后,web存储有两种形式:cookie:
–Cookie是网页存储在本地的信息:最常见的使用方式是存储sessionID,或者一些用户自定义的设置;–Cookie的格式:{name}={value};expires={date};path={path};domain={domain};
–只有4k空间可以存储。
–可以使用 document.cookie 来创建 、读取、及删除 cookie
document.cookie="username=John Doe"; //创建cookie var x = document.cookie; //读取cookie document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/"; //修改cookie document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";//删除cookie
–设置值时应使用escape转码
–读取Cookie:因为Cookie是一串字符串,所以我们可以使用字符串的操作来读取Cookie:首先使用indexOf来找到变量名所在的位置,再从变量名所在位置开始,查找第一个分号出现的位置,取这两个位置之间的字符串,即为Cookie的值。
原生js操作Cookie非常麻烦,建议使用jQuery
跨站攻击:利用恶意脚本获取Cookie中的私密信息,利用Cookie中保存的权限发起交易等重要请求
防范方法:加密Cookie,对Cookie加入更多的绑定元素
localStorage和sessionStorage
localStorage在本地存储大小有5M。常用的函数:
–保存数据:
localStorage.setItem(key,value);
–读取数据:
localStorage.getItem(key);
–删除单个数据:
localStorage.removeItem(key);
–删除所有数据:
localStorage.clear();
–得到某个索引的key:
localStorage.key(index);
当然可以不适用setItem来保存数据,可以通过点语法来实现,如:
localStorage.key=value;。
localStorage有两个属性length和key。
localStorage是将数据存储到本地,关了浏览器还可以使用,而sessionStorage只会在浏览器运行期间存储,关了浏览器,数据就没有了,使用方法和localStorage一致。
Ajax和数据传输
HTTP协议
HTTP是一个属于应用层的面向对象的协议,由于其简捷、快速的方式,适用于分布式超媒体信息系统。–HTTP协议有三个内容:URL,请求、响应
–常见的HTTP状态码:200(正常),304(未修改),404(找不到),502(服务器错误)
–URL的格式:protocol://domain[/path]?parameters
–Protocol: 协议,http有http和https两种协议
–Domain: 域名
–Path: 访问对象的路径
–Parameters: 参数,多个参数间用&号链接
需要注意的内容
–URL请求方法及其参数
–响应/请求的header
–表单数据
–响应内容
Ajax请求
-Ajax=Asynchronous JavaScript and XML(异步的JavaScript和XML)-Ajax不是新的编程语言,而是一种使用现有标准的新方法
-Ajax是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。
-新建一个Ajax请求:
var ajax = new XMLHttpRequest();
-发送一个请求:
ajax.open(请求方法,请求地址,true);ajax.send();
-得到请求内容:
ajax.response;
JavaScript内置有个XMLHttpRequest的对象,用于发起Ajax请求并处理Ajax响应。
XMLHttpRequest对象的属性或方法 | 描述 |
---|---|
readyState | 请求的状态代码:0(未初始)、1(开启)、2(已传送)、3(接受中)、4(已载入) |
status | HTTP的请求状态代码,例如404(找不到文件)或200(OK) |
onreadystatechange | 请求状态改变是会被调用的函数引用 |
responseText | 由服务器返回的响应数据,格式为纯文本字符串 |
responseXML | 由服务器返回的响应数据,格式为XML节点树构成的对象 |
abort() | 取消请求,只有在需要的时候才会使用 |
open() | 准备请求,指定请求的类型,URL及其他细节 |
send() | 传送请求,交个服务器处理 |
send()方法全权负责准备Ajax请求和对服务器发出请求。
send(type,url,handler,postDataType,postData)
属性或方法 | 描述 |
---|---|
type | 请求的类型,GET或POST |
url | 服务器的URL。如果有需要,数据也可以包装在URL里 |
handler | 用于处理响应的回调函数 |
postDataType | 被传送的数据类型(只用于POST,GET不需要) |
postData | 被传送的数据(只用于POST,GET不需要)。POST数据能以数种格式送出 |
var request=null; if(window.XMLHttpRequest){ try{ request=new XMLHttpRequest(); }catch(e){ request=null; } }else if(window.ActiveXObject){ try{ request=new ActiveXObject("Msxm12.XMLHTTP"); }catch(e){ try{ request=new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ request=null; }}}
创建XMLHttpRequest对象后,换成设定处理请求的函数,然后开启请求。
request.onreadystatechange=handler; request.open(type(GET or POST),url(处理数据程序地址),true); request.send();
兼容性处理
var xmlhttp; if(window.XMLHttpRequest) {//code for IE7+,Firefox,Chrome,Opera,Safari xmlhttp=new XMLHttpRequest(); } else {//code for IE6,IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
测试工具 POSTMAN
JSON
–JSON是网络传输的标准数据格式之一–JSON:JavaScript 对象表示法(JavaScript Object Notation)。
–JSON 是存储和交换文本信息的语法。类似 XML。
–JSON 比 XML 更小、更快,更易解析。
{"sites":[ {"name":"Runoob", "url":"www.runoob.com"}, {"name":"Google", "url":"www.google.com"}, {"name":"Taobao", "url":"www.taobao.com"} ]}
JSON 语法规则
数据在名称/值对中
数据由逗号分隔
花括号保存对象
方括号保存数组
–JSON可以转换成JavaScript对象,反之却不能
–通过
JSON.stringify( )将JSON转换为字符串
–通过
JSON.parse( )将字符串转换为JSON
–JavaScript对象是类的实例化产物
本博客仅用于记录web前端学习情况
相关文章推荐
- [收藏]Ajax: A New Approach to Web Applications
- 使用SQLXML 3.0把存储过程暴露为Web服务
- web开发的下一个学习方向:ajax
- *** Web 存储系统窗体:窗体注册表 (new)***
- Ajax技术(WEB无刷新提交数据)
- Ajax: A New Approach to Web Applications
- WebORB vs AJAX.net
- Ajax:Web应用开发新理念(转载自csdn)
- Thinking in AJAX(二) —— 基于AJAX的WEB设计
- 利用Java存储过程沟通SQL、XML、Java、J2EE和Web服务。
- Ajax: A New Approach to Web Applications
- 一篇关于AJAX的好文:AJAX-Style Web Development Using ASP.NET
- Web新动力 ——Ajax
- Ajax: A New Approach to Web Applications
- 在WEB里调用修改存储EXCEL
- Ajax: 一种建立Web应用的新途径
- Ajax: Web应用开发的一种新方法
- Ajax.NET 作者发布支持Visual Web Developer 2005的模板安装
- Ajax Web Controls for ASP.NET!
- 上周技术关注:AJAX、Rails、WebFramework、SSE