nodejs --- ajax

最新推荐文章于 2024-09-17 14:30:35 发布

z_小张同学

最新推荐文章于 2024-09-17 14:30:35 发布

阅读量779

点赞数 1

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

本文链接：https://blog.csdn.net/z_2532040197/article/details/126090422

版权

node.js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文介绍了Ajax的核心概念，它是实现前端与服务器无刷新交互的技术。通过创建XMLHttpRequest对象，配置请求参数，发送请求并监听状态变化，可以实现局部刷新，更新网页内容。示例代码展示了如何使用Ajax进行GET请求，并处理不同的响应状态。

摘要由CSDN通过智能技术生成

ajax 全名 async javascript and XML(异步JavaScript和XML);是前后台交互的能力也就是我们客户端给服务端发送消息的⼯具，以及接受响应的⼯具。

ajax是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

前端刷新页面有两种技术:
1、整个页面刷新即跳转到一个新的网页页面
2、局部刷新，用js去做网络请求然后请求得到的数据动态的渲染的DOM

ajax请求的步骤：

1、创建ajax对象 new XMLHttpRequest()

2、配置连接信息

3、发送连接请求

4、等待连接

html 代码：

 <button onclick="load1()">ajax请求数据</button>
    
    <script>
        function load1() {
            // 1.创建ajax对象
            let xhr = new XMLHttpRequest()||new ActiveXObject("Microsoft.XMLHTTP")
            // 2.配置连接信息
            xhr.open("GET",`http://192.168.1.123:8081/ajax1`,true)	
            // 3.发送网络请求
            xhr.send()
            // 4.等待
            xhr.onreadystatechange = function() {
                console.log(xhr.readyState)
                if (xhr.readyState == 4&&xhr.status == 200) {
                    console.log(xhr.responseText);
                }else if (xhr.readyState == 4&&xhr.status == 404) {
                    console.log(xhr.responseText);
                    var obj = JSON.parse(xhr.responseText)
                    console.log(obj);
                }
            }
        }

        //readyState  0 请求未初始化  刚刚实例化XMLHttpRequest
        //readyState  1 客户端与服务器建立链接  调用open方法
        //readyState  2 请求已经被接收
        //readyState  3 请求正在处理中
        //readyState  4 请求成功

    </script>

js代码：

 var http = require("http")
 var fs = require("fs")
 var url = require("url")
 var querystring = require("querystring")
 var mime = require("mime")
 var app = http.createServer((req,res) => {
    let pathname = url.parse(req.url).pathname
    fs.readFile(__dirname+"/src"+pathname,(err,data) => {
        if (!err) {
            res.setHeader("conten-Type",mime.getType(pathname))
            res.end(data)
        }
        else if(pathname == "/ajax1") {
            res.writeHead(200,{"content-Type":"text/json"})
            res.end('{"name":"xiaozhang","age":21}')
        }
        else {
            
            res.end("404 not found")
        }
    })
 })
 app.listen(8081)