Ajax学习

目录

XMLHttpRequest的基本使用：

利用xhr对象发起get数据请求：

利用xhr发起post请求：

数据交换格式：

定义自己的ajax库：

xhr中设置请求时限：

Ajax中上传文件：

计算文件的上传进度：

XMLHttpRequest的基本使用：

XMLHttpRequest（简称xhr）是浏览器提供的JavaScript对象，通过它可以请求服务器上的数据资源，jQuery重点Ajax函数，是基于xhr对象进行封装出来的。

利用xhr对象发起get数据请求：

主要分为四步骤：

1. 创建xhr对象
2. 调用open函数
3. 调用send函数发起Ajax请求

4. 监听 onreadystatechange 事件

代码如下：

利用xhr发起post请求：

主要分为五步骤：

1.  创建 xhr 对象

2. 调用 open 函数

3. 调用setRequestHeader函数 设置 Content-Type 属性 固定写法

4. 调用 send 函数

5. 监听事件onreadystatechange

数据交换格式：

 数据交换格式两种：xml和JSON

    xml被设计用来传输和储存数据,是数据的载体，xml格式臃肿，和数据无关的代码多，体积大，传输效率低

       在JavaScript中解析xml比较麻烦 ，所以前端主学JSON

     JSON即是JavaScript对象表示法本质是字符串使用文本表示一个js对象或数组信息

    JSON是一种轻量级的文本数据交换格式 ， JSON不能写注释  ， 不能使用其他类型作为JSON的值 JSON在计算机与网络之间储存和传输数据

    把数据对象转化为字符串的过程叫做序列化   ，把字符串转化为数据对象的过程叫做反序列化

使用JSON中的parse函数应用：

一般在xhr发起onreadstatechange事件中将数据转换为js对象称之为反序列化。

定义自己的ajax库：

调用自己的itheiam函数模仿$.ajax()

在js中定义ajax库：

function zhuanhuan(data) {
  //定义一个将数据转换查询字符串的形式
  var arr = [];
  for (var i in data) {
    //i为循环对象的属性
    var ser = i + "=" + data[i];
    arr.push(ser);
  }
  return arr.join("&"); //多个属性需要加入&符号
}
function itheima(options) {
  var xhr = new XMLHttpRequest();
  var qs = zhuanhuan(options.data); //需要的数据，需要转换为查询字符串形式
  if (options.method.toUpperCase == "GET") {
    //将options的方法转为大写请求
    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);//将数据JSON转换为js对象
        options.success(result);//将数据传入success函数中
    }
  }
}

xhr中设置请求时限：

Ajax中上传文件：

  
  
  
  



  
  
  
  上传文件
  

  
  

  

需要注意的是：将文件内容需要进行添加到 FormData 中再进行上传

计算文件的上传进度：

需要调用xhr中的onprogress事件注意事件要放在open函数之前才有效。、

在页面中可以渲染一个进度条布局使用bootstrap库进行渲染

  
    
    
    
    
    
    
  

  
    
    
    
    上传文件

    
    

      

        0%