Javascript-基础知识（6）

时间：2022-08-22 17:25:47

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);


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


标签：

相关文章