Ajax 学习笔记

什么是 Ajax？
Ajax 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下

使用 Ajax 发送 GET 请求的步骤

// 1、创建一个异步对象
var xmlhttp = new XMLHttpRequest()
// 2、设置请求方式和请求地址
//    open(method, url, async)
//         method：请求的类型：GET 还是 POST
//         url：服务器（文件）位置
//         async：true（异步）或 false（同步）
xmlhttp.open("GET", "04-ajax-get.php", true)
// 3、发送请求
xmlhttp.send()
// 4、监听状态的变化
xmlhttp.onreadystatechange = function (ev2) {
    // 0: 请求未初始化
    // 1: 服务器连接已建立
    // 2: 请求已接收
    // 3: 正在处理请求
    // 4: 请求已完成且响应已就绪
    if(xmlhttp.readyState === 4) {
        // 判断是否请求成功
        if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
            xmlhttp.status === 304){
                // 5、处理返回的结果
                console.log("接收到服务器返回的数据")
            } else {
                console.log("没有接收到数据")
            }
    } 
}

对 IE 浏览器的兼容

在创建异步对象时，要注意兼容 IE5、IE6

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

IE 缓存问题

在 IE 浏览器中，如果通过 Ajax 发送 GET 请求，那么 IE 浏览器认为同一个 URL 只有一个结果，即请求一个地址后，地址内容发生变化，Ajax 请求到的内容却不会发生改变

解决方法：在请求路径后拼接上时间戳

xhr.open("GET", "04-ajax-get.php?t="+(new Dtae().getTime()), true)

Ajax-GET 封装

解决了 IE 浏览器的兼容，设置了超时时间，且将中文路径转换成字符串。
在 URL 中是不可出现中文的，如果出现中文就需要转码。
URL 中只可以出现字母、数字、下划线、ASCII 码

function obj2str (obj) {
    obj.t = new Date().getTime()
    var res = []
    for(var key in obj) {
        // encodeURIComponent 将中文转换成字符串
        res.push(encodeURIComponent(key)+"="+encodeURIComponent(obj[key]))
    }
    return res.join('&')
}

function ajax (url, obj, timeout, success, error) {
    // 将对象转换成字符串
    var str = obj2str(obj)
    var xmlhttp, timer;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    var xmlhttp = new XMLHttpRequest()
    xmlhttp.open("GET", url+"?"+str, true)
    xmlhttp.send()
    xmlhttp.onreadystatechange = function () {
        if(xmlhttp.readyState ===4) {
            // 接收到服务器响应后 关掉定时器
            clearInterval(timer)
            if(xmlhttp.status >= 200 && xmlhttp.status <300 ||
                xmlhttp.status === 304){
                    success(xmlhttp)
                } else {
                    error(xmlhttp)
                }
        }
    } 
    // 判断外界是否传入了超时时间
    if(timeout){
        timer = setInterval(function () {
            console.log("中断请求")
            // 中断请求
            xmlhttp.abort()
            // 终止定时器
            clearInterval(timer)
        }, timeout)
    }
}

使用 Ajax 发送 POST 请求

Ajax 发送 POST 请求与 发送 GET 请求步骤类似

添加请求头

// 以下代码必须放在 open 和 send 之间
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")

传参方式

xhr.send("userName=czt&userPwd=123")

Ajax-POST 封装

function obj2str (obj) {
    obj.t = new Date().getTime()
    var res = []
    for(var key in obj) {
        // encodeURIComponent 将中文转换成字符串
        res.push(encodeURIComponent(key)+"="+encodeURIComponent(obj[key]))
    }
    return res.join('&')
}

function ajax (type, url, obj, timeout, success, error) {
    // 将对象转换成字符串
    var str = obj2str(obj)
    var xmlhttp, timer;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    var xmlhttp = new XMLHttpRequest()

    if(type === "GET") {
        xmlhttp.open(type, url+"?"+str, true)
        xmlhttp.send()
    } else {
        xmlhttp.open(type, url, true)
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded")
        xmlhttp.send(str)
    }

    
    xmlhttp.onreadystatechange = function () {
        if(xmlhttp.readyState ===4) {
            // 接收到服务器响应后 关掉定时器
            clearInterval(timer)
            if(xmlhttp.status >= 200 && xmlhttp.status <300 ||
                xmlhttp.status === 304){
                    success(xmlhttp)
                } else {
                    error(xmlhttp)
                }
        }
    } 
    // 判断外界是否传入了超时时间
    if(timeout){
        timer = setInterval(function () {
            console.log("中断请求")
            // 中断请求
            xmlhttp.abort()
            // 终止定时器
            clearInterval(timer)
        }, timeout)
    }
}

Cookie 基本使用

客户端会话跟踪技术。可以将网页中的数据保存在浏览器中。默认不会保存任何数据。

保存和获取 cookie 数据的方法

// key 是要保存数据的名称   value 是对应的数值
document.cookie = "key=value"
alert(document.cookie)

cookie 的生命周期

• 默认情况下生命周期是一次会话（浏览器被关闭）。
• 如果通过 expires= 设置了过期时间，并且过期时间没有到，下次打开浏览器还是存在。
• 如果通过 expires= 设置了过期时间，如果已经过期了会立即删除保存的数据。
• cookie 不能一次性设置多条数据，要想保存多条数据，只能一条一条的设置。

其他注意点：

• cookie 有大小（4KB左右）和个数（20~50条）的限制。
• 作用范围：同一个浏览器的同一个路径下访问。如果在同一个浏览器中，默认情况下下一级路径就可以访问。如果此时想要上一级也能访问保存的 cookie ，那么需要 添加 path属性： document.cookie = "key=value;path=/;"
• 如果在 www.it.com 中保存了一个 cookie ，如果要想在 edu.it.com 中也可以访问到，就需要添加 domain 属性： document.cookie = "key=value;path=/;domain=it.com;"

 var date = new Date() 
// 设置过期时间为明天
date.setDate(date.getDate() + 1)
document.cookie = "age=18;expires=" + date.toGMTString()

cookie 方法的封装

添加方法的封装

function addCookie(key, value, day, path, domain) {
    // 1、处理默认保存路径
    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 + ";"
    }
}

获取方法的封装

function getCookie() {
    var res = document.cookie.split(";")
    for (var i = 0; i < res.length; i++) {
        var temp = res[i].split("=")
        if(temp[0].trim() === key) {
            return temp[1]
        }
    }
}

删除方法的封装

默认情况下只能删除默认路径中保存的 cookie ，如果想要删除指定路径保存的 cookie ，那么必须在删除时指定路径才可以。

function delCookie(key, path) {
    addCookie(key, getCookie(key), -1, path)
}