《Ajax科普入门》用Ajax写个经典影视台词网易云评论无限滚动,上传小姐姐图片并实时查看上传进度

Ajax的为何而诞生?

在互联网刚诞生的时候,网页显示内容是固定的,想要获取最新的内容,就要刷新网页。

为了让提升用户体验,微软在IE5中引入了XMLHttpRequest, 简称XHR,XMLHttpRequest的出现,可以让网页无需刷新,即可从服务器获取最新的内容,这项技术也就是所谓的Ajax

手写一个最简单的Ajax

将以下代码放入浏览器开发者工具中运行即可获得运行一个ajax

function test_ajax() {
    var xhr;
    if (window.XMLHttpRequest) {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器创建xhrRequest方式
        xhr = new XMLHttpRequest();
    } else {
        //  IE6, IE5 浏览器创建xhrRequest方式
        xhr = new ActiveXObject('MicroSoft.XMLHTTP');
    }
    xhr.open('GET', 'https://v1.hitokoto.cn/', true)

    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log('===>>', xhr.responseText);
            document.getElementsByTagName("body")[0].innerHTML = xhr.responseText
        }
    }
    xhr.send();
}

test_ajax();
手写一个最简单的Ajax

以上代码中,值得注意的是onreadystatechange,readyState函数,如果你想对事件进行更精细的处理,可以使用以下几个函数:

XMLHttpRequest.onloadstart:loadstart 事件(HTTP 请求发出)的监听函数
XMLHttpRequest.onprogress:progress事件(正在发送和加载数据)的监听函数
XMLHttpRequest.onabort:abort 事件(请求中止,比如用户调用了abort()方法)的监听函数
XMLHttpRequest.onerror:error 事件(请求失败)的监听函数
XMLHttpRequest.onload:load 事件(请求成功完成)的监听函数
XMLHttpRequest.ontimeout:timeout 事件(用户指定的时限超过了,请求还未完成)的监听函数
XMLHttpRequest.onloadend:loadend 事件(请求完成,不管成功或失败)的监听函数

手写需要处理的问题很多,为了方便,我们可以用jQuery封装好的Ajax, 并使用定时函数,每隔5秒钟,获取一次数据

Ajax无需刷新页面,自动从服务器获取数据.gif

手写一个最简单Ajax 的 Demo源码




    
    
    
    ~经典影视台词网易云评论无限滚动~
    
    


    

    

在线Demo https://www.v2fy.com/ajax-demo/index.html

用Ajax传文件,并实时查看上传进度

在Ajax1.0时代, 是无法直接上传文件的, 到了Ajax2.0时代, 新增了FormData, 我们就可以用FormData完成文件的上传

以前我们用form表单中的实现文件上传, 但前端无法实时查看上传的进度, 而Ajax2.0可以让我们实时监控上传进度

下面是原生javascript 使用 Ajax 完成 FormData上传文件, 并实时监听文件上传进度的小Demo, 前后端均已完成代码实现(后端为Node.js实现)

GIF效果展示

  • 前端实现代码:



    
    
    
    原生ajax2.0使用FormData上传文件, 并监听上传进度


    
原生ajax2.0使用FormData上传文件, 并监听上传进度


上传进度0%
  • 后端实现代码
const express = require("express");
const multer = require("multer");
const expressStatic = require("express-static");
const fs = require("fs");

let server = express();
let upload = multer({ dest: __dirname+'/uploads/' })
// 处理提交文件的post请求
server.post('/upload_file', upload.single('file'), function (req, res, next) {
  console.log("file信息", req.file);
  fs.rename(req.file.path, req.file.path+"."+req.file.mimetype.split("/").pop(), ()=>{
    res.send({status: 1000})
  })
})

// 处理静态目录
server.use(expressStatic(__dirname+"/www"))
// 监听服务
server.listen(8080, function(){
  console.log("请使用浏览器访问 http://localhost:8080/")
});

Gif图中使用的小姐姐图片素材

代码及相关素材已经托管到Github仓库 https://github.com/zhaoolee/Blog/tree/master/form_data_upload_file

小结

在2021年, 你滚动新闻页面,看到的无尽新闻信息流,背后都是Ajax技术提供支持,虽然无数程序员调侃用IE浏览器的, 吃泡面没有调料包,但不得不承认,IE引入的Ajax确实是个好技术,但遗憾的是,在IE浏览器的生命历程中,引入Ajax是其为数不多的高光时刻。

你可能感兴趣的:(《Ajax科普入门》用Ajax写个经典影视台词网易云评论无限滚动,上传小姐姐图片并实时查看上传进度)