三、Ajax加强

已于 2023-06-17 10:59:40 修改
阅读量57 收藏
点赞数
文章标签： ajax javascript ecmascript
于 2023-06-13 19:59:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hgvhjgghv/article/details/131195219
版权

一、XMLHttpRequest的基本使用

XMLHttpRequest(简称xhr)市浏览器提供的js对象,通过它,可以请求服务器上的数据资源

1.2 使用xhr发起get 请求

  • 第一步创建 xhr对象
  • 第二步调用xhr.open()函数
  • 第三步调用xhr.send()函数
  • 第四步监听xhr.onreadystatechange事件
  <script>
    // 1.创建一个XHR对象
    let xhr = new XMLHttpRequest()
    // 2.调用open函数
    xhr.open('GET', 'https://ajax-base-api-t.itheima.net/api/getbooks')
    // 3.调用send函数
    xhr.send()
    // 4.监听onreadystaechange事件
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        // 获取服务器响应的数据
        console.log(xhr.responseText);
      }
    }
  </script>

1.3 xhr对象的readyState属性

1.4 使用xhr发起带参数的GET请求

 在url地址后边拼接参数(查询字符串)

1.5 查询字符串

 查询字符串(URL参数)是指在URL的末尾加上用于服务器发送信息的字符串(变量)

 GET请求写单参数的本质(直接将参数以查询字符串的形式,追加到URL地址的后面,发送到服务器

1.6 URL编码与解码

1.6.1 简介

  • url地址中,只允许出现英文相关的字母,标点符号,数字 不允许出现中文字符,需要对中文进行编码(转义)
  • URL编码的原则:使用安全的字符(没有特殊用途或者特殊意义的可打印的字符)去表示哪些不安全的字符
  • 使用英文字符去表示非英文字符
  <script>
    $.get('https://ajax-base-api-t.itheima.net/api/getbooks', { id: 1, bookanme: '西游记' }, function (res) {
      console.log(res);
    })

  </script>

1.6.2 编码与解码

  • encodeURL() 编码的函数
  • decodeURL() 解码的函数
  <script>
    let arr = '参数'
    let arr1 = encodeURI(arr)
    console.log(arr1);
    let arr2 = decodeURI('%E5%8F%82%E6%95%B0')
    console.log(arr2);
  </script>

1.7 使用xhr发起POST请求

  • 第一步 创建xhr对象
  • 第二步 调用xhr.open()函数
  • 第三步 设置Content-Type属性(固定写法)
  • 第四步 调用xhr.send()函数 同时指定要发送的数据
  • 第五步 监听xhr.onreadystatechange事件
  <script>
    // 1. 创建 xhr 对象
    var xhr = new XMLHttpRequest()
    // 2. 调用 open()
    xhr.open('POST', 'https://ajax-base-api-t.itheima.net/api/addbook')
    // 3. 设置 Content-Type 属性（固定写法）
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    // 4. 调用 send()，同时将数据以查询字符串的形式，提交给服务器
    xhr.send('bookname=456&author=111&publisher=123')
    // 5. 监听 onreadystatechange 事件
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText)
      }
    }

  </script>

二、 数据交换格式

2.1 定义

数据交换格式 就是服务器端与客户端之间进行数据传输与交换的格式
两种数据交换格式XML 和JSON

2.2 XML

2.2.1 什么是XML

全称EXtensible Markup Language(可扩展标记语言)

2.2.2 XML和HTML的区别

  • HTML被设计用来描述网页上的内容,是网页内容的载体
  • XML被设计用来传输和存储数据 是数据的载体

2.2.3 XML的缺点

  • XML格式臃肿,和数据无关,体积大,传输效率低
  • js中解析XML比较麻烦

2.3 JSON

2.3.1 定义

  • JSON就是js对象和数组的字符串表示法(json的本质就是字符串)
  • 又称作 js对象表示法
  • 作用:json是一种轻量级的文本数据交换格式 json比XML更小 更快 更易解析

2.3.2 JSON的两种结构

 对象结构

  • 数据结构{key:value,key:value}的键值对结构
  • key必须是使用英文的双引号包裹的字符串
  • value的数据类型可以是数字,字符串,布尔值,null,数组,对象

 数组结构

  • 用[]括起来的内容
  • 数组中数据的类型可以是 数字 字符串 布尔值 null 数组 对象

2.3.3 JSON语法的注意事项

  • ①属性名必须使用双引号包裹
  • ②字符串类型的值必须使用双引号包裹
  • ③JSON 中不允许使用单引号表示字符串
  • ④JSON 中不能写注释
  • ⑤JSON 的最外层必须是对象或数组格式
  • ⑥不能使用 undefined 或函数作为 JSON 的值
  • JSON 的作用：在计算机与网络之间存储和传输数据。
  • JSON 的本质：用字符串来表示 Javascript 对象数据或数组数据

2.3.4 JSON和JS对象的关系

 JSON是js杜祥的字符串表示法,使用文本表示一个JS对象的信息,本质是一个字符串

2.3.5 JSON和JS对象的互转

要实现从 JSON 字符串转换为 JS 对象，使用 JSON.parse () 方法：
要实现从 JS 对象转换为 JSON 字符串，使用 JSON.stringify() 方法：

2.3.6 序列化和反序列化

序列化

  • 把数据对象转换为字符串的过程
  • 调用JSON.stringify()函数

反序列换

  • 把字符串转换为数据对象的过程
  • 调用JSON.parse()函数

三、封装自己的Ajax函数

3.1 实现的效果

导入自定义的ajax函数库,调用自定义的函数,发起ajax数据请求

3.2 定义options参数选项

  • method 请求的类型
  • url 请求的URL地址
  • data 请求携带的数据
  • success 请求成功之后的回调函数

3.3 处理data参数

把data对象 转换成查询字符串的格式 从而提交给服务器

function resorData(data){
let arr=[]
for(let k in data){
  let str=k+'='+data[k]
  arr.push(str)
}
  return arr.join('&')
}

3.4 定义调用函数

需要创建xhr对象 并监听onreadystatechange事件

function itheima(options) {
    let xhr = new XMLHttpRequest();
    //把外界传递来的参数对象 转换为  查询字符串
    let qs = resolve(options.data)
   
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            let res = JSON.parse(xhr.responseText)
            option.success(res)
        }
    }

}

3.5 判断请求的类型

不同的请求类型(get或post) 进行if…else…判断

function itcs(option){
let xhr=new XMLHttpRequest()
// 把外界传递过来的参数对象，转换为查询字符串
let qs= resorData(option.data)
if(option.method.toUpperCase()=='GET'){
// 发起GET请求
xhr.open(option.method,option.url+'?'+qs)
xhr.send()
}
else if(option.method.toUpperCase()=='POST'){
  // 发起post请求
  xhr.open(option.method,option.url)
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
  xhr.send(qs)
}
xhr.onreadystatechange = function(){
if(xhr.readyState==4&&xhr.status==200){
  let result=JSON.parse(xhr.responseText)
  option.success(result)

}
}
}

调用方法：

  <script>
    // itcs({
    //   method: 'GET',
    //   url: 'https://ajax-base-api-t.itheima.net/api/getbooks',
    //   data: {
    //     id: 1
    //   },
    //   success: function (res) {
    //     console.log(res);
    //   }
    // })
    itcs({
      method: 'POST',
      url: 'https://ajax-base-api-t.itheima.net/api/addbook',
      data: {
        bookname: 'zsk',
        author: '筛子',
        publisher: 'kkk'
      },
      success: function (res) {
        console.log(res);
      }
    })
  </script>

四、XMLHttpRequest Level2的新特性

4.1 简介

4.1.1 旧版XMLHttpRequest的缺点

  • 只支持文本数据的传输,无法用来读取和上传文件
  • 传送和接收数据时,没有进度信息,只能提示没有完成

4.1.2 level2的新功能

  • 可以设置HTTP请求的时限
  • 可以使用FormData对象管理表单数据
  • 可以上传文件
  • 可以获得数据传输的进度信息

4.2 设置HTTP请求时限

xhr.timeout=3000
xhr.ontimeout=funciton(e){alert(‘请求超时了’)}

4.3 FormData对象管理表单数据

html5新增formData属性 可以模拟表单操作

 // 1.创建fromdata实例
    let fd = new FormData
    // 2.调用append函数，向fd追加数据
    fd.append('uname', 'zs')
    fd.append('upwd', '123456')
    let xhr = new XMLHttpRequest()
    xhr.open('POST', 'https://ajax-base-api-t.itheima.net/api/formdata')
    xhr.send(fd)
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(JSON.parse(xhr.responseText));
      }
    }

FormData也可以用来获取网页表单的值

   // 通过dom操作，获取form表单元素
    let form = document.querySelector('#form1')
    form.addEventListener('submit', function (e) {
      // 阻止表单的默认提交行为
      e.preventDefault()
      // 创建fromdata快速获取fron表单的数据
      let fd = new FormData(form)
      let xhr = new XMLHttpRequest()
      xhr.open('POST', 'https://ajax-base-api-t.itheima.net/api/formdata')
      xhr.send(fd)
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
          console.log(JSON.parse(xhr.responseText));
        }
      }
    })

4.4 上传文件

4.4.1 定义UI结构

  <!-- 文件选择器 -->
  <input type="file" id="flie1">
  <!-- 上传文件的按钮 -->
  <button id="button">上传文件</button>
  <!-- img标签，来显示上传成功以后的图片 -->
  <img src="" id="img" width="800">

4.4.2 js结构

<script>
    // 1.获取到文件上传按钮
    let button = document.querySelector('#button')
    //2.为按钮绑定单机事件处理函数
    button.addEventListener('click', function () {
      // 3.获取用户选择的文件列表
      let files = document.querySelector('#flie1').files
      if (files.length <= 0) {
        return alert('请选择上传的文件')
      }
      console.log('用户选择了将上传的文件');
      let fd = new FormData()
      // 将用户选择的文件添加到Fromdata
      fd.append('avatar', files[0])
      let xhr = new XMLHttpRequest()

      // 监听文件的上传进度
      xhr.upload.onprogress = function (e) {
        if (e.lengthComputable) {
          // e.loaded已上传的字节
          // e.total需传输的总字节
          let procentComp = Math.ceil((e.loaded / e.total) * 100)
          console.log(procentComp);
          // 动态设置进度条
          $('#percent').attr('style', 'width:' + procentComp + '%').html(procentComp + '%')
        }
      }
      xhr.upload.onload = function () {
        $('#percent').removeClass().addClass('progress-bar progress-bar-success')
      }

      xhr.open('POST', 'https://ajax-base-api-t.itheima.net/api/upload/avatar')
      xhr.send(fd)
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
          let data = JSON.parse(xhr.responseText)
          // console.log(data);
          if (data.status === 200) {
            // 上传成功
            document.querySelector('#img').src = 'https://ajax-base-api-t.itheima.net' + data.url
          }
          else {
            // 上传失败
            console.log('图片上传失败' + data.message);
          }
        }
      }
    })
  </script>

4.4.1导入需要的库

JQuery库 bootstrap

  <link rel="stylesheet" href="./lib/bootstrap.css">
  <script src="./lib/jquery.js"></script>

五、JQuery高级用法

5.1 JQuery实现文件上传

  • 1.定义UI结构
  • 2.验证是否选择了文件
  • 3.向FormData中追加文件
  • 4.使用JQuery发起文件上传的请求
  <input type="file" id="file1" />
  <button id="btnUp">上传文件</button>
  <br>
  <img src="./images/loading.gif" alt="" style="display: none;" id="loadimg" />
 <script>

    $(function () {
      // 监听到ajax请求发起
      $(document).ajaxStart(function () {
        $('#loadimg').show()
      })
      // 监听到ajax完成
      $(document).ajaxStop(function () {
        $('#loadimg').hide()
      })

      $('#btnUp').on('click', function () {
        let files = $('#file1')[0].files
        if (files.length <= 0) {
          return alert('请选择文件之后在上传')
        }
        let fd = new FormData()
        fd.append('avatar', files[0])
        // 发起jquery中的Ajax请求，上传文件
        $.ajax({
          method: 'POST',
          url: 'https://ajax-base-api-t.itheima.net/api/upload/avatar',
          data: fd,
          processData: false,
          contentType: false,
          success: function (res) {
            console.log(res);
          }

        })
      })
    })
  </script>

六、 axios

6.1 什么是axios

Axios专注于网络数据请求的库,更加简单易用
比起JQuery axios更加轻量化,只专注于网络数据请求

6.2 axios发起GET请求

    document.querySelector('#btn1').addEventListener('click', function () {
      let url = 'https://ajax-base-api-t.itheima.net/api/get'
      let parname = { name: 'zs', age: 20 }
      axios.get(url, { params: parname }).then(function (res) {
        console.log(res);
      })
    })

6.3 axios发起POST请求

    document.querySelector('#btn2').addEventListener('click', function () {
      let url = 'https://ajax-base-api-t.itheima.net/api/post'
      let parname = { address: '很棒', location: '啦啦啦' }
      axios.post(url, parname).then(function (res) {
        // console.log(res);
        let data = res.data
        console.log(data);
      })
    })

6.4 直接使用axios发起请求

使用axios发起get请求

    document.querySelector('#btn3').addEventListener('click', function () {
      let url = 'https://ajax-base-api-t.itheima.net/api/get'
      let parname = { name: 'gtx', age: 35 }
      axios({
        method: 'GET',
        url: url,
        params: parname
      }).then(function (res) {
        console.log(res.data);
      })

    })

使用axios发起post请求

    document.querySelector('#btn4').addEventListener('click', function () {
      axios({
        method: 'POST',
        url: 'https://ajax-base-api-t.itheima.net/api/post',
        data: {
          name: '哈哈哈',
          age: 18,
          gender: '女'
        }
      }).then(function (res) {
        console.log(res.data);
      })

    })

 

azxl`
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ajax(三）Ajax加强
释怀°Believe的博客
04-02 1174
文章目录一、XMLHttpRequest的基本使用1.1什么是XMLHttpRequest1.2使用xhr发起GET请求1.3 了解xhr对象的readyState属性1.4使用xhr发起带参数的GET请求1.5查询字符串1.6 URL编码与解码1.7 使用xhr发起POST请求二、数据交换格式2.1什么是数据交换格式2.2 XML2.3JSON三、封装自己的Ajax函数3.1定义options参数选项3.2 处理data参数 一、XMLHttpRequest的基本使用 1.1什么是XMLHttpRequ
Ajax加强
weixin_61923897的博客
01-14 119
一、XMLHttpRequest的基本使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, in...
3.Ajax加强
desson
04-16 501
文章目录一、XMLHttpRequest的基本使用 一、XMLHttpRequest的基本使用
jQuery Ajax 和 axios Ajax
qq_59612674的博客
11-06 3007
区别： axios是通过promise技术实现对ajax实现的一种封装，本身上来说axios就是ajax，但是ajax却不单单只是axios；jQuery也实现了对ajax技术的封装，但是jQuery主要是对原生JavaScript进行封装，封装了js三大核心要素：ECMAScript、DOM、BOM，所以说jQuery封装的ajax只是其中的一小部分，如果通过引用jQuery来进行ajax交互实在是显得有所浪费资源，因此vue中封装了axios来实现对ajax技术的单独封装。 什么是 jQuery ？
Ajax学习笔记
qq_64686768的博客
11-13 393
小白学习ajax
Ajax面试题
golove666的博客
04-06 1029
Ajax高频面试题。
Ajax介绍
weixin_55597825的博客
02-13 406
Ajax=Asynchronous JavaScript and XML(异步的JavaScript和XML) Ajax是一种在无需重新加载整个网页的情况下，，能够更新部分网页的技术。 Ajax不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术 使用Ajax，用户可以创建接近本地桌面应用的直接，高可用，更丰富，更动态的Web用户界面。 增强B/S体验性。 B/S：未来的主流，并且会爆发式的持续增长。 产品链：H5+网页+客户端+手机端（Android，iOS）+小
Ajax基础知识
m0_53233285的博客
05-17 272
Ajax基础知识 JQuery.ajax(url,[settings]) 主要使用： url async contentType cache type data dataType success 回调函数： beforeSend在发送请求之前调用，并且传入一个XMLHttpRequest作为参数。 error 在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象（如果有的话） dataFilter 在请求成功之后调用。传入返回的数据以及"dataType"参数的值。
AJAX
商晓沐的博客
08-25 3694
AJAX 关于ajax和异步 什么是ajax? 交互式网站开发技术 实现动态更新（局部）的内容 优点： 提升浏览器的加载速度 实现了局部刷新 表单验证（增强用户体验） Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术 本质:是在HTTP协议的基础上以异步的方式通过XMLHttp...
Ajax 笔记
weixin_42378852的博客
08-09 275
Ajax概述 它是浏览器提供的一套方法，可以实现页面无刷新更新数据，增强用户体验感，比如上拉显示更多内容，搜索框提示文字下拉列表，用户登录离开焦点验证表单等场景均用到了ajax技术 ajax的运行环境：需要运行在网站环境中 ajax的运行原理： ajax相当于浏览器向服务器发送请求和接收响应的代理人，在不影响用户浏览页面的情况下，局部更新页面数据，提高用户体验。 Ajax基本实现步骤 <script> // 实例化ajax对象 var xhr = new XML
Ajax+php实现商品分类三级联动
10-21
本文主要介绍了如何利用Ajax与PHP技术实现商品分类的三级联动效果，这是一种常见的网页交互方式，用于增强用户体验，特别是在电子商务网站中，用户可以方便地根据分类选择所需商品。 知识点一：三级联动的概念 三级...
Ajax Interceptor
05-19
4. **安全测试**：测试应用对异常响应的处理能力，模拟攻击或异常情况，增强应用的安全性。 **总结** Ajax Interceptor 提供了一种强大的工具，使得前端开发者和测试人员能够更加灵活地处理Ajax请求和响应，提高了...
Ajax实现登录案例
10-14
在本文中，我们将深入探讨如何使用Ajax实现一个登录案例，以增强用户体验，使得用户无需刷新整个页面即可完成登录操作。我们将分析提供的代码片段，并解释关键部分。 首先，我们需要理解Ajax的核心概念。Ajax...
chrome扩展插件获取ajax请求记录
04-06
在IT领域，尤其是在Web开发中，Ajax（Asynchronous JavaScript and XML）是一种常用的技术，它使得网页可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这极大地提升了用户体验，因为用户不再...
ajax实现省市县三级级联和ajax实现登录判断账号是否被注册
05-29
Ajax的核心是利用JavaScript与服务器进行异步数据交换，增强了用户体验，减少了不必要的页面跳转，使得网页更加动态和交互性更强。在这个场景中，我们将探讨两个具体的应用：一是如何使用Ajax实现省市县三级级联，二...
Ajax动态内容加载与无刷新页面切换的实现教程
最新发布
qq_43580271的博客
08-22 201
通过使用 AJAX 和 HTML5 的 History API，我们能够实现无刷新页面切换，提升用户体验。本文提供了一个基本的示例，你可以根据具体需求进行扩展和优化。希望这篇教程对你有所帮助！如有任何疑问或建议，欢迎在评论区留言讨论。
JavaScript - Ajax
qq_57620101的博客
08-20 436
Asynchronous JavaScript And XML，异步的JavaScript和XML不重新加载整个页面的情况更新部分网页。
Ajax基础案例
小陈从不熬夜
08-21 400
Ajax入门基础案例
使用AJAX增强PHP网站响应式用户体验
它通过JavaScript与服务器进行异步数据交换，增强了网页的交互性和响应性。在PHP网站中结合使用AJAX，可以创建更加动态和用户友好的界面，提高用户的浏览体验。 本教程旨在教你如何在PHP项目中有效地运用AJAX。首先...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值