1.初学AJAX（1）

最新推荐文章于 2024-05-22 10:43:02 发布

大神糖逗逗

最新推荐文章于 2024-05-22 10:43:02 发布

阅读量93

点赞数 2

文章标签： ajax http html5

本文链接：https://blog.csdn.net/t13268668791/article/details/118052777

版权

初学AJAX（1）

学习中了解到AJAX作用是进行一段操作然后得到响应，本质和一个函数感觉差不多

XML （可扩展标记语言）
被设计用来传输和储存数据（区分于HTML，后者是在界面中呈现数据，且HTML中的标签都是预定义标签，而XML都是自定义的标签）

但是现在基本用JSON来替代XML。

AJAX的优点

可以无刷新实现页面与服务器的通信
可根据用户时间来更新部分页面内容

缺点

无浏览历史，不能回退
存在跨域问题（同源）
SEO不友好（爬虫爬不到）

HTTP协议 ——超文本传输协议(Hypertext Transfer Protocol)
规定浏览器与万维网服务器间通信的规则
主要分为请求报文和响应报文

请求报文
起始行（start line）：描述请求或响应的基本信息；
头部字段（header）：使用 key-value 形式更详细地说明报文；
空行
消息正文（entity）：实际传输的数据，它不一定是纯文本，可以是图片、视频等二进制数据。
（起始行和头部字段统称为Header，消息正文也叫做实体，统称为body。每份请求报文一定有Header，可无body。）
响应报文
起始行：HTTP/1.1 200 OK
头部字段：Content-Type: text/html;charset=utf-8
Content-length: 2048（…等等）
(对响应体中的内容进行描述)
空行
消息正文（体）:
<html>
<body>
……
</body>
</html>

之后简单了解了一下express框架
下载了node.js后写了一个HELLO EXPRESS

//1、引入express
const express = require('express');


//2、创建应用对象
const app = express();


//3、创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/', (request, response) => {
    response.send('HELLO EXPRESS')

});

//4、监听端口启动服务
app.listen(8000, () => {
    console.log("服务已启动，8000 端口监听中......")
})

这个在页面中呈现出
~~（终于做出第一个小东西了！）~~
之后尝试着做了一下AJAX与HTML页面的结合
JavaScript代码

//1、引入express
const express = require('express');

//2、创建应用对象
const app = express();


//3、创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/server', (request, response) => {
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin', '*')

    //设置响应体
    response.send('HELLO EXPRESS')

});

//4、监听端口启动服务
app.listen(8000, () => {
    console.log("服务已启动，8000 端口监听中......")
})

再与一个简单的HTML页面结合一起

<!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>
    <style>
        #result {
            width: 500px;
            height: 500px;
            color: blue;
            background-color: bisque;
        }

        button {
            width: 100px;
            height: 30px;
        }
    </style>
</head>

<body>
    <button>
        cilck me
    </button>
    <div id="result">

    </div>
    <script>
        //获取button元素
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById("result");
        //绑定事件
        btn.onclick = function () {
            //四个步骤
            //1.创建对象
            const xhr = new XMLHttpRequest();
            //2.初始化，设置请求方法和url
            xhr.open('GET', 'http://127.0.0.1:8000/server');
            //3.发送
            xhr.send();
            //4.事件绑定 处理服务端返回的结果
            //readystate 是 xhr对象中德属性，表示状态 0 1 2 3 4 
            //初始值就是0  1表示open方法调用万病  2表示send方法调用完毕  3表示服务端返回了部分结果  4表示服务端返回所有结果
            xhr.onreadystatechange = function () {
                //判断
                if (xhr.readyState === 4) {
                    //判断响应状态码 200 404 403 401 500
                    //2xx成功
                    if (xhr.status >= 200 && xhr.status < 300) {
                        //处理结果 行  头  空行  体
                        //响应行
                        console.log(xhr.status);//响应状态码
                        console.log(xhr.statusText);//状态字符串
                        console.log(xhr.getAllResponseHeaders());//所有响应头
                        console.log(xhr.response);//响应体


                        //设置result的文本
                        result.innerHTML = xhr.response;
                    }
                }
            }
        }
    </script>
</body>

</html>

打开后点击按钮，就实现了不刷新页面然后更新div中的内容了
在这里插入图片描述
点击按钮
但是虽然初步做出了程序，但是内部原理还不太懂，之后再接再厉！

大神糖逗逗

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1.初学AJAX（1）

初学AJAX（1）学习中了解到AJAX作用是进行一段操作然后得到相应，本质和一个函数感觉差不多XML （可扩展标记语言）被设计用来传输和储存数据（区分于HTML，后者是在界面中呈现数据，且HTML中的标签都是预定义标签，而XML都是自定义的标签）但是现在基本用JSON来替代XML。AJAX的优点可以无刷新实现页面与服务器的通信可根据用户时间来更新部分页面内容缺点无浏览历史，不能回退存在跨域问题（同源）SEO不友好（爬虫爬不到）HTTP协议 ——超文本传输协议(Hype
复制链接

扫一扫