0
点赞
收藏
分享

微信扫一扫

前后端交互(1)---ajax、xhr请求

艾米吖 2022-03-12 阅读 92

   欢迎加入前端技术营!如果你也是前端学习者或者对前端有学习的想法,那就跟着我一起从零开始进击前端。
  致力于尽可能详细且简洁的介绍前端知识、自己的捷径,也是学习路上的记录。欢迎探讨


文章目录


基本概念

客户端与服务器:
请添加图片描述

URL地址组成:
请添加图片描述
网页中请求数据:
要在网页中请求服务器上的数据资源,则需要用到 XMLHttpRequest 对象。
XMLHttpRequest(简称xhr)是浏览器提供的js成员,通过它,可以请求服务器上的数据资源。
最简单的用法
var xhrObj = new XMLHttpRequest()

资源的请求方式:
get:get 请求通常用于获取服务端资源(向服务器要资源)
post:post请求通常用于向服务器提交数据(往服务器发送资源)


Ajax

Ajax的全称是 Asynchronous Javascript And XML(异步JavaScript和XML)。

通俗的理解:在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式,就是Ajax。

Ajax能让我们轻松实现网页与服务器之间的数据交互,如检测用户名是否被占用、加载搜索提示列表等

接口

使用Ajax请求数据时,被请求的URL地址,就叫做数据接口(简称接口)。同时,每个接口必须有请求方式。(get和post)

为了验证接口能否被正常被访问,我们常常需要使用接口测试工具。来对数据接口进行检测。

好处:接口测试工具能让我们在不写任何代码的情况下,对接口进行调用和测试。

接口文档:
请添加图片描述

jQuery中的ajax

浏览器中提供的XMLHttpRequest用法比较复杂,所以jQuery对XMLHttpRequest进行了封装,提供了一系列 Ajax相关的函数,极大地降低了Ajax的使用难度。

$.get() 函数

$.get (url,[data], [callback])

$.get()发起带参数的请求

$(function () {
      $('#btnGETINFO').on('click',function() {
        $.get('URL',{id:1},function(res){
          console.log(res)
        })
      })
    })

$.post() 函数

$.post (url,[data], [callback])

使用$post() 向服务器提交数据

$(function () {
      $('#btnPOST').on('click', function () {
        $.post('URL', {
          bookname: '水浒传',
          author: '施耐庵',
          publisher: '出版社'
        }, function (res) {
          console.log(res)
        })
      })
    })

jQuery中 $.get() 和 $.post()函数的功能单一,专门用来发起get或post请求,从而向服务器请求或提交数据。

$.ajax()函数的语法

相比于 $.get() 和 . p o s t ( ) 函 数 , j Q u e r y 中 提 供 的 .post() 函数,jQuery 中提供的 .post()jQuery.ajax()函数,是一个功能比较综合的函数,它允许我们对Ajax请求进行更详细的配置。
基本语法:

XHR

XMLHttpRequest(简称xhr)是浏览器提供的Javascript对象,通过它,可以请求服务器上的数据资源。之前的jQuery 中的Ajax函数,就是基于xhr对象封装出来的。

缺点:只支持文本数据的传输,无法用来读取和上传文件

传送和接收数据时,没有进度信息,只能提示有没有完成

get请求

	// 1. 创建 XHR 对象
    var xhr = new XMLHttpRequest()
    // 2. 调用 open 函数
    xhr.open('GET', 'URL?id=1')
    // 3. 调用 send 函数
    xhr.send()
    // 4. 监听 onreadystatechange 事件
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        // 获取服务器响应的数据
        console.log(xhr.responseText)
      }
    }

post请求

	// 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)
      }
    }

readyState属性

当前Ajax请求所处的状态。
请添加图片描述
URL编码与解码

URL地址中只允许出现英文相关的字母、标点符号、数字,因此,在URL地址中不允许出现中文字符。

如果URL中需要包含中文这样的字符,则必须对中文字符进行 编码(转义)。

URL编码的原则:使用安全的字符(没有特殊用途或者特殊意义的可打印字符)去表示那些不安全的}符。

就是用英文符表示非英文符

//encodeURL(编码)
//decodeURL(解码)
	var en = '奈斯先生'
    var en1 = encodeURI(en)
    console.log(en1);

    var en2 = decodeURI('%E5%A5%88%E6%96%AF')
    console.log(en2);

form表单

表单在网页中主要负责数据采集功能。HTML中的标签,就是用于采集用户输入的信息,并通过标签的提交操作,把采集到的信息提交到服务器端进行处理。

组成:表单标签、表单域、表单按钮

属性

action:向何处发送数据

action属性用来规定当提交表单时,向何处发送表单数据。

action属性的值应该是后端提供的一个URL地址,这个URL地址专门负责接收表单提交过来的数据。当表单在未指定action属性值的情况下,action 的默认值为当前页面的URL地址。

target:规定在何处打开 action URL地址

method:规定以何种方式把表单数据提交到action URL

<form action="/login" target="_blank" method="post/get">
//get:适合提交少量、简单的数据
//post:不体现数据,安全;适合复杂、大量、文件上传的数据

enctype:发送表单数据之前如何对数据进行编码
请添加图片描述
涉及到文件上传操作时,必须将enctype的值设置为第二种
否则设置为第一种即可

通过ajax提交表单数据

同步提交:
通过点击submit 按钮,触发表单提交的操作,从而使页面跳转到action URL的行为,叫做表单的同步提交。

缺点:整个页面发生跳转,用户体验差
提交后,页面之前的额状态和数据会丢失

解决方案:表单只负责采集数据,ajax负责将数据提交到服务器

阻止表单默认提交行为
当监听到表单的提交事件以后,可以调用事件对象的event.preventDefault()函数,来阻止表单的提交和页面的跳转

快速获取表单中的数据

serialize()  函数
//一次性获取所有数据
//注意:在使用serialize()函数快速获取表单数据时,必须为每个表单元素添加name属性!
		$(function () {
            // 第一种方式
            // $('#f1').submit(function (e) {
            //     e.preventDefault();
            //     var data = $(this).serialize();
            //     console.log(data);
            // })

            // 第二种方式
            //监听表单提交事件
            $('#f1').on('submit', function (e) {
                alert('监听到了表单的提交事件2')
                //阻止表单默认提交行为
                e.preventDefault()
                var data = $('#f1').serialize()
                console.log(data);
            })
        })

jquery实现文件上传

	//jQuery实现loading效果
	$(document).ajaxStart(function () {
        $('#loading').show()
      })
    $(document).ajaxStop(function () {
        $('#loading').hide()
      })

		$.ajax({
          method: 'POST',
          url: 'url',
          data: fd,
          //不修改content-Type属性,使用 FormData默认的content-Type值
          processData: false,
          //不对FormData中的数据进行url编码,而是将FormData数据原样发送到服务器
          contentType: false,
          success: function (res) {
            console.log(res)
          }
        })

XHR2新特性

可以设置HTTP请求的时限

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

可以使用formData对象管理表单数据

	// 1. 创建 FormData 实例
    var fd = new FormData()
    // 2. 调用 append 函数,向 fd 中追加数据
    fd.append('uname', 'zs')
    fd.append('upwd', '123456')
    //3.创建XHR对象
    var xhr = new XMLHttpRequest()
    //4.指定请求类型与URL地址
    xhr.open('POST', 'URL')
    //直接提交 FormData对象,这与提交网页表单的效果,完全一样
    xhr.send(fd)

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

快速获取网页表单值

// 1. 通过 DOM 操作,获取到 form 表单元素
    var form = document.querySelector('#form1')

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

      // 创建 FormData,快速获取到 form 表单中的数据,会自动将表单数据填充到FormData对象中
      var fd = new FormData(form)
      var xhr = new XMLHttpRequest()
      xhr.open('POST', 'URL')
      xhr.send(fd)
      xhr.onreadystatechange = function () {}
    })

可以上传文件

  <!-- 1. 文件选择框 -->
  <input type="file" id="file1" />
  <!-- 2. 上传文件的按钮 -->
  <button id="btnUpload">上传文件</button>
  <br />
  <!-- 3. img 标签,来显示上传成功以后的图片 -->
  <img src="" alt="" id="img" width="800" />
	// 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])
	  //使用xhr发起上传文件的请求
      var xhr = new XMLHttpRequest()
      xhr.open('POST', 'url')
      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 = 'url' + data.url
          } else {
            // 上传失败
            console.log('图片上传失败!' + data.m![请添加图片描述](https://img-blog.csdnimg.cn/020da708f797442fae19b3115751df23.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATuWliOaWr-WFiOeUnw==,size_13,color_FFFFFF,t_70,g_se,x_16)
essage)
          }
        }
      }
    })

可获得数据传输的进度信息

xhr.upload.onprogress

请添加图片描述

请添加图片描述


数据交换格式

就是服务器端与客户端之间进行数据传输与交换的格式。

前端领域,经常提及的两种数据交换格式分别是XML和JSON。其中XML用的非常少,所以,重点了解的数据衣换格式就是JSON

JSON就是Javascript对象和数组的字符串表示法,它使用文本表示一个JS对象或数组的信息,因此,JSON的本质是字符串。

作用:JSON是一种轻量级的文本数据交换格式,在作用上类似于XML,专门用于存储和传输数据,但是JSON 比 XML更小、更快、更易解析。

对象结构:
对象结构:对象结构在JSON中表示为 { } 括起来的内容。数据结构为 { key: value, key: value…} 的键值对结构。

其中,key必须是使用英文的 双引号 包裹的字符串,value的数据类型可以是:数字、字符串、布尔值、null、数组、对象6种类型。

数组结构:
数组结构:数组结构在JSON中表示为 [ ] 括起来的内容。

数据结构为[ “java” , "javascript , 30, true… ].数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6种类型。

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

JSON和JS互转

从JSON字符串转换为JS对象。使用JSON.parse()------反序列化

从JS对象转换为JSON字符串,使用JSON.stringify() ------序列化

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)

面试题

一、什么是ajax?ajax作用是什么?

AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。

二、为什么要用ajax:

Ajax应用程序的优势在于:

  1. 通过异步模式,提升了用户体验
  2. 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用
  3. Ajax引擎在客户端运行,承担了一部分本来由服务器承担的工作,从而减少了大用户量下的服务器负载。

本期到这里就结束了,感谢阅读!有问题留言,及时回复


  • 点赞加关注,持续更新实用技巧、热门资源、软件教程等
  • 有任何 软件 影视 教程资源 考证资料等需求留言即可
举报

相关推荐

0 条评论