关于原生ajax的那些事
传统网站中存在的问题
- 网速慢的时候页面加载时间长
- 表单提交之后,如果一项内容不符合,需要重新提交所有表单内容
- 在表单内容多的时候就会造成资源浪费,增加用户等待时间
关于ajax
ajax:是浏览器提供的一套方法,可以实现页面不需要刷新的更新数据,提高网页的使用体验和减少服务端的资源浪费
ajax的应用场景:页面上拉加载更多的数据,列表无属性更新,表单项目离开焦点验证数据,还有搜索框下方的搜索自动匹配等
ajax的运行环境
Ajax技术需要运行再网站环境下才能使用所以我们需要提前准备一个服务器(这里采用的是express框架实现)
使用到的模块:
path express
代码如下
// app.js
const express = require('express');
// 用于处理路径
const path= require('path');
// 处理路径
const app = express();
// 托管
app.use(express.static(path.join(__dirname, 'public')));
// 监听端口并返回
app.listen(3000,function(){console.log('服务器启动成功 http://localhost:3000/');
})
目录树如图所示
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>Document</title>
</head>
<body><h1>hello word</h1>
</body>
</html>
大家会发现我为什么要创建index.html呢?
因为:在网站目录下index.html相当于进门后的路,打开网站后如果没有指定页面,浏览器等就会自动去找index.html
创建好了之后运行app.js并且打开http://localhost:3000/
就会发现自动找到了index.html并且使用了
ajax运行原理
由于请求之后,页面分发下来之后,如果html再去获取数据就会造成网站刷新,严重影响了用户使用和服务器资源消耗,所以需要实现的话就要让别人来帮忙获取数据
由ajax帮助页面来实现数据获取,实现不需要实现全局刷新
ajax实现的步骤
创建ajax对象
在JavaScript中有个构造函数(XMLHttpRequest();
)使用其来创建ajax对象
var xhr = new XMLHttpRequest();
xml:数据格式(当前大多数数据格式为json格式)
http:网络请求
Request:请求
确定请求地址以及请求方式
使用open方法实现请求第一个参数为请求方式,第二个参数为请求地址,第三个我们后面说,一般只要有了了这两个参数就能做到请求了
xhr.open('GET', 'http://localhost:8080/', true);
发送请求
现在我们设置完成了请求地址以及请求方式之后虽然我们设置好了参数,现在的状况就是我们给东风快递装上了核弹头,却迟迟不去打那个小日本 小日子过得不错的那家,所以现在就应该要去下达发射指令(发请求)
xhr.send();
获取服务器给予的响应
终于带着希望的东风快递发出去了,但是发出去之后我们要确定快递客户是否已经签收了,是否还满意,所以我们要做一个回访(接收响应)所以我们需要叫卫星去看看()
xhr.onload =function(){}
解析响应
由于之前叫卫星去看了,卫星传回了数据,保存在了管理处接下来就需要去公布出来(使用responseText
)
xhr.onload =function(){console.log(xhr.responseText);
}
经过上次的回访之后我们发现自身的服务还是存在(原子dan的威力太小了)一些问题,隔壁的毛熊家实验都已经开始试运行大伊万快递服务,所以接下来我们就要继续实验创造出更强大的快递服务
ajax
实验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=device-width, initial-scale=1.0" /><title>Document</title></head><body><button onclick="get_xrz()">发送快递</button><script>function get_xrz() {// 创建ajax对象console.log(1);var xhr = new XMLHttpRequest();// 告诉东风快递客户位置(告诉ajax向哪里发送快递以什么方式发送请求)xhr.open("get", "http://localhost:3000/xrz");// 确认客户信息之后发送快递(发送请求)xhr.send();// 由于发送快递之后不知道什么时候才能签收,所以我们要密切关注对方xhr.onload = function () {console.log(xhr.responseText);};}</script></body>
</html>
接口
响应:
服务端响应数据的格式
在一般的项目里面服务器响应的数据大多数会以JSON格式来响应当客户端拿到这些数据后还要经过处理才能使用
所以我们新建一个接口返回数据
我们发送请求查看
通过上图我们貌似发现了一些端倪
我们通过代码来检测一下
输出结果如下
我们不是说是json格式嘛,但是为啥是字符串格式呢?
原因:在http传输中,无论是请求参数还是响应内容如果是对象类型,都会始终呗转换为对象字符进行传输
所以我们就会拿到字符串
把服务器响应的字符串转换为json对象
在window全局作用域下面有个JSON对象其中我们可以使用parse方法吧JSON字符串转换为JSON对象
所以我们可以加上
我们可以看到就实现了
关于原生ajax的那些事相关推荐
- js原生ajax写法
博主在大二做数据库课设时,接触的js. 边学边做,当时还没接触ajax,所以在遇到每次请求地址都会刷新这个问题时, 博主干了你们绝对想不到的事:在页面里用了很多"隐形"的frame ...
- 原生ajax XMLHTTPRequest()
原生ajax XMLHTTPRequest() 视频 https://www.bilibili.com/video/BV1WC4y1b78y?p=10 代码 <!DOCTYPE html> ...
- ajax不执行_好程序员Java学习路线分享原生Ajax的使用
好程序员Java学习路线分享原生Ajax的使用,首先我们先来看一下什么是 AJAX AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX 就是 异步.JavaScript ...
- java原生封装_[Java教程]原生AJAX封装
[Java教程]原生AJAX封装 0 2016-07-12 13:00:08 回归下原生js,网上看到的AJAX封装,遂拿来改改,不知还有何弊端,望指出!1 var ajaxHelper = { 2 ...
- 对原生ajax的理解
$.ajax({url:'',//请求文件路径type:'',//请求方式GET POSTdata:{},//要发给服务器的数据参数dataType:'',//希望接口返回的数据格式json,stri ...
- 原生ajax请求及readyState的几种状态
原生ajax请求写法: var http = new XMLHttpRequest();http.open('get','./package.json');http.onreadystatechang ...
- 原生ajax如何执行,原生ajax调用数据实例讲解
由于jQuery的盛行,现在使用较多的是jQuery封装好了的ajax,因为解决了浏览器兼容性问题,这对程序员来说就等于去掉了一个心头大患,但并非原生ajax就销声匿迹,并且本人感觉还是对原生的aja ...
- .ajax get 写法,原生Ajax写法(GET)
ajax的GET提交方式的原生代码: var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else if(w ...
- Django学习---原生ajax
Ajax 原生ajax Ajax主要就是使用 [XmlHttpRequest]对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE),Ajax首次出现IE5.5中存在(ActiveX控件). ...
- 面试整理(1):原生ajax
接到电话面试,有一些送分题答的不好,在这里整理一下 问题:原生ajax的工作流程是怎么样的? 老用封装好的工具,原生的ajax其实并不熟悉,今天复习一下.主要参考http://www.w3school ...
最新文章
- MIGO相关的3个BADI增强点
- oracle删除表空间中的表,ORACLE删除表空间中的所有表
- 如何把SAP Kyma和SAP Cloud for Customer连接起来
- 贪心算法---背包问题(物品可以分割问题)
- 4天搞定Docker和k8s核心架构,稳拿35k不是问题?
- 代码块是什么?该如何使用?
- 5G加持!刘作虎确认一加7 Pro:屏幕成本是普通旗舰2倍
- RabbitMQ消息订阅与轮询
- js table 生成序号_CSS Counter 以及 CSS content 内容生成技术的实用价值
- [SCM]源码管理 - SVN:externals
- 中国移动通信研究院笔试题2
- 严蔚敏数据结构c语言版第二版思维导图
- USB STM32配置
- 中级计算机平面设计考试题,平面设计师(中级)技能试题答案
- tp交换机管理页面_tplink交换机设置步骤使用方法
- SEO人员必备技术有哪些
- Flutter中设ListView的shrinkWrap为ture导致的崩溃
- 【Redis】布隆过滤器
- java换算当地时间_Java UTC时间与本地时间互相转换
- 51单片机控制TB6600驱动器驱动42步进电机
热门文章
- 使用 IDEA 文件统计工具 Statistic
- 计算机配置内存在哪看,从哪里看电脑配置
- 搭建V2P及中青看点教程
- 爆款预订,2022 最值得关注的后台框架——Fantastic-admin
- 【转载】mysql view prevents operation处理
- javaweb项目实训总结_java web实训心得体会
- Caused by: java.lang.Error: Unresolved compilation problems:解决办法
- 计算机二级word 文档排版,word排版操作指导(计算机二级2010版)
- cio时代_成功实现数字时代CIO的6条原则
- php faker,PHP Faker 教程