Ajax加强

最新推荐文章于 2024-07-15 15:46:09 发布

YYQi

最新推荐文章于 2024-07-15 15:46:09 发布

阅读量90

点赞数

文章标签： ajax javascript jquery

本文链接：https://blog.csdn.net/weixin_44863645/article/details/115978183

版权

一、xhr的基本使用

1.什么是XMLHttpRequest?

是浏览器提供的javascript对象，通过它，可以请求服务器上的数据资源
jQuery中的Ajax函数，就是基于xhr对象封装出来的。

2.使用xhr发起GET请求

步骤：创建xhr对象__调用xhr.open()函数__调用xhr.send()函数__监听xhr.onreadystatechange事件

// 前端_后端_数据库
// ajax是向服务器请求数据的方式（前端向后端发起请求的方式）
// 获取数据的四步
// 第一步:发起一个新的ajax请求
var xhr=new XMLHttpRequest()
// 第二步:执行open方法
// open方法里要传递三个参数:
// 第一个参数:get请求:搜索的内容(发送信息)展示在地址栏里;post请求:隐藏发送的信息(账号密码)
// 第二个参数:要向哪一个服务器请求什么样的数据:域名:端口号/search(接口)?必选参数=具体参数
// 第三个参数:布尔型值(true/false),是否是异步请求(不等待,解决了代码阻塞问题)
xhr.open('GET','http://localhost:3000/search?keywords=搁浅',true)
// 第三步:执行send方法
// 因为前面是GET请求,所以send方法里不需要传递任何参数
xhr.send()
// 但如果是POST请求,keywords= 搁浅就不能写在open方法里
// 所以此信息要以对象的形式写在send方法里,并且要用JSON包装
// xhr.send(JSON.stringify({keywords:'搁浅'}))
// 第四步:处理后端发送的数据 接收到的响应结果
xhr.onreadystatechange=function(){
    // xhr.readyState（状态值,01234）
    // xhr.status（状态码）
    // 完美状态:状态值是4,状态码是200(交易成功)
    if(xhr.readyState==4&&xhr.status==200){
        // 可以完整获取数据
        console.log(JSON.parse(xhr.response))
    }
}

3.了解xhr对象的readyState属性

用来表示当前Ajax请求的所处的状态
每个Ajax请求必然处于以下状态中的一个：0(xhr对象被创建，尚未调用open方法)，1(open方法已经被调用)，2(send方法已经被调用，响应头也已经被接收)，3(数据接收中，此时response属性中已经包含部分数据)，4(Ajax请求完成,意味着数据传输已经彻底完成/失败)

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

只需要在xhr.open期间，为URL地址指定参数即可
?keywords=搁浅 __查询字符串
xhr.open(‘GET’,‘http://localhost:3000/search?keywords=搁浅’,true)

5.查询字符串

（1）什么是查询字符串？
URL参数(查询字符串)指在URL末尾加上用于向服务器发送信息的字符串（变量）
格式：将英文的 ? 放在URL的末尾，然后再加上 参数=值 ，想加上多个参数的话，使用 & 符号进行分隔。
（2）GET请求携带参数的本质
本质上，都是直接将参数以查询字符串的形式，追加到URL地址的后面，发送到服务器的
例如：$.get(‘url’ , {name : ’ zs ’ , age : 20} , function() { })
等价于 $.get(‘url?name=zs&age=20’ , function() { })

6.URL编码与解码

（1）什么是URL编码？
URL地址中，只允许出现英文相关的字母，标点符号，数字。因此，在URL地址中不允许出现中文字符。
如果URL中需要包含中文这样的字符，则必须对中文字符进行编码(转义)
URL编码的原则：使用安全的字符(没有特殊用途/特殊意义的可打印字符)去表示那些不安全的字符。通俗地说，就是使用英文字符去表示非英文字符
（1）如何对URL进行编码与解码
浏览器提供了URL编码与解码的API，分别是：
encodeURI( )___编码的函数

console.log(encodeURI('哈哈哈哈'))
// %E5%93%88%E5%93%88%E5%93%88%E5%93%88

decodeURI( )__解码的函数

console.log(decodeURI('%E5%93%88'))
// 哈

7.使用xhr发起POST请求

步骤：创建xhr对象__调用xhr.open()函数___设置Content-Type属性(固定写法)__调用xhr.send()函数,同时指定要发送的数据__监听xhr.onreadystatechange事件

      var xhr=new XMLHttpRequest()
      xhr.open('post','http://...')
      xhr.setRequestHeader('content-Type','application/x-www-form-urlencoded')
      xhr.send('username=zs&age=20')
      xhr.onreadystatechange=function(){
        if(xhr.readyState===4&&xhr.status===200){
          console.log(xhr.responseText)
        }
      }

二、数据交换格式

1.什么是数据交换格式？

就是服务器端与客户端之间进行数据传输与交换的格式
前端领域，经常提及的两种数据交换格式分别是XML和JSON，但是XML用的非常少。

2.XML

可扩展标记语言，与HTML类似，但两者间没有任何关系。

    <note>
      <to>ls</to>
      <from>zs</from>
      <heading>通知</heading>
      <body>晚上开会</body>
    </note>

（1）XML和HTML的区别：
HTML被设计用来描述网页上的内容，是网页内容的载体
XML被用来传输和存储数据，是数据的载体
（2）XML的缺点：
格式臃肿，和数据无关的代码多，体积大，传输效率低；
在Javascript中解析XML比较麻烦；

3.JSON

（1）什么是JSON？
JavaScript Object Notation__Javascript对象表示法，简单来说，JSON就是Javascript对象和数组的字符串表示法，它使用文本表示一个JS对象/数组的信息，因此JSON的本质是字符串。
作用：JSON是一种轻量级的文本数据交换格式，在作用上类似于XML，专门用于存储和传输数据，但是JSON比XML更小，更快，更易解析。
（2）JSON的两种结构
JSON中包含对象和数组两种结构
对象结构：{ key : value , key : value , …}，key必须使用英文的双引号包裹的字符串，value可以是数字，字符串，布尔值，null，数组，对象6种类型。

     {
        "age":20,
        "gender":"女",
        "hobby":["吃饭","学习"]
      }

数组结构：[“java” , “javascript” , 30 , true , …]，数组中的数据类型可以是数字，字符串，布尔值，null，数组，对象6种类型。
（3）JSON语法的注意事项
属性名必须使用双引号包裹；字符串类型的值必须使用双引号包裹；JSON中不允许使用单引号表示字符串；JSON中不能写注释，因为JSON不是js代码；JSON最外层必须是对象/数组格式；不能用undefined/函数作为JSON的值。

（4）JSON和JS对象的关系
JSON是JS对象的字符串表示法，本质上是字符串

（5）JSON和JS对象之间的相互转换
JSON字符串——>JS对象：JSON.parse( )方法

  var obj=JSON.parse('{"a":"Hello","b":"World"}')
  console.log(obj)  // {a: "Hello", b: "World"}

JS对象——>JSON字符串：JSON.stringify( )方法

  var jsonStr=JSON.stringify(obj)
  console.log(jsonStr)
  // {"a":"Hello","b":"World"}

在发起Ajax请求中会用到JSON.parse( )，因为xhr.responseText返回的是JSON格式的数据，我们需要的是对象格式，所以要解析。

（6）序列化和反序列化
序列化：把数据对象转为字符串的过程。例如调用JSON.stringify( )函数的操作，叫做JSON序列化
反序列化：把字符串转为数据对象的过程。例如调用JSON.parse( )函数的操作，叫做JSON反序列化

三、XMLHttpRequest Level2的新特性

1.旧版xhr的缺点

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

2.xhr 2的新特性

（1）可以设置HTTP请求的时限
通过timeout属性，设置HTTP请求的时限，单位是毫秒，过了这个期限，就自动停止HTTP请求。

xhr.timeout = 3000

xhr.ontimeout = function(event) {
    // 超时以后的处理函数
     alert(' 请求超时 ')
}

（2）可以用FormData对象管理表单数据

var fd = new FormData( )
fd.append('uname' , 'zs')
fd.append('pwd' , '123456')
var xhr=new XMLHttpRequest()
xhr.open('post','http://...')
xhr.send( fd )
xhr.onreadystatechange=function(){
    if(xhr.readyState===4&&xhr.status===200){
         console.log(xhr.responseText)
    }
}

（3）可以上传文件

 <!-- 一.定义UI结构 -->
    <!-- 文件选择器 -->
    <input type="file" id="file1">
    <!-- 上传按钮 -->
    <button id="btnUpload">上传文件</button>
    <br>
    <!-- 显示上传到服务器上的图片 -->
    <img src="" id="img" width="800">

<script>
      var btnUpload=document.getElementById('btnUpload')
      btnUpload.addEventListener('click',function(){
        var files=document.getElementById('file1').files
        if(files.length<=0){
          return alert('请继续上传文件！')
        }
        // 将用户选择的文件，添加到FormData中
        var fd = new FormData( )
        fd.append('avatar' , files[0])
        // 使用xhr发起上传文件的请求
        var xhr=new XMLHttpRequest()
        xhr.open('post','http://...')
        xhr.send( fd )
        xhr.onreadystatechange=function(){
          if(xhr.readyState===4&&xhr.status===200){
          var data=JSON.parse(xhr.responseText)
          if(data.status===200){
          // 上传成功
             document.getElementById('img').src='http://www...'+data.url
          }else{
             // 上传失败
             console.log(data.message)
          }
       }
   }
})
</script>

（4）可以获得数据传输的进度信息
监听xhr.upload.onprogress事件，来获取到文件的上传进度

xhr.upload.οnprοgress=function(e){
   // e.lengthComputable是一个布尔值，表示当前上传资源是否具有可计算的长度
   if(e.lengthComputable){
     // e.loaded 已传输的字节
     // e.total 需要传输的总字节
     var percentComplete=Math.ceil((e.loaded/e.total)*100)
   }
}

四、jQuery高级用法

1.jQuery实现文件上传

<!-- 一.定义UI结构 -->
    <!-- 文件选择器 -->
    <input type="file" id="file1">
    <!-- 上传按钮 -->
    <button id="btnUpload">上传文件</button>

<script>
      // 验证是否上传了文件
      $('#btnUpload').on('click',function(){
        // $('file1')[0]转成原生的DOM对象
        var files=$('#file1')[0].files
        if(files.length<=0){
          return alert('请选择图片后再上传！')
        }
        console.log('OK!')
      })
      // 向FormData中追加文件
      var fd=new FormData()
      fd.append('avatar',files[0])
      // 用jQuery发起上传文件的请求
      $.ajax({
        method:'POST',
        url:'http://www...',
        data:fd,
        // 不修改contentType属性，使用FormData默认的contentType属性
        contentType:false,
        // 不对FormData中的数据进行url编码，而是将FormData数据原样发送到服务器
        processData:false,
        success:function(res){
          console.log(res)
        }
      })
</script>

2.jQuery监听Ajax发起完成事件

$(document).ajaxStart(function( ){
})
$(document).ajaxStop(function( ){
})

注意：$(document).ajaxStart()这个函数会监听到文档内所有的Ajax请求

五、axios

1.什么是axios

专注于网络数据请求的库
相比于原生xhr对象，axios简单易用
相比于jQuery，axios更加轻量化，只专注于网络数据请求

2.axios发起GET请求

<button id="btn">发起GET请求</button>

document.getElementById('btn').addEventListener('click',function(){
        var paramsObj={name:'zs',age:20}
        axios.get('http://www...',{params:paramsObj}).then(function(res){
          console.log(res.data)
          // res.data才是服务器响应真实数据
          // 其他的都是axios包装的
        })
 })

3.axios发起POST请求

document.getElementById('btn').addEventListener('click',function(){
        var dataObj={name:'zs',age:20}
        axios.post('http://www...',{dataObj}).then(function(res){
          console.log(res.data)
          // res.data才是服务器响应真实数据
          // 其他的都是axios包装的
        })
 })

4.直接使用axios发起请求

类似于jQuery中$.ajax()的函数

document.getElementById('btn').addEventListener('click',function(){
        axios({
          method:'请求类型',
          url:'请求的url地址',
          // post数据要通过data属性提供
          data:{post数据},
          // get参数要通过params属性提供
          params:{GET参数}
        }).then(callback)
 })

YYQi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax加强

文章目录一、xhr的基本使用1.什么是XMLHttpRequest?2.使用xhr发起GET请求3.了解xhr对象的readyState属性4.使用xhr发起带参数的GET请求5.查询字符串6.URL编码与解码7.使用xhr发起POST请求二、数据交换格式1.什么是数据交换格式？2.XML3.JSON三、封装自己的Ajax函数四、1.引入库五、1.读入数据总结一、xhr的基本使用1.什么是XMLHttpRequest?是浏览器提供的javascript对象，通过它，可以请求服务器上的数据资源jQue
复制链接

扫一扫