一、ajax介绍
工作中的项目都是前后端分离模式进行开发的，前端渲染页面需要的数据是跟后端请求回来的。前端对后端发送请求，除了使用a标签、输入网站敲回车、引入css、引入js、引入网站图标、引入图片，表单之外，还可以使用另外一个技术ajax。
ajax，可以发送get请求，可以发送post请求，可以设置请求头，请求发送不依赖页面跳转，页面不跳转也可以发送请求，ajax技术在项目中应用广泛，且每个项目必须用到ajax来发送请求
Ajax的原理简单来说，实际上就是通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面
二、ajax语法
AJAX，全称：async javascript and XML，是一个异步执行的和后台交互的技术。
//1. 创建ajax对象
var xhr=new XMLHTTpRequest()
//2. 设置请求方式和请求路径、同步false/异步true,默认
xhr.open(请求方式, 请求地址, true)
//3. 发送请求
xhr.send();
//4. 监听请求的状态
xhr.onreadystatechange = function(){
// 事件会在ajax请求的状态发生改变的时候会触发
// ajax状态
xhr.readyState
// 响应状态码 - http状态码
xhr.status
// 响应数据
xhr.responseText
};
//get请求和post请求不传递参数的情况，上述代码就够了；
//post请求传递参数的情况，在上述代码的结束上，需要做些许改动：
//在send发送请求之前，必须先设置请求头：
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
//在send方法中要传递参数:
xhr.send('键=值&键=值&键=值')ajax状态说明：
0：未初始化，对象已经建立，但是还未初始化，就是还未调用open方法
1：请求已经发送，正在发送中
2：请求已经发送服务器
3：服务器正在给客户端响应信息，数据还不完整
4：响应完成，数据全部传送完成，请求结束了
http状态码说明：
1xx：请求发送到服务器了，服务器正在分析这次请求 - 通常指正在请求中
2xx：请求是成功的
3xx：请求收到，但必须要进一步处理 - 通常是准备响应，指定从哪里响应
4xx：客户端错误
5xx：服务器端错误
监听代码说明：
判断ajax状态是否完成，要确保数据响应结束
响应结束时，判断请求是否是成功的
接收响应数据
三、js处理ajax响应的各种数据
处理普通字符串
普通字符串接收到后，若要显示在页面中，则使用dom操作；若要进一步处理则使用字符串运算或方法。
var res=xhr.responseText();
//字符串需要处理-字符串方法，基本操作
res = res.split('').reverse().join('')
// 2.将普通字符串放在标签中 - 普通dom操作
document.querySelector('.box').innerText = res
console.log(res);处理json格式字符串
json字符串需要转成数组或对象使用：
var res=xhr.responseText();
res=JSON.parse(json字符串)
let { 解构 }=res处理css字符串
css字符串需要放在style标签中才能生效
//后端响应
res.end('div{ background: red}')
//前端处理
var style = document.createElement('style')
style.innerText = res
document.head.appendChild(style)处理js字符串
返回的数据如果是js代码的字符串，则需要运行js代码
eval(js代码字符串)
//后端响应
res.end('alert(123)')
//前端处理
eval(res)处理html字符串
需要将响应回来的html字符串，当做某个标签的innerHTML使用：
//后端响应
res.end('<b>哈哈</b>')
//前端处理
document.querySelector('.box').innerHTML = res处理xml字符串
如果响应的是xml文件数据，则需要通过特殊的属性来接收：xhr.responseXML
接收到的是一个文档document，可以利用dom操作进行：
//xml文件（test.xml）：
<?xml version="1.0" encoding="utf-8"?>
<data>
<student id="1">
<name>张三</name>
<age>12</age>
<sex>男</sex>
</student>
<student id="2">
<name>李四</name>
<age>13</age>
<sex>女</sex>
</student>
</data>
//xml文件中不能有xml标签
//后端响应
res.sendFile(__dirname + '/test.xml')
//前端处理
var res = xhr.responseXML // 接收到是一个文档
var names = res.querySelectorAll('name')
console.log(names);
for(var a=0; a<names.length; a++) {
console.log( names[a].innerHTML );
}
//xml的dom中，没有innerText，只有innerHTML四、cookie和本地存储
cookie
cookie是基于http无法保持状态而出现的一种解决方案。原理是利用多次请求使用的是同一个浏览器，在浏览器中利用数据的存储来达到保持状态的功能。例如：登录成功后，将账号或昵称保存在浏览器，其他http请求打开页面后，从浏览器中获取数据，判断之前是否登录过。
cookie特性
cookie本质上就是http协议下，浏览器的存储技术，有以下几个特性：
以键值对形式存储
具有时效性，不设置有效期，默认关闭浏览器失效；设置了有效期后，有效期后访问则会自动删除。cookie识别的时间是世界标准时间（东八区时间-8小时）
分域名存储，当前域名下设置的cookie，只能在当前域名下访问
分路径存储，当前路径下设置的cookie，只能在当前路径下访问
大小和数量受浏览器显示，最大4kb，最多150条
cookie默认会请求头和响应头之间来回传递，也就是默认会带给服务器
cookie操作
存储cookie
document.cookie = 'key=value;expires=失效时间日期对象(世界标准时间);path=路径'
//一次只能设置一条cookie，设置多条就需要设置多次。获取cookie
document.cookie
//一次性获取到所有的cookie，每个cookie之间使用分号空格分割删除cookie
前端js没有删除cookie的语法，可以将cookie的失效时间设置为上1秒，等同于删除cookie。
cookie操作封装
// 设置cookie的函数
function setCookie(key, value, seconds, path = '/') {
var date = new Date()
date.setTime(date.getTime() - 8 * 3600 * 1000 + seconds * 1000)
document.cookie = `${key}=${value};expires=${data};path=${path}`
}
// 获取cookie的函数
function getCookie(key) {
var cookies = document.cookie
if(!cookies) return
var reg = /[^=; ]=[^; ]/g
while(true) {
var arr = reg.exec(cookies)
if(!arr && arr[1] === key) {
return arr[2]
}
}
}
// 删除cookie的函数
function removeCookie(key, path = '/') {
setCookie(key, null, -1, path)
}本地存储
本地存储也属于浏览器存储数据的一种技术，本地存储由如下几个特点：
本地存储是以键值对形式存储的
本地存储分域名存储，本地打开的页面也可以存储
本地存储没有时效性，默认永久存储
本地存储的大小较大一些（5MB）
本地存储默认不会携带给服务器
本地存储API：
// 存数据
window.localStorage.setItem(key, value)
// 获取数据
localStorage.getItem(key)
// 删除数据
localStorage.removeItem(key)
// 清空本地存储
localStorage.clear()// 例：存储token
localStorage.setItem('token', token)
// 存储登录后要跳转的路径：
localStorage.setItem('url', location.href)五、ajax封装
// 封装发送ajax的get和post请求的函数
function request(obj) {
if(obj.url === undefined) {
throw new Error('请求地址不能为空！')
}
if(typeof obj.url != 'string') {
throw new Error('请求地址不正确！')
}
if(obj.method === undefined) {
obj.method = 'get'
}
if(obj.method.toLowerCase() != 'get' && obj.method.toLowerCase() != 'post') {
throw new Error('请求方式必须是get或post')
}
if(obj.async === undefined) {
obj.async = true
}
if(typeof obj.async != 'boolean') {
throw new Error('async必须是布尔值！')
}
if(obj.data != undefined) {
var data = ''
if({}.toString.call(obj.data) === '[object String]') {
if(!obj.data.includes('=')) {
throw new Error('字符串数据格式：键=值！')
}
data = obj.data
} else if({}.toString.call(obj.data) === '[object Object]') {
var arr = []
for(var key in obj.data) {
arr.push(key + '=' + obj.data[key])
}
data = arr.join('&')
} else {
if(!obj.data.includes('=')) {
throw new Error('数据必须是字符串或独享！')
}
}
if(obj.method.toLowerCase() === 'get') {
obj.url += '?' + data
}
}
if(obj.success === undefined) {
obj.success = () => {}
}
if(typeof obj.success != 'function') {
throw new Error('success必须是函数')
}
if(obj.error === undefined) {
obj.error = () => {}
}
if(typeof obj.error != 'function') {
throw new Error('error必须是函数')
}
if(obj.dataType === undefined) {
obj.dataType = 'json'
}
var xhr = new XMLHttpRequest
xhr.open(obj.method, obj.url, obj.async)
if(obj.headers != undefined) {
if({}.toString.call(obj.header) != '[object Object]') {
throw new Error('headers头信息必须是对象！')
}
for(var key in obj.headers) {
xhr.setRequestHeader(key, obj.headers[key])
}
}
if(obj.method.toLowerCase() === 'post' && data != undefined) {
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send(data)
} else {
xhr.send()
}
if(obj.async === true) {
xhr.onreadystatechange = function() {
console.log(xhr.readyState);
if(xhr.readyState === 4) {
if(xhr.status >= 200 && xhr.status < 300) {
switch(obj.dataType) {
case 'json':
var res = xhr.responseText
res = JSON.parse(res)
break
case 'text':
var res = xhr.responseText
break
case 'xml':
var res = xhr.responseXML
break
default:
throw new Error('dataType必须是json或text或xml！')
}
obj.success(res)
} else {
obj.error()
}
}
}
} else {
switch(obj.dataType) {
case 'json':
var res = xhr.responseText
res = JSON.parse(res)
break
case 'text':
var res = xhr.responseText
break
case 'xml':
var res = xhr.responseXML
break
default:
throw new Error('dataType必须是json或text或xml！')
}
obj.success(res)
}
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
