Ajax 的初步实现(使用vscode+node.js+express框架)_AJAX相关

来源:脚本之家  责任编辑:小易  

需求: 点击按钮 向服务端发送一个请求 然后将服务端返回的响应体结果在一个div中呈现出来 同时页面不刷新

一、 服务端的前期准备

安装node.js https://nodejs.org/en/download/

检验是否安装成功 : 在命令行输入 node -v 按下enter 键之后出现 版本号就表明安装成功 (图如下)

在这里插入图片描述

使用 vscode安装express (前提是你已经成功安装了node.js)

在 vscode 里面新建一个文件夹 文件下面包含俩个文件 一个是你的前端页面代码:.html另一个是准备的服务端代码 这里暂且为 server.js在目录文件最外层 点击在集成终端中打开

在这里插入图片描述

输入 npm init 进行初始化 输入包名后一直按 Enter 就行

在这里插入图片描述

5. 继续输入 npm i express 安装express 框架

在这里插入图片描述

6.文件目录下你会看到生成了 package-lock.json 文件 以及 node_modules 文件 此时说明你的框架安装好了

express的基本使用 (该js文件名为 express基本使用.js):
1 .

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

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

在集成终端中输入 node -express基本使用.js

在这里插入图片描述

3. 在浏览器中地址栏输入: http://127.0.0.1:8000/ 看到如下图 即服务端配置完成

在这里插入图片描述

二、 客户端的准备(前端代码 都引用了jquery来获取Dom元素

点击按钮 向服务端发送一个请求 然后将服务端返回的响应体结果在一个div中呈现出来 同时页面不刷新

使用原生的 ajax :

	 <!DOCTYPE html>
	<html lang="en">
	
	<head>
	    <meta charset="UTF-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=, initial-scale=1.0">
	    <title>AJAX GET 请求</title>
	    <script src="../js/jquery-3.0.0.min.js"></script>
	    <style>
	        #result {
	            width: 200px;
	            height: 100px;
	            border: solid 1px red;
	        }
	    </style>
	</head>
	
	<body>
	    <button>发送请求</button>
	    <div id="result"></div>
	</body>
	<script>
	    // 1.获取元素 给按钮添点击事件
	    $('button').on('click', function () {
	        // alert(1);
	        // 2.创建对象
	        const xhr = new XMLHttpRequest();
	        // 3.初始化 设置请求方式 和url
	        xhr.open('GET', 'http://127.0.0.1:8000/server');
	        // 4.发送
	        xhr.send();
	        // 5.事件绑定 处理服务器返回的结果
	        xhr.onreadystatechange = function () {
	            // readystate 是 xhr 对象中的属性 有 0 1 2 3 4
	            // 判断(4 表示服务端返回了所有的结果)
	            if (xhr.readyState == 4) {
	                if (xhr.status >= 200 && xhr.status < 300) {
	                    // 处理结果有: 行 头 空行 体
	                    // 1.响应行  
	                    // 2.将响应体 返回到客户端页面中
	                    $('div').html(xhr.response);
	                }
	
	            }
	            else {
	
	            }
	        }
	    })
	</script>
	
	</html>

必须注意

在这里插入图片描述

三、 运行程序

在目录文件夹右键在集成终端中打开 输入: node server.js

在这里插入图片描述在这里插入图片描述

运行 html 代码

在这里插入图片描述

点击发送请求

在这里插入图片描述

注: 至此 Ajax 已基本实现 !!

为了方便执行js脚本代码 避免老是重复开启窗口 我们这里 还需安装 nodemon 安装方式与express 一样 在终端输入:npm install -g nodemon

在这里插入图片描述

如果你不想下载jquery引入 你可以在网页上输入 bootcdn https://www.bootcdn.cn/

在这里插入图片描述在这里插入图片描述在这里插入图片描述

注:为了防止报错前面添加 crossorign="anonymous"

以上就是Ajax 的初步实现(使用vscode+node.js+express框架)的详细内容,更多关于Ajax初步实现的资料请关注真格学网其它相关文章!

您可能感兴趣的文章:Ajax中responseText返回的是一个页面而不是一个值ajax的responseText乱码的问题的解决方法JSON,AJAX,Maven入门基础Ajax登录验证实现代码Ajax实现省市区三级联动Ajax responseText解析json数据案例详解

  • 本文相关:
  • ajax请求跨域问题解决方案分析
  • ajax请求发送成功但不进success的解决方法
  • ajax实现登录功能
  • ajax无刷新url提交页面
  • ajax获得站点文件内容实例
  • jquery ajax参数详解补充附示例
  • iframe式ajax调用示例代码
  • 浅谈ajax技术实现页面无刷新
  • 用juery的ajax方法调用aspx.cs页面中的webmethod方法示例
  • 通过ajax两种方式讲解struts2接收数组表单的方法
  • vs2010中如何使用ajax
  • vs2010建立framework2.0项目怎么用AjaxControlToolkit
  • 如何在C#下 用AJAX实现DIV刷新
  • 如何在C#下 用AJAX实现DIV刷新
  • vs2010 ajax 我想学习vs2010里面AJAX的使用。有什么教程或...
  • jquery中的ajax实现iframe功能
  • asp.net Ajax TabContainer控件如何实现多个TabPanel分别提交...
  • vs2008有没有实现这种效果的控件,ajax扩展控件里有没有??有...
  • 怎样安装Ajax Control toolkit ,在vs2008 中。安装后但是无法使用...
  • VS2008无刷新和Ajax无刷新
  • Jquery.Ajax方法在VS2005与VS2008这两个不同版本的平台上...
  • 利用AjaxControlToolkit实现百度搜索时的下拉列表提示详细步骤
  • VS2010中C#的如何实现点击左边的树状菜单,右边的显示的内...
  • VS2010 使用AJAX 无刷新技术 如何配置web.config文件的ajax...
  • vs2010只如何安装使用ajax control toolkit.net4
  • vs2005 ajax中引用了模板的页面上不允许用ajax控件是怎么回事
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全javascriptasp.netphp编程ajax相关正则表达式asp编程jsp编程编程10000问css/htmlflex脚本加解密web2.0xml/rss网页编辑器相关技巧安全相关网页播放器其它综合dart首页ajax相关ajax中responsetext返回的是一个页面而不是一个值ajax的responsetext乱码的问题的解决方法json,ajax,maven入门基础ajax登录验证实现代码ajax实现省市区三级联动ajax responsetext解析json数据案例详解ajax请求跨域问题解决方案分析ajax请求发送成功但不进success的解决方法ajax实现登录功能ajax无刷新url提交页面ajax获得站点文件内容实例jquery ajax参数详解补充附示例iframe式ajax调用示例代码浅谈ajax技术实现页面无刷新用juery的ajax方法调用aspx.cs页面中的webmethod方法示例通过ajax两种方式讲解struts2接收数组表单的方法jquery ajax 向后台传递数组参数ajax readystate的五种状态详解jquery实现ajax定时刷新局部页面ajax中的async属性值之同步和异步ajax传递多个参数具体实现ajax获取数据然后显示在页面的实ajax获取数据中文乱码问题最简单jquery ajax中使用serialize()方自己动手打造ajax图片上传(网上没ajax 缓存问题的两种解决方法(ie解决ajax传过来的值后台接收不到的问题ajax提交form表单页面仍会刷新问题的快速ajax上传实现根据服务器端返回数据进行jsajax开始准备篇ajax应用之注册用户即时检测asp简单的ajax留言板(采用三层模式)基于ajaxupload的多文件上传操作$.ajax传json数据到后台的注意事项小结ajax 客户端响应速度提高分析ajax中指定innerhtml时如何应用其中的scr
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved