Ajax简单封装

学习笔记 专栏收录该内容
10 篇文章 0 订阅

Ajax概念

Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

Ajax请求的五个步骤

1.创建xhr对象

let xhr = new XMLHttpRequest()

2.设置方法和请求路径

xhr.open(方法,路径)

3.发送数据

xhr.send()

4.监听后台是否返回数据

xhr.onreadystatechange = function(){}(当存有 XMLHttpRequest 的状态的属性readyState改变时调用该函数)

5.处理数据

if(xhr.status == 200 && readyState == 4){数据处理}

当xhr.status状态码为200时表示请求成功,而readyState值为4时表示请求已经完成,当满足这两个条件时对数据进行处理。

readyState属性值从0-4变化
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪

Ajax的’GET’方法简单封装

//对请求参数进行处理,将数据对象转化为字符串
function parseData(data) {
  let str = '?'
  for(let key in data) {
    str+=key+'='+data[key]+'&'
  }
  return str.substr(0,str.length-1)
}
//Ajax的'GET'方法的简单封装
function getAjax2(httpUrl,data,callbackFn) {
  //1.创建xhr对象
  let xhr = new XMLHttpRequest()
  //2.设置请求路径和方法
   xhr.open('GET',httpUrl + parseData(data))
  //3.发送数据
  xhr.send()
  //4.监听后台是否返回数据
  xhr.onreadystatechange = function(){
    if(xhr.status==200&&xhr.readyState==4){
      //5.处理数据
      callbackFn(xhr)
    }
  }
}

Ajax的’GET’方法简单封装

//对请求参数进行处理,将数据对象转化为字符串
function parseData(data) {
  let str = '?'
  for(let key in data) {
    str+=key+'='+data[key]+'&'
  }
  return str.substr(0,str.length-1)
}
//Ajax的'GET'方法的简单封装
function getAjax2(httpUrl,data,callbackFn) {
  //1.创建xhr对象
  let xhr = new XMLHttpRequest()
  //2.设置请求路径和方法
   xhr.open('POST',httpUrl)
  //3.发送数据
  xhr.send(parseData(data))
  //4.监听后台是否返回数据
  xhr.onreadystatechange = function(){
    if(xhr.status==200&&xhr.readyState==4){
      //5.处理数据
      callbackFn(xhr)
    }
  }
}

注意:'GET’请求方法需要将请求参数拼接到请求路径中去,而’POST’请求方法需要将请求参数放入xhr.send()中

Ajax封装后的简单使用

<script src="./getAjax2.js"></script>
  <script>
    //只需要传入请求路径和处理数据函数
    data = {
      name:'hhh',
      age:'17'
    }
    getAjax2('abc2.txt',data,function(xhr){
      let h1 = document.createElement('h1')
      h1.innerHTML = xhr.response
      document.body.appendChild(h1)
    })
  </script>

1.network中的XHR请求,自动将参数拼接

network中的XHR请求,自动将参数拼接

2.请求参数

在这里插入图片描述

3.数据处理后在页面上正常显示

数据处理后在浏览器上正常显示

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:深蓝海洋 设计师:CSDN官方博客 返回首页

打赏作者

Glory of the king

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值