Javascript-基础知识（6）

1.回顾 上篇学习了 事件，错误调试

2. 这篇将学习，cookie 操作，xml 操作 ， json操作 ，ajax 操作

3.Cookie与存储
1)cookie:在本地客户端的磁盘上以很小的文件形式保存数据
2)用途：1，用户登录 ；2，购物车
3)组成：由键值对组成，key=value,
4)操作使用：

//完整形式：
document.cookie='user=值;expires=失效时间;path=访问路径;domain=域名;secure=安全的http'

//写入cookie
document.cookie='yuan=原';
//编码
document.cookie='user='+encodeURIComponent('明');
//解码
decodeURIComponent();
//设置过期时间，当过了这个时间点后，就会自动删除cookie
var date=new Date();
date.setDate((date.getDate()+7));
document.cookie='user=卓;expires='+date;
//简单的删除
document.cookie='user=卓;expires='+new Date(0);
//secure 指定通过https来访问
//domain 指定域名

shu(document.cookie)

5)封装cookie操作函数
e.g :

//设置cookie函数
function setCookie(name,value,expires,path,domain,secure){
var cookieName=encodeURIComponent(name)+'='+encodeURIComponent(value);
if(expires instanceof Date){
cookieName+=';expires='+expires;
}
}
function getCookie(name){
//思路，可以用正则匹配到
}

6)web存储： sessionStorage和globalStorage,localStorage
e.g:

//设置方法1
sessionStorage.setItem('name','yuan');
shu(sessionStorage.getItem('name'));
//设置方法2
sessionStorage.abcd='明卓';
shu(sessionStorage.abcd);
//移除
sessionStorage.removeItem('name');
shu(sessionStorage.getItem('name'));

4.XML
1) xml技术可以理解为微型结构化数据库，保存小的数据！
e.g:

//IE中的XML
//加载XML文件：两种方式：1.加载xml字符loadXML();2.加载XML外部文件load()
//因为XML和XHTML一样，都是通过DOM节点操作的，故之前的可以用上

var xmlDom=createXMLDOM();
//直接加载
//xmlDom.loadXML('原明卓')
//外部使用
//xmlDom.load('js/test.xml');
var xml=xmlDom.getElementsByTagName('user');
shu(xml.tagName);

2) 加载模式：同步和异步
同步：就是加载完xml完成之前，代码不会继续执行，加载完成后再返回
异步：加载xml的时候，javascript会把任务丢给浏览器内部后台执行处理，不会造成堵塞，需要配合readystatechange使用
e.g: (不建议使用IE支持 ) var xmlDom=XML.load('js/test.xml');;

//设置异步

xmlDom.async=true;
xmlDom.onreadystatechange=function(){
if(xmlDom.readyState==4){
shu(xmlDom.xml)
}
};
xmlDom.load('js/test.xml');
shu(xmlDom);

3)Dom: 模拟创建xml和序列化xml
e.g :

//模拟loadXML()方法，可以简易的创建xml字符串
var xmlParse=new DOMParser();
var xmlStr='yuan';
var xmlDom=xmlParse.parseFromString(xmlStr,'text/xml');
//模拟.xml属性序列化字符串
var serializer=new XMLSerializer();
var xml=serializer.serializeToString(xmlDom);
shu(xml);

4)跨浏览器XML操作 ：查询成熟的js库，来操作
5.XPath操作XML
1)XPath :是一种节点查找手段，大部分浏览器实现了这个标准
2)IE上的XPath :(1).selectSingleNode() 获取单一节点 （2).selectNodes() 获取节点集合
3)selectSingleNode('根节点/节点1/你要找的节点')：获取的是单一节点，如果有多个，就返回查找到的第一个
4)属性的，传参 ：根节点/节点1[@id=1] :e.g : selectNodes('根节点/节点1[@id=1]');
5)w3c 下的xpath :
e.g　：

var eva=new XPathEvaluator();

var result=eva.evaluate('root/user',xmlDom,null,XPathResult.FIRST_ORDERED_NODE_TYPE,null);
６)跨浏览器XPath 操作时，查找相应的js库
6.JSON
1)JSON是javaScript的严格子集，简单的表示结构化数据
2)JSON和XML类型，都是一种结果话数据表示方式。对JSON操作是：解析和序列化；
3)JSON的语法可以表示三种类型的值： (1).简单型 e.g : 100 (2).数组型 e.g : '{"name":"原名","age":100,"country":"河南"}' (3).对象型 e.g :
4)最常用的JSON结构 ：[{"name":"yuan","age":100},{"name":"ming","age":009}]
5)JSON的解析与序列化操作：
e.g :

var box='{"name":"原名","age":100,"country":"河南"}';
var box1={
name:'ming',
age:23,
title:'hhh'
};
//json解析
//1.eval() 将其转化为javascript代码执行
//2.原生的方法 JSON.parse() 解析
var json=JSON.parse(box);
//2.1解析的时候，进行过滤
var json3=JSON.parse(box,function(key,value){
if(key=='name'){
return '我是'+value;
}else{
return value;
}
});
shu(json3);
//序列化
//3.对象转换为json字符串
var json1=JSON.stringify(box1);
//4.可过滤json字符串
var json2=JSON.stringify(box1,function(key,value){
if(key=='name'){
return 'name:'+value;
}else{
return value;
}
});

shu(json.name);
shu(json1);
shu(json2);

7.AJAX
1)ajax是从服务器请求额外的数据而无须刷新
2)核心对象：XMLHttpRequest (XHR)
3)同步实现ajax(get)：
e.g ：

document.addEventListener('click',function(){

//1.创建xhr都对象
var xhr=new XMLHttpRequest();
//2.调用open()方法,准备发送请求：以get请求，false：同步
xhr.open('get','http://192.168.72.1/js/demo.json',false);
//3.发送请求：send()；get请求不需要数据提交，填写null
xhr.send(null);
//4.响应文本 ：responseText
shu(xhr.responseText);
//5.响应状态
shu(xhr.status);
},false);

4)异步实现ajax
e.g :

document.addEventListener('click',function(){
//异步方式实现ajax
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
shu(xhr.readyState);
if(xhr.readyState==4){
//请求完成后，执行
shu(xhr.responseText);
}
};
xhr.open('get','http://192.168.72.1/js/demo.json',true);
xhr.send(null);
//xhr.abort(); //取消异步

},false);

5)post 和 get 请求
e.g GET ：

在web程序上，GET一般是URL提交请求

两种头信息：响应头信息：服务器返回的信息，可以获取

请求头信息：可以设置，但不可获取

document.addEventListener('click',function(){
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
shu(xhr.readyState);
if(xhr.readyState==4){
//请求完成后，执行
//获取响应文本
shu(xhr.responseText);
//获取全部的头信息
shu(xhr.getAllResponseHeaders());
//获取单个响应头信息
shu(xhr.getResponseHeader('Content-Length'));
//中文乱码问题：ajax 请求的文本均为UTF-8的
//特殊字符编码解决：encodeURIComponent() 和 decodeURIComponent()

}
};
xhr.open('get','http://192.168.72.1/js/demo.json',true);
xhr.send(null);

},false);

e.g post :

document.addEventListener('click',function(){

var xhr=new XMLHttpRequest();
xhr.readystatechange=function(){
if(xhr.readyState==4){
shu(xhr.staus);
shu(xhr.responseText);
}
};
xhr.open('post','http://169.254.233.59/Android/UserLogin',true);
//设置请求报文头,来模拟表单提交
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//可以发送参数，没有参数为null
xhr.send('n=yuan&p=yuan');

},false);

 
6) 请求的数据与JSON
e.g :

document.addEventListener('click',function(){
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){

var box=xhr.responseText;
shu(box);
//解析
var json=JSON.parse(box);
shu(json[0].age);
}
};
xhr.open('get','js/demo.json',true);
xhr.send(null);

},false);

    总结 ：加强练习，加强阅读！