Ajax_00000

contents

Ajax介绍

AJAX(Asynchronous JavaScript And XML)。

XML简介

XML:可扩展标记语言。

XML被设计用来传输和存储数据。

XML和HTML类似,不同的是HTML中都是预定义标签,而XML中没有预定义标签,全都是自定义标签,用来表示一些数据,现在已经被JSON取代了。

HTTP协议

HTTP(hypertext transport protocol:超文本传输)协议:协议详细规定了浏览器和万维网服务器之间互相通信的规则。

一、请求报文:

请求行:

请求头:

空行:

请求体:

二、响应报文:

请求行:

请求头:

空行:

请求体:

Node.js

官网地址:https://nodejs.org

下载安装后,查看安装的Node.js的版本:

打开控制台窗口,输入命令:nodejs -v

Express

官网地址:https://www.expressjs.com.cn

安装

打开Visual Studio Code开发工具。

左侧空白处点击鼠标右键,选择"Open in integrated Terminal"。

输入命令:npm init --yes

按回车键。

输入命令:npm i express

按回车键。

服务代码

js 复制代码
//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 端口监听中....");
});

启动Express

启动Express:使用node命令:

关闭服务:Ctrl+C

案例

案例准备

页面
html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX GET 请求</title>
    <style>
        #result{
            width:200px;
            height:100px;
            border:solid 1px #90b;
        }
    </style>
</head>
<body>
    <button>点击发送请求</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?a=100&b=200&c=300');
            //3. 发送
            xhr.send();
            //4. 事件绑定 处理服务端返回的结果
            // on  when 当....时候
            // readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4
            // change  改变
            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;
                    }else{

                    }
                }
            }


        }
    </script>
</body>
</html>
Express
js 复制代码
//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 端口监听中....");
});
测试

在浏览器地址栏中输入:
http://127.0.0.1:8000/server


http://localhost:8000/server

Ajax基本使用

server

js 复制代码
//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 name="viewport" content="width=device-width, initial-scale=1.0">
        <title>AJAX GET 请求</title>
        <style>
            #result{
                width:200px;
                height:100px;
                border:solid 1px #90b;
            }
        </style>
    </head>

    <body>

        <button>点击发送请求</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?a=100&b=200&c=300');
                //3. 发送
                xhr.send();
                //4. 事件绑定,作用是处理服务端返回的结果。
                // on  when 当....时候
                // readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4
                // change  改变
                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;
                        }else{}
                    }
                }


            }

        </script>

    </body>

</html>

测试

相关推荐
IT_陈寒9 小时前
SpringBoot高并发优化:这5个被忽视的配置让你的QPS提升300%
前端·人工智能·后端
光影少年9 小时前
css优化都有哪些优化方案
前端·css·rust
BillKu9 小时前
npm 安装命令中关于 @ 的讲解,如:npm install @vue-office/docx vue-demi
前端·vue.js·npm
yangzhi_emo9 小时前
ES6笔记4
前端·笔记·es6
萌萌哒草头将军9 小时前
Node.js v24.8.0 新功能预览!🚀🚀🚀
前端·javascript·node.js
超人不会飛9 小时前
大模型应用 Vue H5 模板:快速落地流式交互与富文本渲染的开箱方案
前端·vue.js·github
用户458203153179 小时前
CSS无需JavaScript的交互效果实现
前端·css
影i10 小时前
在 Vue + Codemirror 中优雅回显 JSON
前端
奇怪的前端710 小时前
Alien-Signals 响应式系统
前端·vue.js
你单排吧10 小时前
Electron打包图标修改失败问题
前端