Ajax学习笔记

最新推荐文章于 2023-01-09 18:16:05 发布
最新推荐文章于 2023-01-09 18:16:05 发布
阅读量417 收藏 5
点赞数 12
文章标签： ajax javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46264622/article/details/119919536
版权

Ajax学习笔记

一、XMLHttpRequest的基本使用

1、什么是XMLHttpRequest

在这里插入图片描述

2、使用xhr发起GET请求

在这里插入图片描述

在这里插入图片描述

 <script>
    // 1. 创建 XHR 对象
    var xhr = new XMLHttpRequest()
    // 2. 调用 open 函数
    xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
    // 3. 调用 send 函数
    xhr.send()
    // 4. 监听 onreadystatechange 事件
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        // 获取服务器响应的数据
        console.log(xhr.responseText)
      }
    }
  </script>

3、了解xhr对象的readyState属性

在这里插入图片描述

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

在这里插入图片描述

    <script>
        var xhr = new XMLHttpRequest()
        xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')
        xhr.send()
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr.responseText)
            }
        }
    </script>

5、查询字符串

①、什么是查询字符串

在这里插入图片描述

②、GET请求携带参数的本质

在这里插入图片描述

  <script>
    // $.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1, bookname: '西游记' }, function (res) {
    //   console.log(res)
    // })

    $.ajax({
      method: 'GET',
      url: 'http://www.liulongbin.top:3006/api/getbooks',
      data: {
        id: 1,
        bookname: '西游记'
      },
      success: function (res) {
        console.log(res)
      }
    })
  </script>

6、URL编码与解码

①、什么是URL编码

在这里插入图片描述

②、如何对URL进行编码与解码

在这里插入图片描述

    <script>
        var str = '阿远'
        var str2 = encodeURI(str)
        console.log(str2)

        console.log('----------')
        var str3 = decodeURI('%E9%98%BF%E8%BF%9C')
        console.log(str3)
    </script>

③、URL编码注意事项

在这里插入图片描述

7、使用xhr发起POST请求

在这里插入图片描述
在这里插入图片描述

  <script>
    // 1. 创建 xhr 对象
    var xhr = new XMLHttpRequest()
    // 2. 调用 open 函数
    xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')
    // 3. 设置 Content-Type 属性
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    // 4. 调用 send 函数
    xhr.send('bookname=水浒传&author=施耐庵&publisher=上海图书出版社')
    // 5. 监听事件
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText)
      }
    }
  </script>

二、数据交换格式(XML与JSON)

1、什么是数据交换格式

在这里插入图片描述

2、XML

①、什么是XML

在这里插入图片描述

②、XML与HTML的区别

在这里插入图片描述

③、XML的缺点

在这里插入图片描述

3、JSON

①、什么是JSON

在这里插入图片描述

②、JSON的两种结构

在这里插入图片描述
在这里插入图片描述在这里插入图片描述

③、JSON语法注意事项

在这里插入图片描述

④、JSON与JS对象的关系

在这里插入图片描述

⑤、JSON和JS对象的互转

在这里插入图片描述

 <script>
    // var jsonStr = '{"a": "Hello", "b": "world"}'
    // var obj = JSON.parse(jsonStr)
    // console.log(obj)

    var obj2 = { a: 'hello', b: 'world', c: false }
    var str = JSON.stringify(obj2)
    console.log(str)
    console.log(typeof str)
  </script>

⑥、序列化与反序列化

在这里插入图片描述

⑦、JSON.parse函数的应用场景

  <script>
    var xhr = new XMLHttpRequest()
    xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
    xhr.send()
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText)
        console.log(typeof xhr.responseText)
	//将JSON格式转换为对象
        var result = JSON.parse(xhr.responseText)
        console.log(result)
      }
    }
  </script>

三、封装自己的ajax函数

1、实现的效果

在这里插入图片描述

2、定义options参数选项

在这里插入图片描述

3、处理data参数

在这里插入图片描述

function resolveData(data) {
    var arr = []
    for (var k in data) {
        arr.push(k + '=' + data[k])
    }
    return arr.join('&')
}
// var res = resolveData({ name: 'zs', age: 20 })
// console.log(res);

4、定义aygzs函数

// 定义aygzs函数
function aygzs(options) {
    var xhr = new XMLHttpRequest()
        //把外界传递过来的参数对象，转换为查询字符串
    var qs = resolveData(options.data)

    //监听请求状态改变的事件
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var result = JSON.parse(xhr.responseText)
            options.success(result)
        }
    }
}

5、判断请求的类型

  // 判断请求的类型
    if (options.method.toUpperCase() === 'GET') {
        // 发起GET请求
        xhr.open(options.method, options.url + '?' + qs)
        xhr.send()
    } else if (options.method.toUpperCase() === 'POST') {
        // 发起POST请求
        xhr.open(options.method, options.url)
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        xhr.send(qs)
    }

6、调用自己封装的ajax函数进行测试

 <script src="js/aygzs.js"></script>
     <script>
        // aygzs({
        //   method: 'GET',
        //   url: 'http://www.liulongbin.top:3006/api/getbooks',
        //   data: {
        //     id: 1
        //   },
        //   success: function (res) {
        //     console.log(res)
        //   }
        // })

        aygzs({
            method: 'post',
            url: 'http://www.liulongbin.top:3006/api/addbook',
            data: {
                bookname: '水浒传',
                author: '施耐庵',
                publisher: '北京图书出版社'
            },
            success: function(res) {
                console.log(res)
            }
        })
    </script>

function resolveData(data) {
  var arr = []
  for (var k in data) {
    var str = k + '=' + data[k]
    arr.push(str)
  }

  return arr.join('&')
}

// var res = resolveData({ name: 'zs', age: 20 })
// console.log(res)

function aygzs(options) {
  var xhr = new XMLHttpRequest()

  // 把外界传递过来的参数对象，转换为 查询字符串
  var qs = resolveData(options.data)

  if (options.method.toUpperCase() === 'GET') {
    // 发起GET请求
    xhr.open(options.method, options.url + '?' + qs)
    xhr.send()
  } else if (options.method.toUpperCase() === 'POST') {
    // 发起POST请求
    xhr.open(options.method, options.url)
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    xhr.send(qs)
  }

  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var result = JSON.parse(xhr.responseText)
      options.success(result)
    }
  }
}

四、XMLHttpRequest Level2的新特性

1、认识XMLHttpRequest Level2

①、旧版XMLHttpRequest的缺点

在这里插入图片描述

②、XMLHttpRequest Level2的新功能

在这里插入图片描述

2、设置HTTP请求时限

在这里插入图片描述

  <script>
    var xhr = new XMLHttpRequest()

    // 设置 超时时间
    xhr.timeout = 30
    // 设置超时以后的处理函数
    xhr.ontimeout = function () {
      console.log('请求超时了！')
    }

    xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
    xhr.send()

    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText)
      }
    }
  </script>

3、FormData对象管理表单数据

①、模拟表单操作

在这里插入图片描述

   <script>
        // 1. 创建 FormData 实例
        var fd = new FormData()
            // 2. 调用 append 函数，向 fd 中追加数据
        fd.append('uname', 'zs')
        fd.append('upwd', '123456')

        var xhr = new XMLHttpRequest()
        xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
            //不需要设置content-type
        xhr.send(fd)

        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(JSON.parse(xhr.responseText))
            }
        }
    </script>

②、获取网页表单的值

在这里插入图片描述

  <form id="form1">
    <input type="text" name="uname" autocomplete="off" />
    <input type="password" name="upwd" />
    <button type="submit">提交</button>
  </form>
  <script>
    // 1. 通过 DOM 操作，获取到 form 表单元素
    var form = document.querySelector('#form1')

    form.addEventListener('submit', function (e) {
      // 阻止表单的默认提交行为
      e.preventDefault()

      // 创建 FormData，快速获取到 form 表单中的数据
      var fd = new FormData(form)

      var xhr = new XMLHttpRequest()
      xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
      xhr.send(fd)

      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log(JSON.parse(xhr.responseText))
        }
      }
    })
  </script>

4、上传文件

在这里插入图片描述

①、定义UI结构

在这里插入图片描述

②、验证是否选择了文件

在这里插入图片描述

③、向FormData中追加文件

在这里插入图片描述

④、使用xhr发起上传文件的请求

在这里插入图片描述

⑤、监听onreadystatechange事件

在这里插入图片描述

    <!-- 1. 文件选择框 -->
    <input type="file" id="file1" />
    <!-- 2. 上传文件的按钮 -->
    <button id="btnUpload">上传文件</button>
    <br />
    <!-- 3. img 标签，来显示上传成功以后的图片 -->
    <img src="" alt="" id="img" width="800" />

    <script>
        // 1. 获取到文件上传按钮
        var btnUpload = document.querySelector('#btnUpload')
            // 2. 为按钮绑定单击事件处理函数
        btnUpload.addEventListener('click', function() {
            // 3. 获取到用户选择的文件列表
            var files = document.querySelector('#file1').files
            if (files.length <= 0) {
                return alert('请选择要上传的文件！')
            }
            var fd = new FormData()
                // 将用户选择的文件，添加到 FormData 中 选择头像文件 数组不为空将索引为0的文件添加 
            fd.append('avatar', files[0])

            var xhr = new XMLHttpRequest()
            xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
            xhr.send(fd)

            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var data = JSON.parse(xhr.responseText)
                    if (data.status === 200) {
                        // 上传成功
                        document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
                    } else {
                        // 上传失败
                        console.log('图片上传失败！' + data.message)
                    }
                }
            }
        })
    </script>

5、显示文件上传进度

在这里插入图片描述

①、导入需要的库

在这里插入图片描述

②、基于Bootstrap渲染进度条

在这里插入图片描述

③、监听上传进度的事件

在这里插入图片描述

④、监听上传完成的事件

在这里插入图片描述

 <link rel="stylesheet" href="./lib/bootstrap.css" />
  <script src="./lib/jquery.js"></script>
   <!-- 1. 文件选择框 -->
  <input type="file" id="file1" />
  <!-- 2. 上传文件的按钮 -->
  <button id="btnUpload">上传文件</button>

  <!-- bootstrap 中的进度条 -->
  <div class="progress" style="width: 500px; margin: 15px 10px;">
    <div class="progress-bar progress-bar-striped active" style="width: 0%" id="percent">
      0%
    </div>
  </div>

  <br />
  <!-- 3. img 标签，来显示上传成功以后的图片 -->
  <img src="" alt="" id="img" width="800" />

  <script>
    // 1. 获取到文件上传按钮
    var btnUpload = document.querySelector('#btnUpload')
    // 2. 为按钮绑定单击事件处理函数
    btnUpload.addEventListener('click', function () {
      // 3. 获取到用户选择的文件列表
      var files = document.querySelector('#file1').files
      if (files.length <= 0) {
        return alert('请选择要上传的文件！')
      }
      var fd = new FormData()
      // 将用户选择的文件，添加到 FormData 中
      fd.append('avatar', files[0])

      var xhr = new XMLHttpRequest()

      // 监听文件上传的进度
      xhr.upload.onprogress = function (e) {
        if (e.lengthComputable) {
          // 计算出上传的进度
          var procentComplete = Math.ceil((e.loaded / e.total) * 100)
          console.log(procentComplete)
          // 动态设置进度条
          $('#percent').attr('style', 'width: ' + procentComplete + '%;').html(procentComplete + '%')
        }
      }

      xhr.upload.onload = function () {
        $('#percent').removeClass().addClass('progress-bar progress-bar-success')
      }

      xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
      xhr.send(fd)

      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var data = JSON.parse(xhr.responseText)
          if (data.status === 200) {
            // 上传成功
            document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
          } else {
            // 上传失败
            console.log('图片上传失败！' + data.message)
          }
        }
      }
    })
  </script>

五、jQUery高级用法

1、使用jQuery实现文件上传

①、定义UI结构

在这里插入图片描述

②、验证是否选择了文件

在这里插入图片描述

③、向FormData中追加文件

在这里插入图片描述

④、使用jQUery发起上传文件的请求

在这里插入图片描述

  <script src="./lib/jquery.js"></script>
   <input type="file" id="file1" />
  <button id="btnUpload">上传文件</button>

  <br />
  <img src="./images/loading.gif" alt="" style="display: none;" id="loading" />
  <script>
     $('#btnUpload').on('click', function () {
        var files = $('#file1')[0].files
        if (files.length <= 0) {
          return alert('请选择文件后再上传！')
        }

        var fd = new FormData()
        fd.append('avatar', files[0])

        // 发起 jQuery 的 Ajax 请求，上传文件
        $.ajax({
          method: 'POST',
          url: 'http://www.liulongbin.top:3006/api/upload/avatar',
          data: fd,
          processData: false,
          contentType: false,
          success: function (res) {
            console.log(res)
          }
        })
      })
    })
  </script>

2、jQuery实现loading效果

①、ajaxStart(callback)

在这里插入图片描述

②、ajaxStop(callback)

在这里插入图片描述

 $(function () {
      // 监听到Ajax请求被发起了
      $(document).ajaxStart(function () {
        $('#loading').show()
      })

      // 监听到 Ajax 完成的事件
      $(document).ajaxStop(function () {
        $('#loading').hide()
      })

六、axios

1、什么是axios

在这里插入图片描述

2、axios中文文档

http://www.axios-js.com/zh-cn/docs/

3、axios发起GET 请求

在这里插入图片描述

4、axios发起POST请求

在这里插入图片描述

5、直接使用axios发起请求

在这里插入图片描述

6、案例:axios的基本使用

 <script src="js/axios.js"></script>
  <button id="btn1">发起GET请求</button>
  <button id="btn2">发起POST请求</button>
  <button id="btn3">直接使用axios发起GET请求</button>
  <button id="btn4">直接使用axios发起POST请求</button>

  <script>
    document.querySelector('#btn1').addEventListener('click', function () {
      var url = 'http://www.liulongbin.top:3006/api/get'
      var paramsObj = { name: 'ay', age: 20 }
      axios.get(url, { params: paramsObj }).then(function (res) {
        console.log(res.data)
      })
    })

    document.querySelector('#btn2').addEventListener('click', function () {
      var url = 'http://www.liulongbin.top:3006/api/post'
      var dataObj = { address: '广东', location: '龙华' }
      axios.post(url, dataObj).then(function (res) {
        console.log(res.data)
      })
    })

    document.querySelector('#btn3').addEventListener('click', function () {
      var url = 'http://www.liulongbin.top:3006/api/get'
      var paramsData = { name: '钢铁侠', age: 35 }
      axios({
        method: 'GET',
        url: url,
        params: paramsData
      }).then(function (res) {
        console.log(res.data)
      })
    })

    document.querySelector('#btn4').addEventListener('click', function () {
      axios({
        method: 'POST',
        url: 'http://www.liulongbin.top:3006/api/post',
        data: {
          name: '丽君',
          age: 18,
          gender: '女'
        }
      }).then(function (res) {
        console.log(res.data)
      })
    })
  </script>
阿远ay
关注
  • 12
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
《web开发： Ajax XMLHttpRequest基本使用》
yexiangCSDN的专栏
01-28 541
一、Ajax XMLHttpRequest 1 什么XMLHttpRequest XMLHttpRequest（简称 xhr）是浏览器提供的 Javascript 对象，通过它，可以请求服务器上的数据资源。之前所学的 jQuery 中的 Ajax 函数，就是基于 xhr 对象封装出来的。 2 使用xhr发起GET请求 步骤： 创建 xhr 对象 调用 xhr.open() 函数 调用 xhr.send() 函数 监听 xhr.onreadystatechange 事件 //1.创建XH...
jquery中ajax学习笔记3
10-28
由于很多知识都已经做了详细介绍，本节只介绍需要修改的代码，使用jqery封装的ajax使用XML格式接收服务器端的数据，web.xml、后台的servet都不用改
Ajax学习笔记整理
10-22
Ajax: Asynchronous JavaScript and Xml , 异步js脚本和xml , 常用来实现页面局部的异步刷新, 对提高用户体验有很大帮助. Xml在多语言时较有优势, 但Ajax技术实际上较多采用Json对象而不是Xml来处理数据
AJax 学习笔记一(XMLHTTPRequest对象)
10-29
今天学习了点关于XMLHttpRequest对象的一些方法和属性，有点体会，在这里也想记录起来。
jQuery+AJAX学习笔记
10-10
jQuery+AJAX学习笔记
AJAX学习笔记.docx
最新发布
08-01
AJAX（Asynchronous JavaScript and XML）是一种用于创建交互式网页应用程序的技术。它允许网页与服务器进行异步通信，实现页面内容的动态更新，而无需刷新整个页面。
16ajax学习笔记1
08-08
16ajax学习笔记1
js_XMLHttpRequest学习总结
weixin_64311421的博客
01-09 2655
XMLHttpRequest实例属性及实例方法
xhr XMLHttpRequest 简介
whatday的专栏
05-22 1231
XHR全称XMLHttpRequest XMLHTTP是一组API函数集，可被JavaScript、JScript、VBScript以及其它web浏览器内嵌的脚本语言调用，通过HTTP在浏览器和web服务器之间收发XML或其它数据。XMLHTTP最大的好处在于可以动态地更新网页，它无需重新从服务器读取整个网页，也不需要安装额外的插件。该技术被许多网站使用，以实现快速响应的动态网页应用。例如：Google的Gmail服务、Google Suggest动态查找界面以及Google Map地理信息服务。 XM
Ajax（三）XMLHttpRequest的基本使用
qq_43182390的博客
03-12 1796
Ajax（三）XMLHttpRequest的基本使用 一、XMLHttpRequest的基本使用 1、定义 浏览器为我们提供的一个内置对象(构造函数), 通过它我们可以向服务器发送请求, 并接受响应 $.ajax() 请求方法底层就是 jQuery 封装这个对象的一系列方法来实现的 2、使用xhr发起GET请求 步骤： 创建 xhr 对象 调用 xhr.open() 函数 调用 xhr.send() 函数 监听 xhr.onreadystatechange 事件 // 1.
AJAX-XMLHttpRequest的基本使用（使用XMLHttpRequest对象发起GET和POST请求,数据交互格式XML，JSON）
asdf1234dfty的博客
07-19 2427
AJAX-XMLHttpRequest的基本使用（使用XMLHttpRequest对象发起GET和POST请求,数据交互格式XML，JSON）
Ajax学习笔记个人总结
09-12
根据个人学习Ajax的过程总结，整理了Ajax相关基础知识点，对Ajax的使用有较详细的介绍，通过个别举例，可以快速了解Ajax的功能，比较适合初学者入门。
那些年，我还在学习Ajax 学习笔记
10-28
Ajax不用说，每个做web开发的同志都知道，因为它是学习web开发必经之路，不管你是做asp.net，还是javaWeb，还是PHP
jquery中ajax学习笔记4
10-28
本节主要介绍两点：1.缓存问题 2.中文问题
ajax学习笔记
11-30
ajax学习笔记。。。。。。。。。。。。。。。。。。。。。。
AJAX 中 XMLHttpRequest() 实例'xhr'方法详细分解!!
陈浩然哦 的博客
03-01 2173
AJAX (Async JavaScript And XML) var xhr = new XMLHttpRequest(); xhr.open('GET','请求的服务器地址',true); xhr.setRequestHeader(header,value); xhr.onreadystatechange = function(){ if(xhr.readyState === ...
XMLHttpRequest的基本使用
HiYulinlin的博客
01-15 5682
XMLHttpRequest的基本使用
创建XMLHttpRequest对象（异步调用对象）
qq_45376290的博客
08-18 551
(1) 创建XMLHttpRequest对象（异步调用对象） var xhr = new XMLHttpRequest(); (2) 创建新的Http请求（方法、URL、是否异步） xhr.open(‘get’,’example.php’,false); (3) 设置响应HTTP请求状态变化的函数。 onreadystatechange事件中readyState属性等于4。响应的HTTP状态为200(OK)或者304(Not Modified)。 ```javascript (4)发送http请求
Ajax学习笔记pink老师
07-29
以下是一份简要的Ajax学习笔记，希望对您有所帮助： 1. 什么是Ajax？ - Ajax全称为Asynchronous JavaScript and XML（异步JavaScript和XML），是一种用于创建交互式Web应用程序的技术。 - 它通过在后台与服务器...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值