Ajax基础知识及封装

什么是Ajax

AJAX 是在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。

get请求

oBtn.onclick = function (ev1) {
        // 1.创建一个异步对象
        var xmlhttp=new XMLHttpRequest();
        // 2.设置请求方式和请求地址
        /*
        method：请求的类型；GET 或 POST
        url：文件在服务器上的位置，也可为txt文件
        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){
                // 判断是否请求成功
					status为页面相应的状态码，在200-300之间或者304为正常，其他为异常，如：404
                if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
                    xmlhttp.status === 304){
                    // 5.处理返回的结果
                    console.log("接收到服务器返回的数据");
                }else{
                    console.log("没有接收到服务器返回的数据");
                }

            }
        }
    }

IE浏览器兼容处理

异步对象处理

	if (window.XMLHttpRequest)
	{// code for IE7+, Firefox, Chrome, Opera, Safari
	    xhr=new XMLHttpRequest();
	}
	else
	{// code for IE6, IE5
	    xhr=new ActiveXObject("Microsoft.XMLHTTP");
	}

URL处理

在IE浏览器中, 如果通过Ajax发送GET请求, 那么IE浏览器认为同一个URL只有一个结果。
可用Math.random()生成随机字符串，或者Date().getTime()生成时间戳，添加到URL结尾

   /*
	console.log(Math.random());
    console.log(new Date().getTime());
    */
    xhr.open("GET","05-ajax-get.txt?t="+(new Date().getTime()),true);

post请求

post请求与get类似，只在open和send两个方法中间添加

setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);

    oBtn.onclick = function (ev1) {
        var xhr;
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xhr=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xhr=new ActiveXObject("Microsoft.XMLHTTP");
        }
        // var xhr = new XMLHttpRequest();
        xhr.open("POST","08-ajax-post.php",true);
        // 注意点: 以下代码必须放到open和send之间
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.send("userName=zs&userPwd=321");
        xhr.onreadystatechange = function (ev2) {
            if(xhr.readyState === 4){
                if(xhr.status >= 200 && xhr.status < 300 ||
                xhr.status === 304){
                    // alert("请求成功");
                    alert(xhr.responseText);
                }else{
                    alert("请求失败");
                }
            }
        }
}

Ajax的封装与优化（参考jQuery中的ajax）

function obj2str(data) {
    /*
    {
        "userName":"jly",
        "userPwd":"123456",
        "t":"3712i9471329876498132"
    }
    */
    data = data || {}; // 如果没有传参, 为了添加随机因子,必须自己创建一个对象
    data.t = new Date().getTime();	// 添加时间戳属性
    var res = [];
    for(var key in data){
        // 在URL中是不可以出现中文的, 如果出现了中文需要转码
        // 可以调用encodeURIComponent方法转码
        // URL中只可以出现字母/数字/下划线/ASCII码
        res.push(encodeURIComponent(key)+"="+encodeURIComponent(data[key])); // [userName=lnj, userPwd=123456];
    }
    return res.join("&"); // userName=lnj&userPwd=123456
}
function ajax(option) {
    // 0.将对象转换为字符串
    var str = obj2str(option.data); // key=value&key=value;
    // 1.创建一个异步对象
    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");
    }
    // 2.设置请求方式和请求地址
    /*
    method：请求的类型；GET 或 POST
    url：文件在服务器上的位置
    async：true（异步）或 false（同步）
    */
    if(option.type.toLowerCase() === "get"){
        xmlhttp.open(option.type, option.url+"?"+str, true);
        // 3.发送请求
        xmlhttp.send();
    }else{
        xmlhttp.open(option.type, option.url,true);
        // 注意点: 以下代码必须放到open和send之间
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send(str);
    }

    // 4.监听状态的变化
    xmlhttp.onreadystatechange = function (ev2) {
        /*
        0: 请求未初始化
        1: 服务器连接已建立
        2: 请求已接收
        3: 请求处理中
        4: 请求已完成，且响应已就绪
        */
        if(xmlhttp.readyState === 4){
            clearInterval(timer);
            // 判断是否请求成功
            if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
                xmlhttp.status === 304){
                // 5.处理返回的结果
                // console.log("接收到服务器返回的数据");
                option.success(xmlhttp);
            }else{
                // console.log("没有接收到服务器返回的数据");
                option.error(xmlhttp);
            }
        }
    }
    // 判断外界是否传入了超时时间
    if(option.timeout){
        timer = setInterval(function () {
            console.log("中断请求");
            xmlhttp.abort();
            clearInterval(timer);
        }, option.timeout);
    }
}

调用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09-ajax-jquery</title>
    <!--<script src="js/jquery-1.12.4.js"></script>-->
    <script src="myAjax2.js"></script>
    <script>
        window.onload = function (ev) {

            var oBtn = document.querySelector("button");
            oBtn.onclick = function (ev1) {
                // $.ajax({
                //     url: "09-ajax-jquery.php",
                //     type: "get",
                //     data: "userName=lnj&userPwd=654321",
                //     success: function(msg){
                //         alert(msg );
                //     },
                //     error: function (xhr) {
                //         alert(xhr.status);
                //     }
                // });

                ajax({
                    url:"04-ajax-get.php",
                    data:{
                        "userName":"lnj",
                        "userPwd":"123456"
                    },
                    timeout: 3000,
                    type:"post",
                    success: function (xhr) {
                        alert(xhr.responseText);
                    },
                    error: function (xhr) {
                        alert("请求失败");
                    }
                });
            }
        }
    </script>
</head>
<body>
<button>发送请求</button>
</body>
</html>

Ajax数据格式的引用

Ajax-XML

使用responseXML;获取XML数据，再用querySelector(“标签名”).innerHTML;获取标签中的数据。

        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); //设置图片路径

Ajax-JOSN

先通过responseText;获得JSON的数据，存放在变量str中。再通过JSON.parse(str)获得json对象。通过 对象.属性 可以分别取出属性中值。json可以直接创建.json文件，或者.txt文件，只要格式符合json数据的格式就行。

注意：在低版本的IE中, 不可以使用原生的JSON.parse方法, 但是可以使用json2.js这个框架来兼容。可上GitHub下载json2.js框架，将里面的json2.js文件引入到项目中即可。

• 要实现从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”}’

        var name = self.getAttribute("name");//得到所点击的按钮的名称属性
        var str = xhr.responseText;
        var obj = JSON.parse(str); //获得json对象，可看成一个数组
        var subObj = obj[name];	//通过数组的下标找到下一级的数据
        oTitle.innerHTML = subObj.title;	//设置界面元素的值
        oDes.innerHTML = subObj.des;
        oImg.setAttribute("src", subObj.image);//设置图片路径

微博案例

不标准json数据的转换

非标准的JSON字符串: {error: 0, id: 1, time: 1526541587, acc: 0, ref: 0}
标准的JSON字符串: {"error": "0", "id": "1", "time": "1526541587", "acc": "0", "ref": "0"}
非标准JSON字符串会报以下错误：

VM179:1 Uncaught SyntaxError: Unexpected token e in JSON at position 1

可用eval();方法转换，但是实际开发中不提倡。
注意：在转换json数组时需要手动在数组两边添加上括号()

var obj = eval("("+msg+")");

常见jQuery的ajax的使用格式

        $.ajax({
            type:"get",
            url:"weibo.php",
            data:"act=acc&id="+obj.id,
            success: function (msg) {
                console.log(msg);
            },
            error: function (xhr) {
                alert(xhr.status);
            }
        });

parents()方法

通过parents(“元素id或名称”)可以获取到当前元素的父元素。

var obj = $(this).parents(".info").get(0).obj;

get(0)   表示查找到的第一个元素。

jQuery插件的添加

将文件名命名为jquery.自定义名称.js
书写格式：

;(function ($, window){
    // 这里写自定义的函数
    /**
     * 可通过$.extend添加方法，
     * 要将自定义的方法格式改为     函数名:function(){},
     * 注意：除最后一个，每个自定义的函数后都要加逗号，
     */
})(jQuery,window);

注意：在html文件中也要做引入

Cookie封装

Cookie说明

cookie生命周期:

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

cookie注意点:

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

cookie作用范围:

同一个浏览器的同一个路径下访问
如果在同一个浏览器中, 默认情况下下一级路径就可以访问

• path
  如果在同一个浏览器中, 想让上一级目录也能访问保存的cookie, 那么需要添加一个path属性才可以;

document.cookie = "name=zs;path=/;";

例如:
保存到了www.it666.com/jQuery/Ajax/路径下,
我们想在 www.it666.com/jQuery/Ajax/13-weibo/,
和 www.it666.com/jQuery/ 路径下也能访问

• domain
  例如:
  我们在www.it666.com下面保存了一个cookie,
  那么我们在edu.it666.com中是无法访问的
  如果想在edu.it666.com中也能访问, 那么我们需要再添加一个domain属性才可以;

document.cookie = "name=zs;path=/;domain=it666.com;";

综合格式：

document.cookie = "name=zs;path=/;domain=127.0.0.1;";

toGMTString()方法

toGMTString() 方法可根据格林威治时间 (GMT) 把 Date 对象转换为字符串，并返回结果。
返回值：dateObject 的字符串表示。此日期会在转换为字符串之前由本地时区转换为 GMT 时区。
提示：不赞成使用此方法。请使用 toUTCString() 取而代之！

var d = new Date()
document.write (d.toGMTString())

将cookie的处理方法封装成jQuery的插件

代码：jquery.cookie.js

;(function($, window){
  $.extend({
    //添加cookie方法：
    addCookie: function (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+";";
      }
    },

    //获取cookie方法：
    getCookie: function (key){
      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方法：
    delCookie: function (key, path){
      addCookie(key, getCookie(key), -1, path);
    }
  });
})(jQuery, window);

说明：

var index = window.location.pathname.lastIndexOf("/")   //通过“/”分割除去最后的文件名
var currentPath = window.location.pathname.slice(0, index);     //切割字符串
domain = domain || document.domain;     //非运算，如果有传入domain，即第一个为真，后面就不运行

hash

设置hash的值：

window.location.hash = 3;

种hash

var number = window.location.hash.substring(1) || 1;

这里通过substring(1)，切割掉了hash值中处在第一个#，方便实际的使用。非运算（||）同上。
在实际开发中通常使用hash来作为页码的记忆和实现页面跳转。



我自己博客的链接：https://rainying.com/2019/12/06/Ajax基础知识及封装/