Ajax基础知识及封装

科技2022-07-13 157

什么是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）

调用：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>09-ajax-jquery</title>  <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基础知识及封装/

Processed: 0.018, SQL: 8