Web存储和Ajax

Web存储

自HTML5后，web存储有两种形式：

cookie：

–Cookie是网页存储在本地的信息：最常见的使用方式是存储sessionID，或者一些用户自定义的设置；
–Cookie的格式：{name}={value};expires={date};path={path};domain={domain}；
–只有4k空间可以存储。
–可以使用 document.cookie 来创建 、读取、及删除 cookie

document.cookie="username=John Doe";  //创建cookievar x = document.cookie;              //读取cookiedocument.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";  //修改cookiedocument.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,Safarixmlhttp=new XMLHttpRequest();}else{//code for IE6,IE5xmlhttp=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前端学习情况