Ajax_00000

wisdom4

已于 2024-09-25 14:53:58 修改

阅读量788

点赞数 6

文章标签： ajax 前端

于 2024-08-31 18:46:08 首次发布

本文链接：https://blog.csdn.net/wisdom1a/article/details/141754836

版权

Ajax介绍
Ajax基本使用

Ajax介绍

AJAX(Asynchronous JavaScript And XML)。

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
按回车键。

服务代码

//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

案例

案例准备

页面

<!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>
	       
	        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.事件绑定。处理服务端返回的结果。
	            //readystate是xhr对象中的属性, 表示状态 0 1 2 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;
	                        
	                    }else{
	                    }                
	                }             
	            }
	        }
	    	
	    </script>
		
	</body>

</html>

Express

const express = require('express');
const app = express();

app.get('/server', (request, response)=>{
    //设置响应头。设置允许跨域。
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体。
    response.send('hello express.');
});

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

测试

在浏览器地址栏中输入：
http://127.0.0.1:8000/server 或 http://localhost:8000/server
在这里插入图片描述

Ajax基本使用

server

const express = require('express');
const app = express();

app.get('/server', (request, response)=>{
    //设置响应头。设置允许跨域。
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体。
    response.send('hello express.');
});

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

页面

<!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>

            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.事件绑定，作用是处理服务端返回的结果。
                // readystate 是 xhr 对象中的属性, 表示状态 0 1 2 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;
                            
                        }else{
                        }
                    }
                }
            }
        </script>

    </body>

</html>