简单理解Ajax~

最新推荐文章于 2024-12-10 06:43:34 发布

原创最新推荐文章于 2024-12-10 06:43:34 发布 · 221 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JavaScript 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了Ajax的核心概念，通过比喻解释了其异步请求的原理，并逐步展示了从创建XMLHttpRequest对象到监测请求完成的整个执行流程。同时，探讨了GET与POST请求的区别，并提供了封装简单Ajax的方法以及解决浏览器缓存问题的策略。

1/什么是ajax

ajax,异步的JavaScript和XML;是一种实现 无页面刷新 获取数据的 混合技术;简单来说就是JavaScript执行异步请求

2/ajax的原理

引例:如,领导想要找小刘汇报工作,于是领导就委托秘书帮忙去叫小刘;然后领导就继续忙自己的工作,直到秘书告诉领导小刘到了,接着小刘就开始汇报工作了
ajax请求数据的流程与"领导找小刘汇报工作"相似;其中的核心–>秘书,秘书相当于浏览器的XMLHttpRequest对象,当浏览器发出HTTP请求与接收HTTP响应时,浏览器可以接着做其他事情,直到收到xhr返回的数据渲染页面

3/ajax的执行流程

如:你想点外卖,首先:

1. 下载软件

var xhr = new XHLHttpRequest()

2. 选择商家

xhr.open(“get/post”,“url”,true)
请求方式:get/post/其他,请求地址,同步或异步(默认异步)

3. 下单

xhr.send(); 发送

4. 监测外卖小哥的状态(小哥到哪了)

即监测ajax的状态和服务端的状态
通过xhr.oneadyStateChange事件监测ajax和服务端状态
通过readyState来ajax的状态码
xhr.readyState == 4 表示成功
0 表示未初始化,尚未调用open方法
1 启用open方法,数据发送
2 表示已调用open方法接收到响应
3 表示正在解析
4 表示完成
服务端http的状态码通过status 监测
xhr.statue == 200 成功
100 1xx 必须发送请求
200 2xx 数据请求成功
300 3xx 重定向
400 4xx 客户端错误
500 5xx 服务端错误

4/ 一个完整的ajax

  const xhr = new XMLHttpRequest()
  xhr.open("get","data.php")
  xhr.send()
  xhr.onreadyStateChange=function(){
    //每次readyState改变的时候都会触发该事件
    //判断readyState 的值是否为4和http的状态码是否为200或200-299
    if(xhr.readyState==4 && /^2\d{2}$/.test(xhr.status)){
      //表示验证通过,可以获取服务端的响应内容
      console.log(xhr.responseText);//打印响应内容
    }
  }

4.1/ responseText

ajax 对象中的成员,用来记录服务端的响应体内容,获得的响应内容是字符串的形式

5/ 使用ajax发送携带参数的请求

可以使用ajax发送带参数的请求
ajax的请求方式常用的有post和get,可以通过get或post携带参数

5.1/ get 请求

get 请求发送参数直接在url 后面通过 ? 拼接参数以key=value 的形式两个参数间使用 & 分割

  const xhr =new XMLHttpRequest()
  xhr.open("get","data.php?a=100&b=200")
  //携带a和b 这两个参数到后端
  xhr.send()

5.1/ post 请求

post请求携带的参数通过send发送,但必须要设置请求头,告诉服务端数据格式

  const xhr =new XMLHttpRequest()
  xhr.open("post","data.php")
  xhr.setRequestHeader("content-type', 'application/x-www-form-urlencoded"); //设置数据格式为 key=value 格式
  xhr.send("a=100&b=200")

5.2/ get和post的区别

从中可以得出get和post两种请求方式的区别
get请求
get将参数直接拼接在地址栏中,会造成数据泄露
安全性低
传输数据量小,不能超过2kb
post请求
post传参将数据放在请求体中
安全性高
传输数据量大

6/ 封装一个简单的ajax


   /* 
      ajax({
         method: 请求方式,
          url: 接口,
          data: {
             name: "123",
              pwd: "11",
          },
          success: function (data) {
             对业务的传递 做业务处理
          }
   })
       
       */
       
function ajax(options){
  const xhr = new XMLHttpRequest()
  //包装数据
  let packDate=""
  for(let key in options.data){
    packDate+="&"+key+"="+options.data[key];
  }
  //判断请求方法
  if(options.method == "get"){
    xhr.open("get",options.url+"?"+packDate.slice(1)+"&now="+new Date().getTime())
    xhr.send()
  }else{
    xhr.open("post",options.url)
     xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
     xhr.send(packDate.slice(1))
  }
  xhr.onreadyStateChange=function(){
    if(xhr.readyState==4 && /^2\d{2}$/.test(xhr.state)){
      let getData=JSON.parse(xhr.responseText){
        if(options.success){
          options.success(getData)
        }
      }
    }
  }
}