ajax-1--XML、AJAX简介、express框架使用、AJAX操作的基本步骤

这篇具有很好参考价值的文章主要介绍了ajax-1--XML、AJAX简介、express框架使用、AJAX操作的基本步骤。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、XML(可扩展标记语言)
XML与HTML类似,不同的是HTML中都是预定义标签,而XML中没有预定义标签,全都是自定义标签,用来表示一些数据。
比如有一个学生数据:name=“孙悟空”;age=18;gender=“男”;
用XML表示:
< student >
< name >孙悟空< /name >
< age > 18 < /age >
< gender > 男 < /gender >
< /student >

XML被设计用来传输和存储数据,比如服务器端将数据使用XML的形式传给客户端(前端),而HTML的作用是在网页端呈现数据

二、AJAX
AJAX全称为Asynchronous JavaScript And XML,就是异步的JS和XML。通过AJAX可以在浏览器中向服务其发送异步请求,最大的优势是无刷新获取数据。AJAX不是新的编程语言,而是一种将现有的标准组合在一起使用的新方式。
最开始AJAX进行数据交换的格式是XML,服务器端给客户端返回的结果就是XML格式的字符串,前端的JS在接到这个结果后对其内容进行解析,把数据提取出来并对数据进行处理。现在AJAX不用XML,而是JSON,JSON更加简洁,在数据转换方面更加容易。
JSON表示上述数据:
{“name”:“孙悟空”,“age”:18,“gender”:“男”}

三、express框架(需要先安装node.js,express是基于node.js的)
使用express框架作为一个服务器端。
鼠标放在VSCode 软件的左侧栏->右键->Open in Integrated Terminal
ajax-1--XML、AJAX简介、express框架使用、AJAX操作的基本步骤
在终端输入"npm init --yes":
ajax-1--XML、AJAX简介、express框架使用、AJAX操作的基本步骤
安装express框架,在终端输入“npm i express":
ajax-1--XML、AJAX简介、express框架使用、AJAX操作的基本步骤
新建一个"express基本使用.js"文件,内容如下:
ajax-1--XML、AJAX简介、express框架使用、AJAX操作的基本步骤

//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端口监听中...");
})

终端输入"node express基本使用.js":
ajax-1--XML、AJAX简介、express框架使用、AJAX操作的基本步骤
打开浏览器,输入网址访问express服务器端,结果如下:
ajax-1--XML、AJAX简介、express框架使用、AJAX操作的基本步骤

四、AJAX请求的准备
1.前端页面的准备,新建GET.html文件:
ajax-1--XML、AJAX简介、express框架使用、AJAX操作的基本步骤

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>AJAX GET 请求</title>
        <style>
            #result{
                width:200px;
                height:100px;
                border:solid 1px #90b;
            }
        </style>
    </head>
    <body>
        <button>点击发送请求</button>
        <div id="result"></div>
    </body>
</html>

效果如下:
ajax-1--XML、AJAX简介、express框架使用、AJAX操作的基本步骤
2.服务端准备,修改之前建立的"express基本使用.js"文件:
ajax-1--XML、AJAX简介、express框架使用、AJAX操作的基本步骤ajax-1--XML、AJAX简介、express框架使用、AJAX操作的基本步骤
ajax-1--XML、AJAX简介、express框架使用、AJAX操作的基本步骤
五、AJAX操作基本步骤
补充:http响应报文格式
ajax-1--XML、AJAX简介、express框架使用、AJAX操作的基本步骤
修改GET.html文件:
ajax-1--XML、AJAX简介、express框架使用、AJAX操作的基本步骤

在浏览器中打开页面,开发者工具显示控制台输出结果如下(注意不要关闭express服务端):
ajax-1--XML、AJAX简介、express框架使用、AJAX操作的基本步骤
再修改GET.html文件,将对服务端返回数据的处理结果显示在网页中:
ajax-1--XML、AJAX简介、express框架使用、AJAX操作的基本步骤
效果如下:
ajax-1--XML、AJAX简介、express框架使用、AJAX操作的基本步骤
点击页面中的按钮:
ajax-1--XML、AJAX简介、express框架使用、AJAX操作的基本步骤
可以看出,并没有刷新页面,页面内容发生了变化。
六、ajax传递参数
ajax-1--XML、AJAX简介、express框架使用、AJAX操作的基本步骤
在浏览器中打开页面,点击按钮效果如下:
ajax-1--XML、AJAX简介、express框架使用、AJAX操作的基本步骤
七、传post请求
修改express基本使用.js文件,添加如下内容并重新启动:
ajax-1--XML、AJAX简介、express框架使用、AJAX操作的基本步骤
修改GET.html文件,实现将鼠标放在页面的div容器中,显示“HELLO AJAX POST"内容:
ajax-1--XML、AJAX简介、express框架使用、AJAX操作的基本步骤
效果如下,在浏览器中打开页面:
ajax-1--XML、AJAX简介、express框架使用、AJAX操作的基本步骤
将鼠标放到div容器中:
ajax-1--XML、AJAX简介、express框架使用、AJAX操作的基本步骤
八、post请求设置参数
post请求设置参数在send方法中:
ajax-1--XML、AJAX简介、express框架使用、AJAX操作的基本步骤
九、AJAX设置请求头信息
补充:http请求报文格式
ajax-1--XML、AJAX简介、express框架使用、AJAX操作的基本步骤
ajax-1--XML、AJAX简介、express框架使用、AJAX操作的基本步骤
效果如下:
ajax-1--XML、AJAX简介、express框架使用、AJAX操作的基本步骤
使用自定义请求头,需要先在express基本使用.js文件中添加下图中圈出的内容并把"app.post"改为"app.all’(也可由后端人员完成该工作):
ajax-1--XML、AJAX简介、express框架使用、AJAX操作的基本步骤
ajax-1--XML、AJAX简介、express框架使用、AJAX操作的基本步骤
十、ajax请求服务端响应JSON数据
修改express基本使用.js文件内容令服务端返回JSON数据:
ajax-1--XML、AJAX简介、express框架使用、AJAX操作的基本步骤
前端页面手动转换并处理:
ajax-1--XML、AJAX简介、express框架使用、AJAX操作的基本步骤文章来源地址https://www.toymoban.com/news/detail-476581.html

到了这里,关于ajax-1--XML、AJAX简介、express框架使用、AJAX操作的基本步骤的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • AJAX--Express速成

    1、AJAX(Asynchronous JavaScript And XML),即为异步的JavaScript 和 XML。 2、异步的JavaScript 它可以异步地向服务器发送请求,在等待响应的过程中,不会阻塞当前页面。浏览器可以做自己的事情。直到成功获取响应后,浏览器才开始处理响应数据。 3、XML 是前后端数据通信时传输数据的

    2024年02月07日
    浏览(29)
  • 第7讲:使用ajax技术实现弹出商品详情提示功能(xml数据)

    使用ajax技术使用ajax技术实现弹出商品详情提示功能,本案例使用原生态xmlhttprequest对象,GET方法异步通讯,后台使用map保存搜索数据,查询到对应数据后,返回xml格式数据,前端使用responseXML属性返回xml格式数据,解析xml文件内容,结合JavaScript定位并显示商品详情。 特别说

    2024年02月11日
    浏览(47)
  • ajax-XMLHttpRequest的基本使用

    能够知道如何使用 XMLHttpRequest 发起 Ajax 请求 能够知道如何封装自己的Ajax函数 能够使用 XMLHttpRequest Level2 中提供的新特性 能够知道 jQuery 中如何实现文件上传与loading效果 能够知道如何使用 axios 发起Ajax请求 XMLHttpRequest (简称 xhr )是浏览器提供的 Javascript 对象,通过它,可以

    2024年02月02日
    浏览(37)
  • 【Ajax】Ajax 简介

    Ajax(Asynchronous JavaScript and XML)是一种用于创建交互式网页应用程序的技术。它通过使用 JavaScript、XML(现在更常用的是 JSON)和异步通信来实现在不重新加载整个页面的情况下与服务器进行数据交换。 异步通信:Ajax 使用异步方式与服务器进行通信,不需要刷新整个页面,减

    2024年02月15日
    浏览(37)
  • 【Ajax入门技术】原生AJAXexpress的基本使用,进行不刷新页面获取到数据

    CSDN话题挑战赛第2期 参赛话题:面试宝典   Aic山鱼与你一起学前端😊 🖱 ⌨个人主页:山鱼的个人主页 欢迎大家加入我的个人社区——山鱼社区 如果对你有帮助的话希望三连下👍⭐✍支持一下博主🌊 通过AJAX可以在浏览器中向服务器发送异步请求,最大的优势:无刷新获取

    2023年04月12日
    浏览(38)
  • AJAX (Asynchronous JavaScript And XML)异步的JavaScript 和 XML

    Asynchronous JavaScript And XML     异步的JavaScript 和 XML 异步和同步:客户端和服务器端相互通信的基础上 同步:客户端必须等待服务端的响应。在等待的期间客户端不能做其他操作。 异步:客户端不需要等待服务器端的响应。在服务器处理请求的过程中,客户端可以进行其他操

    2024年02月09日
    浏览(38)
  • Ajax简介

    一、Ajax简介 Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指⼀种创建交互式⽹⻚应⽤的⽹⻚开发技术。 Ajax 是⼀种⽤于创建快速动态⽹⻚的技术。 Ajax 是⼀种在⽆需重新加载整个⽹⻚的情况下,能够更新部分⽹⻚的技术。 通过在后台与服务器进⾏少量数据交

    2024年02月10日
    浏览(34)
  • Ajax简介和实例

    目录 什么是 AJAX ?  AJAX实例  ajax-get无参  ajax-get有参 对象和查询字符串的互转 ajax-post  ajax-post 表单 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。 菜鸟教程是这样介绍的: AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。

    2024年02月13日
    浏览(46)
  • Ajax 简介

    AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。 您应当具备的基础知识 在继续学习之前,您需要对下面的知识有基本的了解: HTML / XHTML CSS JavaScript / DOM 如果您希望首先学习这些项目,请在我们的首页访问这些教程。 AJAX = 异步 JavaScript 和 XML。 AJ

    2024年02月01日
    浏览(44)
  • .NET/C#汇总 —— ADO.NET、XML、HTTP、AJAX、WebService

    .NET⼀般指 .NET FrameWork框架,它是⼀种平台,⼀种技术。 C#是⼀种编程语⾔,可以基于.NET平台的应⽤。 CTS:通⽤语⾔系统。CLS:通⽤语⾔规范。CLR:公共语⾔运⾏库。 unsafe:⾮托管代码。不经过CLR运⾏。 RTTI:类型识别系统。 1).使⽤QueryString, 如....?id=1; response. Redirect().... 2

    2024年04月17日
    浏览(33)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包