基于原生JavaScript的ajax详细基础教程

目录

3.1、XMLHttpRequest

3.1.1 新旧版本区别

3.1.2 xhr发起GET请求步骤：

3.1.3xhr发起POST请求

3.2、 查询字符串

3.3、get请求携带参数的本质

3.4、URL编码与解码

3.5、数据交换格式

3.5.1 XML

3.5.2 JSON 

 3.6、文件上传进度

 3.7、jQuery上传文件

 3.8、axios

---

3.1、XMLHttpRequest

        可以请求服务器上的数据资源

3.1.1 新旧版本区别

旧版缺点：

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

新版新功能：

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

 xhr.timeout属性：

let xhr = new XMLHttpRequest();
    xhr.timeout = 3000;
    xhr.ontimeout = function(event){
        alert("请求超时")
    }
--后面接请求事件

FormData对象：

• 不需要设置setRequestHeader的请求头
• 因为是构造函数需要先实例化在使用
• fd = new FormData()
• 利用fd.append('uname', 'zs')添加属性和值
• 快速获取表单数据：fd = new FormData(表单对象)

//手动获取
// 1. 创建 FormData 实例
            // write here...
            let fd =new FormData();
            // 2. 调用 append 函数，向 fd 中追加数据
            // write here...
            fd.append('bookname',"zzz")
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'URL地址');
            xhr.send(fd);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    console.log(JSON.parse(xhr.responseText));
                }
            };

  
  
  
  




  

    
    
    提交
  

  

3.1.2 xhr发起GET请求步骤：

// 1. 创建 XHR 对象（即小黄人对象）
let xhr = new XMLHttpRequest()

// 2. 调用 open 函数
xhr.open('GET', 'URL地址')

// 3. 调用 send 函数
xhr.send()

// 4. 监听 onreadystatechange 事件
xhr.onreadystatechange = function () {
 if (xhr.readyState === 4 && xhr.status === 200) {

   // 获取服务器响应的数据
   console.log(xhr.responseText)
  }
}

        if里是固定写法，判断服务器是否拿到数据 

 3.1.3xhr发起POST请求

//1、创建 xhr 对象
let xhr = new XMLHttpRequest();

//2、调用 xhr.open() 函数
    xhr.open('post','URL地址');

//3、设置 Content-Type 属性（固定写法）
    xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');

//4、调用 xhr.send() 函数，同时指定要发送的数据
    xhr.send('id=1&bookname=冲冲冲&author=张三&publisher=上海');//根据参数传值，

//5、监听 xhr.onreadystatechange 事件
    xhr.onreadystatechange = function(){
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText)
  }
    }

 readyState属性：

值	状态	描述
0	UNSENT	XMLHttpRequest对象已被创建，但尚未调用open方法
1	OPENED	open方法已被调用
2	HEADERS_RECEIVED	send方法已被调用，响应头也已被接收
3	LOADING	数据接收中，此时response属性中已经包含部分数据
4	DONE	Ajax请求完成，这意味着数据传输已经彻底完成或失败

 3.2、 查询字符串

        定义：查询字符串（URL 参数）是指在 URL 的末尾加上用于向服务器发送信息的字符串（变量）

        格式：将英文的 ? 放在`URL` 的末尾，然后再加上参数＝值 ，想加上多个参数的话，使用 &符号进行分隔以这个形式，可以将想要发送给服务器的数据添加到 `URL` 中。

 3.3、get请求携带参数的本质

        无论使用$.ajax()，还是使用$.get()，又或者直接使用xhr对象发起GET请求，当需要携带参数的时候，本质上都是直接将参数以查询字符串的形式，追加到URL地址的而后面，发送到服务器。

$.get('url地址',{name:'zs',age:20},function(){})

//等价于

$.get('url?name=zs&age=20',function(){})

$.ajax({method:'GET',url:'URL地址',data:{name:'zs',age:'20'},success:function(){}})

//等价于

$.ajax({method:'GET',url:'url?name=zs&age=20',success:function(){}})

3.4、URL编码与解码

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

        原则：使用安全的字符（没有特殊用途或者特殊意义的可打印字符）去表示那些不安全的字符。

• encodeURI(‘’) 编码的函数
• decodeURI(‘’)解码的函数：三组百分号表示一个中文字符

console.log(encodeURI('张三'));
console.log(decodeURI('%E5%BC%A0%E4%B8%89'));

3.5、数据交换格式

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

3.5.1 XML

        XML的英文全称是EXtensible Markup Language，即可扩展标记语言

XML和HTML的区别：

• XML 和 HTML虽然都是标记语言，但是，它们两者之间没有任何的关系。
• HTML被设计用来描述网页上的内容，是网页内容的载体
• XML 被设计用来传输和存储数据，是数据的载体

---

缺点：

• XML格式臃肿，和数据无关的代码多，体积大，传输效率低
• 在JavaScript中解析 XML 比较麻烦

3.5.2 JSON 

        JSON 的英文全称是 `JavaScript Object Notation`，即JavaScript 对象表示法。简单来讲，JSON就是JavaScript 对象和数组的字符串表示法，它使用文本表示一个 JS对象或数组的信息，因此，JSON的本质是字符串。

        作用：是一种轻量级的文本数据交换格式

两种结构：

        对象：在 JSON中表示为 { } 括起来的内容。数据结构为 { key: value, key: value, … } 的键值对结构。其中，key 必须是使用英文的双引号包裹的字符串，value的数据类型可以是数字、字符串（必须使用双引号包裹）、布尔值、null、数组、对象6种类型。

        数组：数组结构在 JSON中表示为[ ] 括起来的内容。数据结构为 [ "java", "JavaScript", 30, true … ]。数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6种类型。

注意：

1. 属性名必须使用双引号包裹
2. 字符串类型的值必须使用双引号包裹
3. JSON中不允许使用单引号表示字符串
4. JSON中不能写注释
5. JSON的最外层必须是对象或数组格式
6. 不能使用undefined或函数作为JSON的值

反序列化：JSON字符串转js对象JSON.parse(JSON字符串)

序列化：JS对象转JSON字符串JSON.stringify（JSON字符串）

 3.6、文件上传进度

xhr.upload.onprogress事件

 xhr.upload.onprogress = function (e) {
          if (e.lengthComputable) {
            var per = Math.ceil((e.loaded / e.total) * 100);
            $("#percent").css('width',`${per}%`).html(`${per}%`)
          }

• e.loaded已传输的字节
• e.total需要传输的总字节

 3.7、jQuery上传文件

    
        
        
        
        
        
    
    
    
        
        上传文件

        

        

        
        
    
        
    

 3.8、axios

        网络数据请求库

语法： 

axios.get('url',{params:{参数}}).then(function(){

})

axios({
  method: '请求类型',
  url: '请求的URL地址',
  data: {
    /* POST数据 */
  },
  params: {
    /* GET参数 */
  }
}).then(callback)

  
    
    
    
    
  

  
    
    
    
    上传文件