04_前后端交互技术之Ajax异步请求

本课目标

• 理解什么是同步请求和异步请求
• 理解Ajax的请求原理
• 掌握Ajax的基本用法
• 掌握课堂案例

1. 同步请求与异步请求的区别

1.1 什么是同步请求

• 同步请求：发送请求后需要等待服务端响应，同步请求阻止代码的执行，这会导致屏幕上出现“冻结”和无响应的用户体验。

1.2 什么是异步请求

• 异步请求：当请求的响应数据完全收到之时，会执行一个指定的回调函数，而在执行异步请求的同时，浏览器会正常地执行其他事务的处理。

2. Ajax的基本介绍与XMLHttpRequest对象

• 官方介绍：从服务器获取数据 - 学习 Web 开发 | MDN

• AJAX 是异步的 JavaScript 和 XML（Asynchronous JavaScript And XML）。简单点说，就是使用 XMLHttpRequest 对象与服务器通信。它可以使用 JSON，XML，HTML 和 text 文本等格式发送和接收数据。AJAX 最吸引人的就是它的“异步”特性，也就是说它可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。

• AJAX 最主要的两个特性做下列事：

  • 在不重新加载页面的情况下发送请求给服务器。

  • 接受并使用从服务器发来的数据。

• XMLHttpRequest：XMLHttpRequest是Ajax的核心，XMLHttpRequest（XHR）对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest 在 AJAX 编程中被大量使用。

2.1 Ajax提交Get请求

• 课堂案例：01.Ajax提交get请求.html

2.2 Ajax提交Post请求

• 课堂案例：02.Ajax提交post请求.html

2.3 中文编码的方式

• 课堂案例：03.中文字符编码方式.html

2.4 JSON对象与字符串互相转换

• JSON.parse() 方法用来解析 JSON 字符串，构造由字符串描述的 JavaScript 值或对象。提供可选的 reviver 函数用以在返回之前对所得到的对象执行变换 (操作)。

• JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串，如果指定了一个 replacer 函数，则可以选择性地替换值，或者指定的 replacer 是数组，则可选择性地仅包含数组指定的属性。

• 课堂案例：04.JSON对象与字符串互相转换.html

• • 总结：json的数据格式是javascript内置的，可以和javascirpt的对象互相转换。需要注意的是json格式的数据的key是需要加双引号的。

  • 用途：主要是用于客户端与服务端之间的数据传递。

3. FormData对象的使用

• FormData：FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式，并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去，本接口和此方法都相当简单直接。如果送出时的编码类型被设为 "multipart/form-data"，它会使用和表单一样的格式。

• 课堂案例：05.FormData对象的基本使用.html

• • 
    
    
    
        
        
        
        
    
    
    
        
    
            用户名：
    
            密码：
    
            
        
    
        
    
    
    

    FormData 的 get() 方法用于返回 FormData 对象中和指定的键关联的第一个值，如果你想要返回和指定键关联的全部值，那么可以使用 getAll() 方法。

4. json格式数据作为参数提交

• 课堂案例：06.json数据格式提交.html

• 
  
  
      
      
      
      
  
  
          
  
              用户名：
  
              密码：
  
              
          
  
      
  
  

5. 文件上传的实现

• 课堂案例：07.文件上传案例实现.html

• 
  
  
      
      
      
      
  
  
      
       
  
       上传图片