版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_40028324/article/details/82562758
-
什么是ajax(前后端分离和不分离的优势弊端)
ajax基础知识
什么是ajax？
async javascript and xml ，异步的js和xml
xml：可扩展的标记语言
作用是用来存储数据的（通过自己的扩展的标记名称清晰的展示出数据结构）
ajax之所以称之为一步的js和xml，主要原因是：当初最开始使用ajax
实现客户端和服务器端数据通信的时候，传输的数据格式一般都是xml格式的数据
，所以称之为异步js和xml（现在一般都是基于json格式来进行数据传输的）
异步的js
这里的异步不是说ajax只能基于异步进行请求（虽然建议都使用异步编程），
这里的异步特指的是“局部刷新”
局部刷新vs全局刷新
在非完全前后端分离项目中，前端开发只需要完成页面的制作，并且把一些基础的人机交互效果
，使用js完成即可，页面中需要动态呈现内容的部分，都是交给后台开发工程师做数据绑定和基于
服务器进行渲染的
【优势】
1.动态展示的数据在页面的源代码中可以看见，有利于SEO优化推广（有利于搜索引擎的收录和抓取）
2.从服务器端获取的结果就是最后要呈现的结果了，不需要客户端做额外的事情，所以页面加载速度快（
前提是服务器端处理的速度够快）
【弊端】
1.如果页面存在需要实时更新的数据，每次想要展示最新的数据，
页面都需要重新的刷新一次
2.都交给服务器端做数据渲染，服务器端的压力太大，如果服务器处理不过来，页面呈现的速度更慢
3.这种模式不利于开发（开发效率低）
目前市场上大部分项目都是前后端完全分离的项目
前后端完全分离的项目，页面中需要动态绑定的数据是交给客户端完成渲染的
1.向服务器发送ajax请求
2.把从服务器端获取的数据解析处理，拼接成为我么需要的html字符串
3.把拼接好的字符串替换页面中某一部分的内容（局部刷新），页面整体不需要重新加载
局部渲染即可
【优势】
1.我们可以根据需求任意修改页面中某一部分的内容（例如实时刷新），整体页面不刷新，性能好，体验好
（所有表单验证，需要实时刷新的等需求都要基于ajax实现）
2.有利于开发，提高开发效率
前后端完全分离，后台不需要考虑前端如何实现，前端也不需要考虑后端用什么技术，真正意义上实现了技术的划分
可以同时开发：项目开发开始，首先指定前后端数据交互的文档接口（文档中包涵了调取哪个接口或者哪些数据等协议规范）
后台先把接口写好（目前很多公司也需要前端自己拿node来模拟这些接口），客户端按照接口调取即可，后台在此去实现接口功能即可
【弊端】
1.不利于SEO优化：第一次从服务器端获取的内容各种不好喊需要动态绑定的数据，所以页面的源代码中没有这些内容，
不利于SEO收录，后期通过js添加到页面中的内容，并不会卸载页面的源代码中（是源代码不是页面结构）
2.交由客户端渲染，首先需要把页面呈现，然后再通过js的异步ajax请求获取数据，然后数据绑定，浏览器再把动态增加的
部分重新渲染，无形中浪费了一些时间，没有服务器段渲染页面呈现速度-
GET请求和POST请求的区别
基于原生js实现ajax
1.let xhr=new XMLHttpRequest()
//不兼容IE6及更低版本的浏览器（ie6：ActiveXObject）
2.xhr.open([method],[url],[async],[user name],[user password])
//打开请求地址（可以理解成一些基础配置，但并没有发送请求）
3.xhr.onreadystatechange=function(){
//监听AJAX状态改变，获取响应信息（获取响应头信息，获取响应主体信息）
if(xhr.readyState===4&&xhr.status===200){
let result=xhr.responseText; //获取响应主体中的内容
}
}
4.xhr.send(null)
//发送ajax请求（括号中传递的内容就是请求主体的内容）
xhr.open([method],[url],[async],[user name],[user password])
[AJAX请求方式]
1.GET请求系列
get：
delet：//从服务器上删除某些资源文件
head：只想获取服务器返回的响应头信息（响应主体的内容不需要获取）
...
2.POST请求系列
post：
put：//向服务器中增加指定的资源文件
...
不管哪一种请求方式，客户端都可以把信息传递给服务器，服务器也可以把信息返回给客户端
只是GET系列一般以获取为主（给的少，拿回来的多），而post系列一般以同送为主（给的多，拿回来的少）
1.如果想获取一些动态展示的信息，一般使用get请求，因为只需要向服务器发送请求，告诉服务器想要什么
，服务端就会把需要的数据返回
2.在实现注册功能的时候，我们需要把客户输入的信息发送给服务器进行存储，服务器一般返回成功还是失败等状态
此时一般基于POST请求完成
GET系列请求和POST系列请求，在项目实战中存在很多的区别
1.GET请求传递给服务器的内容一般没有POST请求传递给服务器的内容多
原因：GET请求传递给服务器的内容一般都是基于url地址问号传递参数来实现的，而post请求一般都是基于
设置请求主体来实现的，各大浏览器都有自己的URL最大限制（谷歌：8kb，火狐：7kb，ie：2kb...）
超过长度的部分，浏览器会自动截取掉，导致传递给服务器数据丢失。
理论上post请求通过请求主体传递是没有大小限制的，真实项目中为了保证传输的速率，我们也会限制大小（例如：上传的资料或者
图片我们会做大小的限制）
2.GET请求很容易出现缓存（这个缓存不可控：一般都不需要），而post不会出现缓存（除非自己特殊处理）
3.GET请求没有post请求安全（post也并不是十分安全，只是相对安全）
url：请求数据的地址（API地址），后台开发工程师会编写一个api文档，在api文档中汇总了一些哪些数据需要使用哪些地址
async：异步，设置当前ajax请求是异步还是同步的，不写默认是异步（true），如果设置为false，则代表当前请求是同步的
用户名和密码：一般不用，如果请求的url地址所在的服务器设定了访问权限，则需要提供可通行的用户名和密码才可以（一般服务器都可以允许匿名访问）
-
ajax状态码和网络状态码详解
1.let xhr=new XMLHttpRequest()
//不兼容IE6及更低版本的浏览器（ie6：ActiveXObject）
2.xhr.open([method],[url],[async],[user name],[user password])
//打开请求地址（可以理解成一些基础配置，但并没有发送请求）
3.xhr.onreadystatechange=function(){
//监听AJAX状态改变，获取响应信息（获取响应头信息，获取响应主体信息）
if(xhr.readyState===4&&xhr.status===200){
let result=xhr.responseText; //获取响应主体中的内容
}
}
4.xhr.send(null)
//发送ajax请求（括号中传递的内容就是请求主体的内容）
ajax状态码：描述当前ajax操作的状态的
xhr.readyState
0:UNSENT 未发送，只要创建了一个ajax对象，默认值就是0
1：OPEND 执行了xhr.open这个操作
2：HEADERS_RECEIVED 当前ajax的请求已经发送，并且已经接收到服务器端换回的响应头信息了
3：LOADING 响应主体内容正在返回的路上
4：DONE响应主体内容已经返回到客户端
HTTP网络状态码：记录了当前服务器返回信息的状态
xhr.status
200:成功，一个完整的HTTP事务完成（以2开头的一般都是成功）
以3开头的一般也是成功，只不过服务器做了很多别的处理
301：永久转移（永久重定向） 一般用于域名迁移
302：临时转移（临时重定向，新的http版本307是重定向） 一般用于服务器的负载均衡，当前服务器处理不了，把当前请求临时交给其他服务器处理，一般图片请求经常出现302
304：从浏览器缓存中获取数据 把一些不经常更新的文件或者内容缓存到浏览器中，下一次从缓存中获取，减轻服务器压力
以4开头的，一般都是失败，而且是客户端的问题
400：请求参数错误
401：无权限访问
404：访问地址不存在
以5开头的，一般都是失败，而且服务器问题偏大
500：未知的服务器错误
503：服务器超负载关于网络状态码 我的另一篇讲的更详细请求接口返回状态码
-
AJAX中的其他常用属性和方法详解
ajax中其他常用的属性和方法
面试题：ajax中总共支持几个方法？
let xhr = new XMLHttpRequest()
console.dir(xhr)
[属性]：
。 readyState：存储的是当前ajax的状态码
。 reasponse/responseText/responseXML:都是用来接收服务器返回的响应主体中的内容
只是根据服务器返回的格式不一样，使用不同的属性拉接收
。 responseText是最常用的，接收到的结果是字符串格式的(一般服务器返回的数据都是JSON格式字符串)
。 responseXML偶尔会用到，如果服务器返回的xml文档数据，就需要用这个属性去接收
。 status：记录了服务器返回的http状态码
。 statusText：对返回状态码的描述
。 timeout：设置当前ajax请求的超时时间，假设设置的是3000ms，从ajax请求发送开始，3秒后响应主体没有返回，浏览器会把当前
ajax请求任务强制断开
[方法]：
。abort():强制中断ajax请求
。getAllResponseHeaders():获取全部的响应头信息（获取的结果是字符串文本）
。getResponseHeader(key):获取指定属性名的响应头信息：例如：xhr.getResponseHeader("date")获取响应头中存储的服务器时间
。open（）：打开一个url地址
。overrideMimeType（）：重写数据的MIME类型
。send（）：发送ajax请求（括号中书写的内容是客户端基于请求主体把信息传递给服务器）
。setRequestHeader(key,value)：设置请求头信息（可以是设置的自定义请求头信息）
[事件]：
。onabort:当ajax被中断请求是触发这个事件
。onreadystatechange:ajax状态发生改变触发这个事件
。ontimeout:当ajax请求超时，会触发这个事件-
js中常用的内容编码和加密解密方法
js中常用的编码编码解码方法
正常的编码解码(非加密)
1.escape/unescape:主要是把中文汉字进行编码和解码的(一般只有js语言支持：也经常应用于前端页面通信的时候的汉字编码)
2.encodeURI/decodeURI 基本上所有的编程语言都支持
3.encodeURIComponent /decodeURIComponent
需求：我们url问号传递参数的时候，参数值还是一个url或者包涵很多特殊字符，此时为了不影响主要的url
需要把传递的参数值进行编码，使用encodeURI不能编码一些特殊字符，所以只能使用encodeURLComponent处理-
ajax中的同步和异步编程
ajax任务：发送请求接收到响应主体内容（完成 一个完整的http事务）
let xhr=new XMLHttpRequest();
xhr.open('get','temp.json',false)
xhr.onreadystatechange=()=>{
console.log(xhr.readyState)
}
xhr.send()
//只输出一次 结果是4
let xhr=new XMLHttpRequest();
xhr.open('get','temp.json') //异步编程这是
xhr.onreadystatechange=()=>{
console.log(xhr.readyState)
}
xhr.send()
//2 3 4-
jq中的ajax详解
$.ajax({
url:'',//设置请求api地址
method:'get',//请求方式get/post。。。在老版本中用的是type
dataType:'json',// datatype只是我们预设获取结果的类型（期望的类型）,不会影响服务器的返回，服务器一般给我们返回的都是json格式字符串，
//如果我们预设的是json 那么类库中将把服务器返回的字符串转换为json对象,如果预设的是text，我们把服务器获取的结果直接拿过来操作结果，我们预设的还可以是xml等
cache:false,//设置是否清楚缓存,只对GET请求起作用，默认是true不清楚缓存，手动设置为false，jq会在请求的url末尾会追加一个随机数来清楚缓存
data:null,//data可以把一些信息传递给服务器,get系列请求会把data中的内容拼接到url的末尾通过问号传参的方式传递给服务器
//post系列请求会把内容放在请求主体中传递给服务器；data的值可以设置成两种格式：字符串和对象，如果是字符串，设置的值时什么传递给服务器的就是什么
//如果设置的是对象，jq会把对象变为xxx=xxx这样的祖父穿传递给服务器
async:true,//设置同步或者异步，默认是true代表异步
success:function(res){
//当ajax请求成功（readyState===4&&status是以2或者3开头的）
//请求成功后jq会把传递的回调函数执行，并且把获取的结果当做实参传递给回调函数
},
error:function(){
//请求失败的回调函数
},
complate:function(){
//不管是成功还是失败都会执行 代表请求完成
}
})-
封装自己的ajax库
<script>
~function(){
class ajaxClass{
//执行ajax
init(){
let xhr =new XMLHttpRequest()
xhr.onreadystatechange=()=>{
if(!/^[23]\d{2}$/.test(xhr.status)) return
if(xhr.readyState===4){
let result =xhr.responseText
switch(this.dataType.toUpperCase()){
case 'TEXT':
break
case 'HTML':
break
case 'JSON':
result=JSON.parse(result)
break
case 'XML':
result =xhr.responseXML
}
this.success(result)
}
}
if(this.data!==null){
this.farmatData()
if(this.isGET){
this.url+=this.querySymbol()+this.data
this.data=null
}
}
this.isGET?this.cache():null
xhr.open(this.method,this.url,this.async)
xhr.send()
}
farmatData(){
if(({}).toString.call(this.call)==="[object Object]"){
let obj=this.data
str=''
for(let key in obj){
if(obj.hasOwnProperty(key)){
str+=`${key}=${obj[key]}&`;
}
}
str=str.replace(/&$/g,'')
this.data=str
}
}
cacheFn(){
if(!this.cache){
!this.cache?this.url+=`${this.querySymbol()}_=${Math.random()}`:null
}
}
querySymbol(){
return this.url.indexOf("?")>-1?'&':'?'
}
}
//参数初始化
window.ajax=function({url=null,method='GET',type='GET',data=null,dataType='JSON',cache=true,async=true,success=null}={}){
let example= new ajaxClass()
example.url=url
example.method=type===null?method:type
example.data=data
example.dataType=dataType
example.cache=cache
example.async=async
example.success=typeof success ==='function'?success: new Function()
example.isGET=/^(get|delete|head)$/i.test(example.method)
example.init()
}
}()
</script>