[JavaScript知识库]原生ajax

ajax对于编程来说,并不陌生,平常在开发项目时,常常需要对后台的一些相关的数据,进行请求,这时候,就需要使用到封装好的axios $.ajax等,对于原生的ajax,用的却不多

ajax请求

全称:Async Javascript and xml

技术:在网页不断刷新的情况下可以请求数据,实现网页的局部渲染或刷新

代码演示

//1.实例化一个ajax请求对象  XMLHTTPRequest是核心
let xhr=new XMLHTTPRequest()
//2.连接服务器
        请求方式 路径 是否异步
xhr.open('GET',url,false)
//设置请求头信息
                    token的名  token对应的值
xhr.setRequestHeader('token','tokenString')
//3.为Ajax引擎绑定事件监听
xhr.onreadystatechange=function(){
    console.log(xhr.readystate)
    //readystate的值0 
            0 请求未初始化(刚实例化XMLHTTPRequest)
            1 客户端和服务器建立连接(调用open方法)
            2 请求已经被接受
            3 请求在处理中(调用send方法)
            4 处理完成,返回数据给客户端
    
    //请求成功后
    if (xhr.readyState==4 && xhr.status==200){
    //响应文
    console.log(xhr.responseTest)
  }
    
}
//4.发送请求
xhr.send(data数据,即请求参数)

每种方法,并没有绝对的完美,当然,ajax也不例外,有自身的优缺点,详情请见

ajax请求的优缺点

应用

1.jq中的ajax

$.ajax({
? url:'',
? method:'',
? data:{},
? success(){},
? fail(){},
? async:true//开启同步或异步 ?
})

2.使用ajax封装axios

原生ajax封装的axios

HTTP状态码

在请求数据的时候,常常由于一些原因导致获取不到数据,最常见的就是返回一个404页面,表示请求的资源未找到

100-199 提示信息 – 表示请求正在处理
200-299 成功 – 表示请求正常处理完毕
300-399 重定向 – 要完成请求必须进行更进一步的处理
400-499 客户端错误 – 请求有语法错误或请求无法实现
500-599 服务器端错误 – 服务器处理请求出错

//常见的状态码有哪些？
200：请求成功，浏览器会把响应体内容（通常是html）显示在浏览器中；
404：(客户端问题)请求的资源没有找到?
400: 语义有误，当前请求无法被服务器理解。
401: 当前请求需要用户验证?
403: 服务器已经理解请求，但是拒绝执行它
500：(服务端问题)请求资源找到了，但服务器内部发生了不可预期的错误；
301/302/303：(网站搬家了，跳转)重定向

更多状态码请见

几种状态码的讲解

同源和跨域

何为同源和跨域?

url的组成
https://www.baidu.com:520
http协议 ?域名 ? ? ? ? ?端口号

// 协议 域名 端口号 都相同 为 同源
// 协议 域名 端口号 只要有一个不同,就会跨域

写项目时,常出现跨域,我们在介绍时,将以下两点自行带上

1.token---跨域

ajax(账号/密码)---login---服务器(账号和密码对比数据库?token 账号/密码/登陆时间/MAC/IP:"失败") ----返回给前端
?
前端接收后,进行保存,在后续的请求中加上token,就可以访问了

2. cookie session---同源

ajax(账号/密码)---login---服务器(账号和密码对比数据库?保存在服务器中session 账号/密码/登陆时间/MAC/IP:"失败") ----返回(响应头set-session="cookie字段")给前端
?
前端拿到响应的数据,响应头里有(set-session)就会把后面的cookie存储到本地存储中的cookie里面,之后每次进行请求时,浏览器就会直接把cookie字段放在请求头里给后台服务器

解决跨域的几种方式

JSONP ?

CORS(后端要做的)

Proxy(代理)