WebStorm前端开发分享：基于html5+css+js开发前端项目，用ajax技术获取后端数据

最新推荐文章于 2024-03-05 23:02:03 发布
VIP文章 最新推荐文章于 2024-03-05 23:02:03 发布
阅读量2.2k 收藏 10
点赞数 4
文章标签： webstorm html5 css javascript ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44830054/article/details/106341713
版权

由于课程设计的安排，我对H5+css样结合js技术对开发前端项目有了更深的了解。随后又学习ajax的使用方法，下面，我将讲一下我所学到的关于ajax的知识。

一，ajax是什么

全称：asynchronous JavaScript and XML ；（基于XML的异步JavaScript） 通俗的说，就是通过ajax技术将后端的数据拿出来然后在前端页面中显示出来。 也相当于异步的JS和XML，要明确ajax不是一种编程语言，它不需要任何浏览器插件，但需要用户允许JS在浏览器上面执行。

二，ajax的工作流程

ajax工作流程

三，ajax工作中比较重要的对象

1，XMLHttpRequest 对象

XMLHttpRequest 对象用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

对于大多数浏览器来说均支持 XMLHttpRequest 对象；但也有少部分不支持，如：IE5 和 IE6 则使用 ActiveXObject对象；
（在这里因为基本上很多浏览器都支持XMLHttpRequest ，所以就不在讲解ActiveXObject的使用啦。）

创建 XMLHttpRequest 对象的语法：

variable=new XMLHttpRequest();

创建ActiveXObject对象的语法：

variable=new ActiveXObject("Microsoft.XMLHTTP");

四，ajax向服务器发送请求及相应<

最低0.47元/天 解锁文章
心为雅好为平
关注
  • 4
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Web前端开发技术课程大作业：基于HTML+CSS+JavaScript实现校园主题-萍乡田家炳中学校网站(1页)
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部区域背景色为100%宽度。都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等元素的插入。 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 【查看更多源码地址】：https://blog.csdn.net/bigwhiteshark?type=blog
web前端期末大作业：基于HTML+CSS+JavaScript实现网上鲜花店网站设计(14页d
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部区域背景色为100%宽度。都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等元素的插入。 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 【查看更多源码地址】：https://blog.csdn.net/bigwhiteshark?type=blog
什么是AJAX？它的运用场景有哪些？
最新发布
m0_61227789的博客
03-05 1540
AJAX 即 Asynchronous Javascript And XML（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。AJAX 是一种用于创建快速动态网页的技术。它可以令开发者只向服务器获取数据（而不是图片，HTML文档等资源），互联网资源的传输变得前所未有的轻量级和纯粹，这激发了广大开发者的创造力，使各式各样功能强大的网络站点，和互联网应用如雨后春笋一般冒出，不断带给人惊喜。Ajax是一种异步请求数据的web开发技术，对于改善用户的体验和页面性能很有帮助。
web前端期末大作业：基于HTML+CSS+JavaScript汽车租赁网站(47页)
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部区域背景色为100%宽度。都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等元素的插入。 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 【查看更多源码地址】：https://blog.csdn.net/bigwhiteshark?type=blog
web前端期末大作业：基于HTML+CSS+JavaScript制作我的音乐网站（带设计.md
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部区域背景色为100%宽度。都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等元素的插入。 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 【查看更多源码地址】：https://blog.csdn.net/bigwhiteshark?type=blog
用WebStorm开发TypeScript
弃天笑的程序世界
01-07 2万+
为什么是TypeScript最近在做H5的游戏，最终选定的TypeScript作为开发语言。主要是看重他有强类型和Class，作为习惯使用AS3,Java等强类型编程的人来说，还是习惯这种编程写法。听一些直接使用javascript开发稍微大的游戏的同事说，没有强类调试什么的都比较困难。我个人平时做小游戏用得比较多是纯js，比较大型的倒没尝试，所以这个不好下断论。另外一个主要原因是因为用TypeSc
webStorm h5简单表单属性笔记（一）
weixin_42418774的博客
05-04 934
h5-表单新增的type属性 h5-表单新增的其他属性 h5-表单元素 一、h5-表单新增的type属性 <body> <form action=""> 用户：<input type="text" id="userName"><br> 密码：<input type="password...
说说几个HTML5开发工具VS2012，WebStorm和Google Web Toolkit
IBigPig
01-29 2632
作为时下最为流行的网页语言，HTML5 拥有很多让人期待已久的新特性，被看做是Web开发者创建流行Web应用的最佳利器，越来越多的开发人员开始使用 HTML5 来制作各种交互性强、效果丰富的 Web 应用。 虽然HTML5标准尚未开发完成，但是显然HTML5已经为市场所接受，并有着良好的发展前景。面对这一形式，开发工具提供商也纷纷向HTML5技术靠拢，推出了支持HTML5的新版本。 今天我将说说
用WebStorm开发，基于HTML5+css+JavaScript开发的前端页面
qq_44830054的博客
05-27 4698
由于课程设计的安排，我是第一次使用WebStorm开发项目，之前基于HTML5+css+JavaScript开发的项目是在Eclipse或者My Eclipse上面开发，虽然也可以达到想要的效果但是过程较为麻烦，修改代码稍显繁琐，也用过VS开发前端页面，直接可以拖动控件来实现页面布局，但是做出来的页面有种“僵硬”的感觉（纯属个人看法）。 现在使用WebStorm开发，感觉很好地结合了两个开发环境的优势，结合Google浏览器的使用能够更好实现对代码的调试，大家开发项目的时候我极力推荐使用Google浏览器进
webstorm怎么运行html5项目,Webstorm打开ionic5创建的项目html模板编译报错的问题
weixin_39532421的博客
06-15 680
1、ionic创建项目ionic start test tabs --type=angular(使用angular框架)ionic start test tabs --type=ionic-angular(使用ionic3文件框架)通过第一种方式创建完的项目使用webstorm打开结构如(图1)：图1package.json的文件结构如(图2)：图2报错信息如(图3)：图3错误信息：Error:(...
初识Ajax
m0_46420078的博客
04-16 989
扩展：程序更新后,怎样自动运行呢？ 1、安装模块：npm install nodemon 2、设置node程序的启动命令： 更改前： 改用nodemon启动程序： 一、初识Ajax 1、传统网站中存在的问题 （1）页面加载时间长：在传统的网站中，用户只能通过浏览器刷新页面从服务器获取数据。如果网速慢，获取数据的时间会很长。当页面加载数据时，用户也不能在该页面进行其他的操作，只能等待网页加载完成。 （2）表单提交的问题：在用户提交表单的时候，如果用户在表单中填写的内容有一项不符合要..
web前端期末大作业：基于HTML+CSS+JavaScript奥迪企业bootstrap响应式网站
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML5期末考核大作业...
前端之js学习
dgvesrhetd的博客
07-26 3690
js学习 一、简介 1、简介 Java Script 简称JS，是一种基于对象Object和事件驱动Event Driver的解释型脚本语言，用于增强HTML页面的动态交互性。 2、特点 嵌套在HTML中； 环境支持，js在运行中需要浏览器环境的支持，如果使用的浏览器不支持js脚本，那么浏览器在运行时将忽略js代码； 解释执行，无需经过专门编译器的编译，在嵌入脚本的HTML文档载入时被浏览器逐行地解释执行； 弱类型语言，js中不需要指定变量的类型； 基于对象，js提供了很多内建对象，也允许定义新的对象，还
WebStorm开发插件
m0_66148802的博客
09-20 2122
WebStorm开发插件
怎样搭建h5开发环境
longer__的博客
03-01 1万+
学习h5前需要先搭建开发环境，下面就简单的描述一下我自己搭建过程。 1.   下载与安装webstorm WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。被广大中国JS开发者誉为"Web前端开发神器"、"最强大的HTML5编辑器"、"最智能的JavaScript IDE"等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部
一名合格的Web前端开发工程师少不了这10款H5开发工具
ms3_ishenglu的博客
11-05 185
mobl 是一个新的开源的编程语言，主要用于加速手机应用的开发，mobl 可方便构建手机 Web 应用程序，包括 iOS、Android 和其他支持 HTML5 技术的手机。实体是在本地存储中持久化的数据元素，而类型是一种供我们使用的不稳定的数据。DevExtreme是专为你的移动世界精心准备的，一个跨平台开发的HTML5/JS框架，可以构建iOS、Android、Tizen和Windows Phone 8应用程序，是Visual Studio开发人员开发跨平台移动产品的优选工具。
(0001) H5开发之WebStorm 开发H5如何用手机打开测试
沐雨07的专栏
06-01 8762
Mac版 WebStorm开发H5 - 局域网内移动端手机设备打开 前提：手机和电脑在同一局域网。 1. WebStorm  偏好设置里如下设置： 2. WebStorm  将html 用 Firefox 打开 3. 将火狐地址栏的  localhost  换成mac的wifi 的ip地址（wifi偏好设置里查看）
WebStorm 初步使用 & HTML5 学习报告
热门推荐
weixin_38057349的博客
04-15 5万+
WebStorm 初步使用WebStorm介绍WebStorm是Jetbrains公司旗下的一款JavaScript开发工具，因其界面简洁，操作方便，被广大国内JS开发者誉为“Web前端开发神器”。WebStorm具有智能代码补全、代码格式化、html提示、联想查询、代码调试等多种优势功能，其对业界最新技术提供支持，支持流行的版本控制系统，为前端开发人员提供了极大的方便。WebStorm安装到官网...
4. web前端开发分享-css,js工具篇
weixin_34221036的博客
03-18 187
web前端开发乃及其它的相关开发，推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于，有个技术叫emmet, http://docs.emmet.io，而这两个对他的支持是： sublime text 是所有编辑器里边支持emmet比较好的的唯一一款。 webstorm是所有编辑器里边唯一内置emmet的一款，并且将emmet的精神往前推动的一款...
webstorm开发uniapp+vite+ts
11-24
以下是在WebStorm中开发uniapp+vite+ts的步骤： 1.创建一个新的uniapp项目，选择vite作为构建工具。 2.在项目根目录下创建一个vite.config.ts文件，用于配置vite。 3.在vite.config.ts文件中添加以下内容： ```typescript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': '/src' } }, server: { proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } } }) ``` 4.在tsconfig.json文件中添加以下内容： ```json { "compilerOptions": { "target": "esnext", "module": "esnext", "moduleResolution": "node", "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "jsx": "preserve", "sourceMap": true, "baseUrl": ".", "paths": { "@/*": ["src/*"] } }, "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], "exclude": ["node_modules"] } ``` 5.在APP.vue中添加以下内容： ```html <template> <router-view></router-view> </template> ``` 6.在main.ts中添加以下内容： ```typescript import { createApp } from 'vue' import './style.css' import App from './App.vue' import store from './store/index' import router from './router/index' const APP = createApp(App) APP.use(store) APP.use(router) APP.mount('#app') ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值