jQuery篇——XML、Json和cookie

什么是XML?

即可拓展标记语言:是一种用于标记电子文件使其具有结构性的标记语言。

xml的格式？
第一行固定写：<?xml version="1.0" encoding="UTF-8" ?>
再写一对根标签，根标签没有固定的内容。然后所有的数据都要写在这根标签中。

<?xml version="1.0" encoding="UTF-8" ?>
<person>
    <name>李</name>
    <age>33</age>
</person>

后端如何返回xml?
后端可以通过file_get_contents(“文件名”)来获取文件内容，然后要返回xml数据的话，则需添加下面一行代码

<?php
// 执行结果中有中文, 必须在php文件顶部设置
//header("content-type:text/html; charset=utf-8");
// 如果PHP中需要返回XML数据, 也必须在PHP文件顶部设置
header("content-type:text/xml; charset=utf-8");
echo file_get_contents("info.xml");

前端如何接收xml数据？
通过异步对象.resbonseXML获取xml树，然后同dom树一样获取里面的标签元素。利用标签选择器，或者queryselector来选择，然后.innerHTML获取内容，进行设置。

oBtns[0].onclick = function () {
oBtns[0].onclick = function () {
                var self = this;
                // 4.发送Aajx请求到服务器
                ajax({
                    type:"get",
                    url:"10-ajax-test.php",
                    data:{"name":this.getAttribute("name")},
                    timeout: 3000,
                    success: function (xhr) {
                        var name = self.getAttribute("name");
                        var res = xhr.responseXML;
                        var title = res.querySelector(name+">title").innerHTML;
                        var des = res.querySelector(name+">des").innerHTML;
                        var image = res.querySelector(name+">image").innerHTML;
                        oTitle.innerHTML = title;
                        oDes.innerHTML = des;
                        oImg.setAttribute("src", image);
                        }
                    error: function (xhr) {
                        alert(xhr.status);
                    }
                });
            }

json

JSON是一种轻量级文本交换格式，

var obj = {a: ‘Hello’, b: ‘World’}; //这是一个对象，注意键名也是可以使用引号包裹的
var json= ‘{“a”: “Hello”, “b”: “World”}’; //这是一个 JSON 字符串，本质是一个字符串

前端如何获取json

            oBtn.onclick = function (ev1) {
                ajax({
                    type:"get",
                    url:"12-ajax-json.php",
                    success: function (xhr) {
                        // console.log(xhr.responseText);
                        var str = xhr.responseText;
                        /*
                        在低版本的IE中, 不可以使用原生的JSON.parse方法, 但是可以使用json2.js这个框架来兼容
                        */
                        var obj = JSON.parse(str);		//ie8以下不支持！
                        // console.log(obj);
                        console.log(obj.name);
                        console.log(obj.age);
                    },
                    error: function (xhr) {
                        console.log(xhr.status);
                    }
                })
            }

后端如何发送json？

<?php

echo file_get_contents("12-ajax-json.txt");

标注：
要实现从JSON字符串转换为JS对象，使用 JSON.parse() 方法：
var obj = JSON.parse(’{“a”: “Hello”, “b”: “World”}’); //结果是 {a: ‘Hello’, b: ‘World’}
要实现从JS对象转换为JSON字符串，使用 JSON.stringify() 方法:
var json = JSON.stringify({a: ‘Hello’, b: ‘World’}); //结果是 ‘{“a”: “Hello”, “b”: “World”}’

前端使用json

success: function (xhr) {
                        var name = self.getAttribute("name");
                        var str = xhr.responseText;
                        var obj = JSON.parse(str);
                        // console.log(obj);
                        var subObj = obj[name];
                        // console.log(subObj);
                        oTitle.innerHTML = subObj.title;
                        oDes.innerHTML = subObj.des;
                        oImg.setAttribute("src", subObj.image);
                    },

cookie

cookie是什么，cookie是一种会话客户端跟踪技术
cookie作用:
将网页中的数据保存到浏览器中

        cookie生命周期:
        默认情况下生命周期是一次会话(浏览器被关闭)
        如果通过expires=设置了过期时间, 并且过期时间没有过期, 那么下次打开浏览器还是存在
        如果通过expires=设置了过期时间, 并且过期时间已经过期了,那么会立即删除保存的数据

        cookie作用范围:
        同一个浏览器的同一个路径下访问
        如果在同一个浏览器中, 默认情况下下一级路径就可以访问
        如果在同一个浏览器中, 想让上一级目录也能访问保存的cookie, 那么需要添加一个path属性才可以;
        document.cookie = "name=zs;path=/;";

编写cookie代码

			alert(document.cookie);
            var date = new Date();
            date.setDate(date.getDate() - 1);
            //下面是设置cookie的内容和有效时间格式
            document.cookie = "age=33;expires="+date.toGMTString()+";";
            alert(document.cookie);

cookie的注意点

        cookie注意点:
        cookie默认不会保存任何的数据
        cookie不能一次性保存多条数据, 要想保存多条数据,只能一条一条的设置
        cookie有大小和个数的限制
        个数限制: 20~50
        大小限制: 4KB左右

cookie完整保存形式：既能在各个目录下访问，又能在多级域名中访问。

document.cookie = “name=zs;path=/;domain=127.0.0.1;”;

cookie的添加方法封装

            function addCookie(key, value, day, path, domain) {
                // 1.处理默认保存的路径
                // if(!path){
                //     var index = window.location.pathname.lastIndexOf("/")
                //     var currentPath = window.location.pathname.slice(0, index);
                //     path = currentPath;
                // }
                var index = window.location.pathname.lastIndexOf("/")
                var currentPath = window.location.pathname.slice(0, index);
                path = path || currentPath;
                // 2.处理默认保存的domain
                domain = domain || document.domain;
                // 3.处理默认的过期时间
                if(!day){
                    document.cookie = key+"="+value+";path="+path+";domain="+domain+";";
                }else{
                    var date = new Date();
                    date.setDate(date.getDate() + day);
                    document.cookie = key+"="+value+";expires="+date.toGMTString()+";path="+path+";domain="+domain+";";
                }
            }

cookie封装后的调用：
addCookie(“gender”, “male”);
addCookie(“score”, “998”, 1, “/”, “127.0.0.1”);
cookie的删除和调用方法的封装

            //调用cookie，利用函数分割读取其中对应的value
            function getCookie(key) {
                // console.log(document.cookie);
                var res = document.cookie.split(";");
                // console.log(res);
                for(var i = 0; i < res.length; i++){
                    // console.log(res[i]);
                    var temp = res[i].split("=");
                    // console.log(temp);
                    if(temp[0].trim() === key){
                        return temp[1];
                    }
                }
            }
            console.log(getCookie("name"));
            -------------------------------
            //删除cookie
            // 默认情况下只能删除默认路径中保存的cookie, 如果想删除指定路径保存的cookie, 那么必须在删除的时候指定路径才可以
            function delCookie(key, path) {
                addCookie(key, getCookie(key), -1, path);
            }

什么是hash？
种哈希：window.location.hash = 3;
获取哈希：console.log(window.location.hash.substring(1));