AJAX介绍与使用

最新推荐文章于 2023-04-25 17:06:21 发布

yxf_5

最新推荐文章于 2023-04-25 17:06:21 发布

阅读量776

点赞数

分类专栏：笔记文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/weixin_52230444/article/details/121258092

版权

笔记专栏收录该内容

15 篇文章 1 订阅

订阅专栏

2.2、Express框架的介绍与基本使用

一、AJAX简单介绍

1.1、传统网站中存在的的问题

（1）、网速慢的情况下，页面加载的时间长，用户只能等待。

（2）、表单提交后，如果一项内容不合格，需要从新填写所有表单内容。

（3）、页面跳转，重新加载页面，造成资源浪费，增加用户等待时间。

AJAX：是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用体验。

1.2、应用场景

（1）、页面上拉，加载更多数据。

（2）、列表数据无刷新分页。

（3）、表单项离开焦点数据验证。

（4）、搜索框展示文字下拉列表。

优势：无刷新获取数据，根据用户事件来更新部分页面内容。

缺点：没有浏览历史，不能回退，存在跨域问题。SEO不友好。

1.3、AJAX运行环境

Ajax技术需要运行在网站环境，使用Node创建服务器。

XML：可扩展标记语言，被用来传输和存储数据。（没有提前定义好的预定义标签）

HTTP：超文本传输协议，规定了浏览器与万维网之间的通信规则。

1.4、AJAX的实现

1、创建ajax对象：

var xhr=new XHTMLHttpRequest();

2、告诉Ajax请求地址及请求方式:

xhr.open('get','http://www.example.com');

3、发送请求:

xhr.send();

4、获取服务器端与客户端响应数据

xhr.οnlοad=function(){

console.log(xhr.responseText);

}

1.5、服务器端响应得数据格式

真实项目中，服务器端大多数情况下会以JSON对象作为响应数据的格式，当客户端响应数据时，要将JSON数据和HTML字符串进行拼接，然后将拼接的结果展示在页面上。

在http请求与响应的过程中，无论请求参数还是响应结果，如果是对象类型，最终都会被转为字符串进行传输。

JSON.parse() //将json字符串转换成json对象。

字符串拼接发送到客户端页面。

二、Node.js安装与介绍

2.1、Node.js介绍

node.js是一个基于Chrome V8引擎的JS运行时。

1、首先登陆node.js的官网，点击下载，根据自己的操作系统选择安装包，跟普通安装程序的安装步骤一样，选择安装路径，等待安装完成。

2、安装完成后，我们需要检测自己的node.js是否安装成功：

（1）win+r键，弹出运行框

（2）输入cmd回车

（3）在窗口中输入node -v回车

（4）如果出现v数字版本号就证明node.js已经安装成功了

2.2、Express框架的介绍与基本使用

1、安装此包

（1）在vscode的最外层启动终端，输入npm init --yes回车

（2）接着安装框架：输入npm i express回车进行安装

(3)等待安装成功

2、基本使用

创建一个js文件

//1、引入express
const express=require('express');
//2、创建应用对象
const app = express();
//3、创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/',(requset,response)=>{
//设置响应
response.send('HELLO EXPRESS');

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

右键打开终端输入node (文件名).js回车会出现（服务已经启动，8000端口监听中......）,此时服务器已经打开。

在网页中打开http://127.0.0.1:8000回车，会出现服务器端所做出的响应（HELLO EXPRESS），可以右击检查Network中的响应请求。

三、简单案例操作

3.1、发送GET请求

以下代码是我们需要在html中所做的操作（用到一部分ES6的知识）：

<!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>AJAX POST 请求</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: solid 1px #903;
        }
    </style>
</head>

<body>
    <div id="result"></div>
    <script>
        //获取元素对象
        const result = document.getElementById("result");
        //绑定事件
        result.addEventListener("mouseover", function () {
            //1.创建对象
            const xhr = new XMLHttpRequest();
            //2.初始化 设置类型与url
            xhr.open('GET', 'http://127.0.0.1:8000/sever');
            //3.发送
            xhr.send();
            //4.事件绑定 处理服务端返回的结果
            xhr.onreadystatechange = function () {
                //判断
                if (xhr.readyState == 4) {
                    //处理服务端返回的结果
                    //判断响应的状态码 200 404 403 401 500
                    if (xhr.status >= 200 && xhr.status < 300) {
                         //处理结果 行 头 空行 体
                           //处理行
                        console.log(xhr.status);//状态码
                         console.log(xhr.statusText);//状态字符串
                         console.log(xhr.getAllResponseHeaders());//所有响应头
                         console.log(xhr.response);//响应体
    
                    }
                    else {

                    }
                }
            }
        })
    </script>
</body>

</html>

服务端代码

//1、引入express
const express= require('express');
//2、创建应用对象
const app = express();
//3、创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/sever', (request, response) => {
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应
    response.send('HELLO AJAX');
    //返回对象类型的值

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

3.2、发送POST请求

以下代码是我们需要在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>AJAX POST 请求</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: solid 1px #903;
        }
    </style>
</head>

<body>
    <div id="result"></div>
    <script>
        //获取元素对象
        const result = document.getElementById("result");
        //绑定事件
        result.addEventListener("mouseover", function () {
            //1.创建对象
            const xhr = new XMLHttpRequest();
            //2.初始化 设置类型与url
            xhr.open('POST', 'http://127.0.0.1:8000/sever');
            //设置请求头一般会把身份校验的信息放在这儿
            // xhr.setRequestHeader('Content-Type', 'application/x-www-from-urlencoded');
            //3.发送
            xhr.send('a=100&b=200&c=300');
            //4.事件绑定
            xhr.onreadystatechange = function () {
                //判断
                if (xhr.readyState == 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        //处理服务端返回的结果
                        result.innerHTML = xhr.response;
                    }
                    else {

                    }
                }
            }
        })
    </script>
</body>

</html>

服务端代码:

//1、引入express
const express= require('express');
//2、创建应用对象
const app = express();
//3、创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.post('/sever', (request, response) => {
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应
    response.send('HELLO AJAX');
    //返回对象类型的值

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

注意：每当修改完服务端代码时，都应当重新运行服务器终端。右键打开侧边栏点击在集成终端打开输入node (文件名).js回车会出现（服务已经启动，8000端口监听中......）,此时服务器已经打开。当端口改变时，应释放上一个端口重新运行此端口。

。

yxf_5

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX介绍与使用

一、AJAX简单介绍1.1、传统网站中存在的的问题（1）、网速慢的情况下，页面加载的时间长，用户只能等待。（2）、表单提交后，如果一项内容不合格，需要从新填写所有表单内容。（3）、页面跳转，重新加载页面，造成资源浪费，增加用户等待时间。AJAX：是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用体验。1.2、应用场景（1）、页面上拉，加载更多数据。（2）、列表数据无刷新分页。（3）、表单项离开焦点数据验证。（4）、搜索框展示文字下拉列表。优势
复制链接

扫一扫