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

最新推荐文章于 2023-06-27 16:26:45 发布

M78_国产007

最新推荐文章于 2023-06-27 16:26:45 发布

阅读量880

点赞数

分类专栏： node.js JS 文章标签：前端 ajax javascript

本文链接：https://blog.csdn.net/m0_59345890/article/details/126063069

版权

JS 同时被 2 个专栏收录

48 篇文章 0 订阅

订阅专栏

node.js

15 篇文章 0 订阅

订阅专栏

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

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请求服务器数据。

先建立一个服务器：

const http=require("http")
const fs=require("fs")
const url=require("url")
const querysting=require("querystring")
const mime=require("mime")

//创建
var app=http.createServer((req,res)=>{
    //获取客户端输入的网址
    var urlobj=url.parse(req.url)
    //获得地址栏
    var pathname=urlobj.pathname
    //获得查询字符串
    var query = url.query

    //读取文件并创建静态托管
    fs.readFile(__dirname+"/src"+pathname,(err,data)=>{
        if(!err){
            res.setHeader("content-Type",mime.getType(pathname))
            res.end(data)
        }
        //有可能是一些数据接口，就是我们Ajax要请求的数据
        else if(pathname=="/ajax"){
            //返回一个假数据
            //设置HTTP状态代码
            res.writeHead(200,{"content-Type":"text/json"})
            res.end("{name='zs',age='10'}")
        }
        //有可能输入错误
        else{
            res.end("404")
        }
    })
})
app.listen(8088)

编写客户端：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>首页新闻</h1>
    <button onclick="fn()">点击获得数据</button>
    <script>
        function fn(){
            //创建Ajax对象
            //老版本IE的Ajax对象为ActiveXObject
            let xhr=new XMLHttpRequest()||new ActiveXObject()//兼容性写法
            //配置连接信息
            xhr.open("GET","http://172.20.10.3:8088/ajax",true)
            //发送请求
            xhr.send()

            //等待响应  绑定onreadystatechange事件
            xhr.onreadystatechange=function(){
                console.log(xhr.readyState);
                if(xhr.readyState==4&&xhr.status==200){
						console.log(xhr.responseText,11)
					}else if(xhr.readyState==4&&xhr.status==404){
						console.log(xhr.responseText,22)
						
					}
            }
        }

    </script>
</body>
</html>

请求结果：

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

M78_国产007

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
初步认识前端网页异步更新技术——AJAX

其中，method参数是必须提供的-用于指定你想用来发送请求的HTTP方法(GET，POST，PUT，DELETE或HEAD)。当服务器响应时，在接收消息体之前，如果存在任何消息体的话，XMLHttpRequest对象将把readyState设置为3(正在接收中)。在调用open()方法后，XMLHttpRequest对象把它的readyState属性设置为1(打开)并且把responseText、responseXML、status和statusText属性复位到它们的初始值。此时，响应已经被完全接收。.
复制链接

扫一扫