• 初步认识前端网页异步更新技术——AJAX

    前端刷新页面有两种技术:

    1、 整个页面刷新  跳转到一个新的网页html，传统的网页即是如此。

    2、网页局部刷新  用js去做网络请求 ，然后将得到的数据动态的渲染到页面。

    网页的局部刷新就要用到AJAX技术。

    简单介绍：AJAX全称Asynchronous JavaScript and XML 它是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术；通过在后台与服务器进行少量数据交换，使网页实现异步更新。这意味着可以在不重载整个页面的情况下，对网页的某些部分进行更新。

    AJAX对象及其属性、方法的介绍：

    想要使用AJAX技术就要知道window的一个属性XMLHttpRequest，XMLHttpRequest对象是当今所有AJAX和Web 2.0应用程序的技术基础。AJAX利用一个构建到所有现代浏览器内部的对象-XMLHttpRequest-来实现发送和接收HTTP请求与响应信息。我们new XMLHttpRequest()创建一个Ajax对象。

    其主要使用的方法：

    open()方法  你需要调用open(DOMString method，DOMString uri，boolean async，DOMString username，DOMString password)方法初始化一个XMLHttpRequest对象。其中，method参数是必须提供的-用于指定你想用来发送请求的HTTP方法(GET，POST，PUT，DELETE或HEAD)。为了把数据发送到服务器，应该使用POST方法；为了从服务器端检索数据，应该使用GET方法。另外，uri参数用于指定XMLHttpRequest对象把请求发送到的服务器相应的URI。借助于window.document.baseURI属性，该uri被解析为一个绝对的URI-换句话说，你可以使用相对的URI-它将使用与浏览器解析相对的URI一样的方式被解析。async参数指定是否请求是异步的-缺省值为true。为了发送一个同步请求，需要把这个参数设置为false。对于要求认证的服务器，你可以提供可选的用户名和口令参数。在调用open()方法后，XMLHttpRequest对象把它的readyState属性设置为1(打开)并且把responseText、responseXML、status和statusText属性复位到它们的初始值。另外，它还复位请求头部。注意，如果你调用open()方法并且此时readyState为4，则XMLHttpRequest对象将复位这些值。

    send()方法  在通过调用open()方法准备好一个请求之后，你需要把该请求发送到服务器。仅当readyState值为1时，你才可以调用send()方法；否则的话，XMLHttpRequest对象将引发一个异常。该请求被使用提供给open()方法的参数发送到服务器。当async参数为true时，send()方法立即返回，从而允许其它客户端脚本处理继续。在调用send()方法后，XMLHttpRequest对象把readyState的值设置为2(发送)。当服务器响应时，在接收消息体之前，如果存在任何消息体的话，XMLHttpRequest对象将把readyState设置为3(正在接收中)。当请求完成加载时，它把readyState设置为4(已加载)。对于一个HEAD类型的请求，它将在把readyState值设置为3后再立即把它设置为4。

    有一个事件：onreadystatechange事件

    XMLHttpRequest对象有一个属性ReadyState，它有四种取值： 
    1  描述一种"发送"状态；此时，代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。 
    2  描述一种"发送"状态；此时，已经通过send()方法把一个请求发送到服务器端，但是还没有收到一个响应。 
    3  描述一种"正在接收"状态；此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收结束。 
    4  描述一种"已加载"状态；此时，响应已经被完全接收。 

    当readyState值何时发生改变，XMLHttpRequest对象都会激发一个readystatechange事件。

    常用属性：

    status属性：这个status属性描述了HTTP状态代码，而且其类型为short。而且，仅当readyState值为3(正在接收中)或4(已加载)时，这个status属性才可用。当readyState的值小于3时试图存取status的值将引发一个异常。

    statusText属性：这个statusText属性描述了HTTP状态代码文本；并且仅当readyState值为3或4才可用。当readyState为其它值时试图存取statusText属性将引发一个异常。

    responseText属性：这个responseText属性包含客户端接收到的HTTP响应的文本内容。当readyState值为0、1或2时，responseText包含一个空字符串。当readyState值为3(正在接收)时，响应中包含客户端还未完成的响应信息。当readyState为4(已加载)时，该responseText包含完整的响应信息。

    responseXML属性：此responseXML属性用于当接收到完整的HTTP响应时(readyState为4)描述XML响应；此时，Content-Type头部指定MIME(媒体)类型为text/xml，application/xml或以+xml结尾。如果Content-Type头部并不包含这些媒体类型之一，那么responseXML的值为null。无论何时，只要readyState值不为4，那么该responseXML的值也为null。

    说了这么多，我们直接写一下原生AJAX请求服务器数据。

    先建立一个服务器：

    1. const http=require("http")
    2. const fs=require("fs")
    3. const url=require("url")
    4. const querysting=require("querystring")
    5. const mime=require("mime")
    6.  
    7. //创建
    8. var app=http.createServer((req,res)=>{
    9.     //获取客户端输入的网址
    10.     var urlobj=url.parse(req.url)
    11.     //获得地址栏
    12.     var pathname=urlobj.pathname
    13.     //获得查询字符串
    14.     var query = url.query
    15.  
    16.     //读取文件并创建静态托管
    17.     fs.readFile(__dirname+"/src"+pathname,(err,data)=>{
    18.         if(!err){
    19.             res.setHeader("content-Type",mime.getType(pathname))
    20.             res.end(data)
    21.         }
    22.         //有可能是一些数据接口，就是我们Ajax要请求的数据
    23.         else if(pathname=="/ajax"){
    24.             //返回一个假数据
    25.             //设置HTTP状态代码
    26.             res.writeHead(200,{"content-Type":"text/json"})
    27.             res.end("{name='zs',age='10'}")
    28.         }
    29.         //有可能输入错误
    30.         else{
    31.             res.end("404")
    32.         }
    33.     })
    34. })
    35. app.listen(8088)

    编写客户端：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     <h1>首页新闻h1>
    11.     <button onclick="fn()">点击获得数据button>
    12.     <script>
    13.         function fn(){
    14.             //创建Ajax对象
    15.             //老版本IE的Ajax对象为ActiveXObject
    16.             let xhr=new XMLHttpRequest()||new ActiveXObject()//兼容性写法
    17.             //配置连接信息
    18.             xhr.open("GET","http://172.20.10.3:8088/ajax",true)
    19.             //发送请求
    20.             xhr.send()
    21.  
    22.             //等待响应  绑定onreadystatechange事件
    23.             xhr.onreadystatechange=function(){
    24.                 console.log(xhr.readyState);
    25.                 if(xhr.readyState==4&&xhr.status==200){
    26. 						console.log(xhr.responseText,11)
    27. 					}else if(xhr.readyState==4&&xhr.status==404){
    28. 						console.log(xhr.responseText,22)
    29. 						
    30. 					}
    31.             }
    32.         }
    33.  
    34.     script>
    35. body>
    36. html>

    请求结果：

    得到json数据后就可以通过JSON.parse()解析得到对象，然后DOM操作页面内容 

  • 相关阅读:
    libevent、libev框架介绍
    Azure 机器学习：MLOps - 使用 Azure 机器学习进行模型管理、部署和监视
    【无标题】
    cookie 里面都包含什么属性？
    神经网络（八）注意力机制与外部记忆
    1136 A Delayed Palindrome
    Spring Security认证绕过漏洞（CVE-2022-22978）研究与防护手段
    万字总结随机森林原理、核心参数以及调优思路
    基于springboot学生管理系统设计与实现
    SpringCloudAlibaba-Sentinel流量监控
  • 原文地址：https://blog.csdn.net/m0_59345890/article/details/126063069