94.《ajax案例详解(node+ajax)》

最新推荐文章于 2022-08-02 00:03:22 发布

@逆风微笑代码狗

最新推荐文章于 2022-08-02 00:03:22 发布

阅读量218

点赞数

文章标签： ajax nodejs

本文链接：https://blog.csdn.net/qq_44864082/article/details/117332097

版权

ajax

ajax的优点

可以无需刷新页面而与服务器端进行通信。
允许你根据用户事件来更新部分页面内容。

AJAX 的缺点

没有浏览历史，不能回退
存在跨域问题(同源)
SEO 不友好

http 超文本传输协议

是浏览器与万维网服务器之间互相通信的规则

请求报文

请求行   get / url  / http/1.1
头	   Host:www.liuua.com
	    Cookie: name = gunian
	    content-type: application/x-www-form-urlencoded
	    User-Agent:chrome 83
空行
体      username=admin&age=18

响应报文

行      http/1.1   200  ok 
	    content-type: text/html;charset=utf-8
	    content-length:2048
	    content-encoding: gzip
空行
体      <html>
			<head></head>
			<body>
				<h1>响应</h1>
			</body>
		</html>

AJAX + node.js 案例

案例分为两种情况一种 get请求一种为 post 请求

效果图

在这里插入图片描述

node.js

const express = require("express") 
const app = express() 

app.get("/server",(req,res)=>{
    // 设施响应头
    res.setHeader("Access-control-Allow-Origin","*")

    res.send("你好 ajax,这里是get请求")
})

app.post("/server",(req,res)=>{
    // 设施响应头
    res.setHeader("Access-control-Allow-Origin","*")
    
    res.send("你好 ajax，这里是post请求")
})

app.listen(3000)
console.log("服务器启动成功");

html+js

<!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>
<style>
    button{
        width: 100px;
        height: 30px;
        background-color: antiquewhite; 
        border: 1px solid red;
    }
    div{
        width: 200px;
        height: 100px;
        border: 10px solid green;
    }
</style>
<body>
    <button>点我发送请求</button>
    <h3>点击按钮  发送 get请求</h3>
    <div></div>
    <h3>鼠标移入 发送 post请求</h3>
    <div id="odiv2"></div>
    <script>
        const btn = document.getElementsByTagName("button")[0]
        const odiv = document.getElementsByTagName("div")[0]
        const odiv2 = document.getElementsByTagName("div")[1]
        // get
        btn.onclick= function(){
            // 创建对象
            const xhr = new XMLHttpRequest()
            // 初始化 设置请求方法和 url
            xhr.open("GET","http://127.0.0.1:3000/server?a=200&b=300&c=300")
            // 发送
            xhr.send()
            // 事件绑定 处理服务端返回的结果
            // on 事件
            // readystate 表示状态 : 0 未初始化 1 open执行 2 send 3 返回部分结果 4 返回所有结果  
            // change 改变时触发
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        // 处理返回结果 行 头 空行 体
                        console.log(xhr.status);  // 状态码
                        console.log(xhr.statusText); // 状态字符串
                        console.log(xhr.getAllResponseHeaders()); // 响应头
                        console.log(xhr.response); // 响应体
                        odiv.innerHTML =  xhr.response
                    }
                } 
            } 
        }

        // post
        odiv2.addEventListener("mouseover",function(){
            // 创建对象
            const xhr = new XMLHttpRequest()
            // 填入路径
            xhr.open("POST","http:127.0.0.1:3000/server") 
            // 发送  a=200&b=300&c=300 为参数
            xhr.send("a=200&b=300&c=300") 
            // 触发
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        odiv2.innerHTML = xhr.response
                    }
                } 
            }  
        })



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