初识AJAX（Node.js安装，搭建express框架及基础应用，GET请求、POST请求、JSON响应简单练习）nodemon

最新推荐文章于 2024-04-23 11:45:56 发布
最新推荐文章于 2024-04-23 11:45:56 发布
阅读量925 收藏 5
点赞数 1
文章标签： ajax javascript node.js json 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48954625/article/details/122219425
版权

一、AJAX的特点

1.优点

① 可以无需刷新页面而与服务器进行通信

② 允许根据用户事件来更新部分页面内容

用户事件比如：鼠标点击、经过......（例如京东：往下滑动，一些页面被加载出来）

2.缺点

① 没有浏览历史 不能回退

② 存在跨域问题

③ SEO不友好

对搜索引擎不友好，打开页面，后面的内容（比如京东的商品名称）在网页源代码中搜索不到。

二、XML

XML可扩展标记语言

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

XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，用来表示一些数据。

XML表示
<student>
    <name>小王</name>
    <age>18</age>
    <gender>男</gender>
</student>

现在被JSON取代了

用JSON表示
{"name":"小王","age",18,"gender":"男"}

三、搭建框架

想要前端向服务器发送请求，要利用node.js 和 express框架把我们的电脑变成服务器。

1.下载node.js

下载 Node.js 中文网地址

http://nodejs.cn/download/

按照顺序安装完毕。

打开控制台（win + R cmd）

依次输入

node -v
npm -v

可以查看到版本即为安装成功，如图：

2.搭建express框架

第一次安装走的是外网，需要更改成国内的镜像地址：

在控制台 输入

https://registry.npm.taobao.org

出现：

npm config get registry

vscode 右键对应文件：在集成终端中打开（英文为模式：Open in Intergrated Terminal）

选择终端（terminal）

输入：

npm init -y
npm install express --save

 

有可能出现报错：

重新打开vs code即可。

四、学习AJAX

1.express基本使用

//1.引入expression
var express = require("express");
//2.创建应用对象
var app = express();
//3.创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get("/",function(request,response) {
    // 设置相应内容
    // hello express是服务器响应给我的字符串
    response.send("hello express");
})

//监听端口启动服务
//如果端口号被占用，则无法启动
app.listen(3000,function() {
    console.log("服务已经启动了");
})

打开此文件的终端，输入 node .\文件名字（写一半名字可以用tab键补全）

打开浏览器输入本地回送地址：127.0.0.1:3000(3000是端口号，跟自己写的相对应)

注意：. 和 : 都要用英文书写符号

hello express 是服务器响应给我的字符串

2.get请求方式:

点击按钮获取响应内容。

后台写法

//1.引入expression
var express = require("express");
//2.创建应用对象
var app = express();
//3.创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
//get请求
app.get("/server",function(request,response) {
    //设置响应头
    response.setHeader("Access-Control-Allow-Origin","*");
    // 设置响应内容
    response.send("hello ajax");
})
//监听端口启动服务
app.listen(5000,function() {
    console.log("服务已经启动了");
})

 前台写法：

<!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>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div></div>
    <script>
        var btn = document.getElementsByTagName("button")[0];
        var div = document.getElementsByTagName("div")[0];

        btn.onclick = function() {
            //1.创建对象
            var xhr = new XMLHttpRequest();
            //2.初始化 设置请求方式 和 url (传输数据 ？以后)
            xhr.open("get","http://127.0.0.1:5000/server?a=100&b=200&c=300");
            //3.发送
            xhr.send();
            //4.事件绑定 处理服务端访问的结果
            /* on 当....时候
            readystate 是 xhr 对象中的一个属性 表示状态 0，1，2，3，4
            0：初始化
            1：open方法已经被调用完毕
            2：表示send方法已经被调用完毕
            3：服务端返回了部分的结果
            4：服务端返回了所有的结果
            change改变 */
            xhr.onreadystatechange = function() {
                //判断服务器返回了所有的结果
                if(xhr.readyState === 4) {
                    //判断状态码 200 404 401 403 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);

                        div.innerHTML = xhr.response;
                    }
                }
            }
        }
    </script>
</body>
</html>

 输出：

 分别对应：status , statusText , getAllResponseHeaders() , response

状态码200表示成功，响应头，相应内容

可以查看到请求的地址，请求方法等。

响应体里的内容，这是我们真正想要的后台给我们的内容（hello ajax）

//2.初始化 设置请求方式 和 url (传输数据 ？以后)
xhr.open("get","http://127.0.0.1:5000/server?a=100&b=200&c=300");

发送请求的参数：

 也可以不加任何参数，只写地址。

通过下句代码把响应体里的内容传输到 div 里：

div.innerHTML = xhr.response;

3. POST请求方式：

鼠标经过获得响应体里的内容

后台写法：

//1.引入expression
var express = require("express");
//2.创建应用对象
var app = express();
//3.创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
//post请求
app.all("/server",function(request,response) {
    //设置响应头 设置允许跨域
    response.setHeader("Access-Control-Allow-Origin","*");
    //允许设置自定义请求头信息
    response.setHeader("Access-Control-Allow-Headers","*");
    //设置响应体
    response.send("HELLO ajax post");
})
//监听端口启动服务
app.listen(5000,function() {
    console.log("服务已经启动了");
})

前台写法：

<!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>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        var div = document.getElementsByTagName("div")[0];

        div.addEventListener("mouseenter",function() {
            //1.创建对象
            var xhr = new XMLHttpRequest();
            //2.初始化 设置类型 和 url
            xhr.open("post","http://127.0.0.1:5000/server");
            //post 需要设置请求头
            //Content-Type:设置请求体内容的类型，参数2：send方法中参数查询字符串的类型
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            
            //在请求头中添加自定义信息
            xhr.setRequestHeader("name","test");
            //3.发送
            xhr.send("username=xxx&pwd=123");
            //xhr.send("username:xxx&pwd:123");
            //xhr.send("ashjdgb");
            //4.事件绑定
            xhr.onreadystatechange = function() {
                if(xhr.readyState === 4) {
                    if(xhr.status >= 200 && xhr.status < 300) {
                        //处理服务端返回的结果
                        div.innerHTML = xhr.response;
                    }
                }
            }
        })
    </script>
</body>
</html>

POST请求需要设置请求头，传输参数，不是像GET请求那样写在地址后面，而是：

xhr.send("username=xxx&pwd=123");
//xhr.send("username:xxx&pwd:123");
//xhr.send("ashjdgb");

 传输参数的形式多样

如果与GET对比来看，后台代码：

app.post("/server",function(request,response) {
    //设置响应头 设置允许跨域
    response.setHeader("Access-Control-Allow-Origin","*");
    //设置响应体
    response.send("HELLO ajax post");
})

//多了一部分，而且 post 要改写为 all
//允许设置自定义请求头信息
    response.setHeader("Access-Control-Allow-Headers","*");

 POST可以设置自定义的请求头信息：

//在请求头中添加自定义信息
xhr.setRequestHeader("name","test");

 查看结果：（蓝色那行）

4.JSON响应

① 后台响应的数据是JSON数据

② 鼠标经过获取响应体内容

后台代码：

//1.引入expression
var express = require("express");
//2.创建应用对象
var app = express();
//3.创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
//JSON 响应
app.all("/json-server",function(request,response) {
    //设置响应头 设置允许跨域
    response.setHeader("Access-Control-Allow-Origin","*");
    //允许设置自定义请求头信息
    response.setHeader("Access-Control-Allow-Headers","*");
    //设置响应体(模拟一个数据)
    var data = {
        "name":"xxx"
    }
    //send里面不能直接填对象，将对象转换为字符串
    var str = JSON.stringify(data);
    response.send(str);
})
//监听端口启动服务
app.listen(5000,function() {
    console.log("服务已经启动了");
})

 前台代码：

<!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>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        var div = document.getElementsByTagName("div")[0];

        div.addEventListener("mouseenter",function() {
            //1.创建对象
            var xhr = new XMLHttpRequest();
            //设置响应体数据的类型
            xhr.responseType = "json";
            //2.初始化 设置类型 和 url
            xhr.open("post","http://127.0.0.1:5000/json-server");
            xhr.send();
            xhr.onreadystatechange = function() {
                if(xhr.readyState === 4) {
                    if(xhr.status >= 200 && xhr.status < 300) {
                        //处理服务端返回的结果
                        console.log(xhr.response);
                        div.innerHTML = xhr.response.name;
            }
        }
    }
})
    </script>
</body>
</html>

 字符串转为json对象

//字符串转为json
//手动转换
// 手动把字符串转为对象
var data = JSON.parse(xhr.response);
// 输出 data 验证一下
console.log(data);
div.innerHTML = data.name;


//或者像代码中 自动转换
//设置响应体数据的类型
xhr.responseType = "json";

div.innerHTML = xhr.response.name;

 

 5.nodemon

如果不想每次更新后台代码都关闭终端重新打开

可以在终端中输入：

npm i nodemon -g

 如果报错：

在开始中找到 Windows PowerShell 里面的 Windows PowerShell 右键 以管理员打开

set-ExecutionPolicy RemoteSigned

 输入 A 回车即可

 

 

 

山_的那边
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
03 初识 Node.js -Express
03-09
03 初识 Node.js _Express
AJAX使用教程以及axios的安装使用
ruotong0418的博客
12-30 1036
什么是AJAX？ AJAX即 async javascript and XML（异步的js和xml），主要是用来实现页面的局部刷新的一门技术。 AJAX的核心对象是XMLHttpRequest AJAX的工作原理 在发送请求后可继续注册，解决了传统注册存在的问题。 使用AJAX发送异步请求的方法步骤 实例化核心对象 var 变量名 = new XMLHttpRequest() var xhr = new XMLHttpRequest() 建立链接 变量名.open(‘请求方式’,‘请求的路径’
使用Ajax需要安装什么,AJAX安装
weixin_32506617的博客
08-06 2464
AJAX安装http://ajaxcontroltoolkit.codeplex.com/releases/view/338041>安装Ajax ASPAJAXExtSetup.msi (在http://ajax.asp.net下载)2>安装Ajax模板 ASPAJAXSamples.msi3>下载 最新版本 ajaxcontroltoolkithttp://www.codepl...
第一节：Ajax 入门及环境
孤安先生的博客，作者主站正在重构中，敬请期待！
11-01 730
Asynchronous Javascript And XML 用于获取服务器的数据。
三、安装AJAX_express框架
qq_43733614的博客
07-08 238
测试node.js是否安装成功，可通过win+R 输入cmd 打开控制台面板，输入 node -v 若是有相应版本数字输出，则安装成功。下载需要windows版本的.msi安装文件，打开后，点击下一步即可进行安装；在文件管理器中，创建相应的工程文件夹目录，使用VScode打开对应的文件夹。右击资源管理器窗口空白处，选择在集成终端中打开，调出终端页面，输入代码。右击资源管理器窗口空白处，选择在集成终端中打开，调出终端页面。输入下述代码，进行安装express，等待安装完成。个人学习记录，欢迎指点讨论。
使用Node.js+express+Ajax实现前后段分离开发
Geng_____的博客
06-12 226
使用node.js+express+ajax实现前后端分离
Ajax 笔记 配合- express框架 & NodeJS & axios个人笔记
weixin_46858768的博客
02-25 519
Ajax笔记 Ajax的特点：局部 异步 刷新
node笔记之nodejs+express+ajax实现前后端分离开发
GothaM24的博客
01-20 1128
前言 本人前端开发一枚，目前在职公司项目后台语言使用的php，长期接触php，耳濡目染掌握了一点，并使用angularjs+php+mysql写了一个博客类项目，各位看官感兴趣阔以了解一下哇哦此处地址：Gotham 身为一个前端，会点后台语言当然是个好事，但是会儿不精又不可能去做后台，处理些简单的还可（ps:起码做项目再也不用mock了/:笑哭）,所以最近一段时间研究了一下属于我们大前端的node...
02-初识 Node.js 模块化
03-09
02_初识 Node.js 模块化
01-初识 Node.js 与内置模块
03-09
01_初识 Node.js 与内置模块
04初识 Node.js-数据库与身份认证
03-09
04初识 Node.js_数据库与身份认证
01_初识 Node.js 与内置模块.pdf
04-26
node笔记不全可以留着一起查看
前端Ajax通信基础内容，利用Ajax进行前后端通信
qq_38966550的博客
11-28 279
Ajax的通信在前端是一个很重要的内容，是最基础的前后端通信方式
前端day10--＞Ajax
czlj1998的博客
04-24 79
-->前端发送的请求。
Node.js-特性和ajax请求
qq_40007317的博客
04-26 357
1、Node.js特点 node 是一个运行在v8引擎之上的 JavaScript 运行环境，它的主要特点包括： ​模块化开发思想； ​事件驱动； 非阻塞I/O; 单进程，单线程； 轻量、可伸缩，适于实时数据交互应用。 2、解析url（重点！！！） 将"http://localhost:81/user?count=2&name=karen&age=18"网址中的...
ajax的基础操作
qq_46516788的博客
11-05 347
ajax的基本操作
ASP.NET Ajax 学习笔记(1) -- ASP.NET Ajax的安装
weixin_30781775的博客
11-25 113
最近工作中要用到ASP.NET Ajax，所以一直在看Ajax的东西。我把学习中的笔记整理了一下放到这里，作为自己的第一篇博客，希望对大家有所帮助。如果有说的不对的地方，欢迎指正。 ASP.NET Ajax的安装 VS2008已经内置了Ajax功能，但是如果是VS2005的话，就要从首先从http://www.asp.net/ajax/downl...
Ajax的使用笔记（一）----express安装，xhr原生Ajax
qq_61662856的博客
08-09 350
1.首先安装node2.新建一个文件夹，在cmd中打开（注意路径最好要全英文），输入npm init格式化文件夹，一直回车3.下一步输入npm install express，然后就安装成功了。
Ajax的请求响应
最新发布
Niucode的博客
04-23 458
Ajax的全称是Asynchronous JavaScript and XML，即异步的JavaScript和XML（传输储存数据）。它是一种在不重新加载整个页面的情况下更新部分页面的技术。
node.js稳定版本
08-29
node.js稳定版本是指当前被广泛使用并且被认为是相对稳定和可靠的版本。根据引用所述，当前发布的版本被称为LTS（Long-term Support，长期支持）版本，其中LTS版本被认为是相对稳定的版本，适用于企业级项目和对稳定...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值