Ajax的基本使用

news/2024/7/19 14:37:28 标签: js, ajax

Ajax的使用

  • 什么是Ajax
  • 接口
        • 收集一些接口
        • Postman接口测试工具
  • JQuery中的Ajax
    • JQuery中常用的Ajax方法
      • $.get()函数
      • $.post()函数
      • $.ajax()函数
    • JQuery高级用法
  • Ajax进阶
    • XMLHttpRequest的基本使用
      • 什么是XMLHttpRequest
      • 使用xhr对象发起GET请求
        • 查询字符串
        • URL编码
      • 使用xhr对象发起POST请求
    • 数据交换的格式
      • XML
      • JSON
        • JSON的两种结构
          • 对象结构
          • 数组结构
          • JSON语法注意事项
          • JSON和JS对象之间转换
    • 封装自己的Ajax函数
        • 封装一个处理data数据的函数 analyzeData()
        • 封装AJAX函数
    • XMLHttpRequest Level2的部分新特性
      • 设置http请求时限
      • 使用FormData对象管理表单数据
      • 上传文件
      • 计算文件上传进度
  • Ajax的一个库-axios
    • 使用axios发起GET请求
    • 使用axios发起POST请求
    • 直接使用axios来发起请求

什么是Ajax

Ajax的全称是Asynchronous JavaScript And XML（异步的JavaScript和XML），是客户端与服务器之间进行数据交互的技术之一。网页中数据的增删改查以及获取、提交数据都可以通过Ajax的形式来实现数据交互。
通俗的理解：在原生JS中使用XMLHttpRequest对象和服务器进行数据交互的方式就是Ajax。

接口

当使用Ajax请求数据时所填写的url地址就是接口，每一个接口必须要有对应的请求方式。

收集一些接口

因为本人还不了解接口里面是咋实现的，所以先收集一些拿来用一用，嘿嘿

相关信息GETPOST
简单的书籍信息http://www.liulongbin.top:3006/api/getbookshttp://www.liulongbin.top:3006/api/addbook
智能聊天机器人http://www.liulongbin.top:3006/api/robot暂无
智能文字转语音http://www.liulongbin.top:3006/api/synthesize暂无

Postman接口测试工具

为了验证接口能否被访问，我们需要使用接口测试工具对数据接口进行检测，接口测试工具可以让我们在不写任何代码的情况下对接口进行调用和调试。点击这里下载Postman

JQuery中的Ajax

jQuery中对原生的XMLHttpRequest对象进行了封装，提供了一系列Ajax相关的函数，极大降低了Ajax的使用难度。

JQuery中常用的Ajax方法

$.get()函数

$.get()函数专门用来发起get请求，从服务器中的资源请求到客户端来进行使用。
语法如下：

$.get(url, [data], [callback])
参数名参数类型说明
urlstring要请求的资源地址
dataobject请求资源期间要携带的参数
callbackfunction请求成功时的回调函数

示例：

//从接口中获取id为1的数据，用res接收服务器相应的数据
$.get("http://www.liulongbin.top:3006/api/getbooks",{id: 1},function(res){
	console.log(res);//res是指服务器返回的数据
})

效果如下：
get请求

$.post()函数

$.post()函数专门用来发起post请求，将网页中的数据提交到服务器。语法与$.get()类似。

$.post(url, [data], [callback]);

ajax_54">$.ajax()函数

jQuery中提供的$.ajax()函数，是一个功能比较综合的函数，它允许我们对Ajax请求进行更详细的配置。
基本语法如下：

$.ajax({
	type: "", //请求的方式，例如GET和POST
	url: "", //请求的URL地址
	data: {}, //这次请求要携带的数据
	success: function(){} //请求成功后的回调函数
});

示例：

$.ajax({
	type: "GET", //把type换成method也行
	url: "http://www.liulongbin.top:3006/api/getbooks",
	data: {
		id: 1,
	},
	success: function (res) {
		console.log(res);
	},
});

效果如图所示：
AJAX请求

JQuery高级用法

Ajax进阶

XMLHttpRequest的基本使用

什么是XMLHttpRequest

XMLHttpRequest（xhr）是浏览器提供的一个JavaScript对象，通过这个对象可以请求服务器上的资源，上面所讲的JQuery中的Ajax函数就是基于XMLHttpRequest封装的。
用一张图理清楚关系：
XMLHttpRequest对象及封装

使用xhr对象发起GET请求

//第一步：实例化一个xhr对象
var xhr = new XMLHttpRequest();
//第二步：调用open函数  指定‘请求方式’与‘URL地址’
xhr.open("GET","http://www.liulongbin.top:3006/api/getbooks");
//第三步：调用send函数  发起Ajax请求
xhr.send();
//第四步：监听onreadystatechange事件
xhr.onreadystatechange = function (){
	//监听请求对象的readyState状态和服务器响应状态status
	if(xhr.readyState === 4 && xhr.status === 200){
		//如果判断成功
		//获取服务器响应回来的数据
		console.log(xhr.responseText);
	}
}

查询字符串

查询字符串定义：查询字符串是指在URL的末尾加上用于向服务器发送信息的字符串。
格式：将英文的?放在URL的末尾，然后再加上参数=值，多个键值对用&分隔开，以这个形式可以将想要发送给服务器的数据添加到URL中。
示例：

//不带参数的URL地址
var url1 = "http://www.resource.top:3006/book";
//带一个参数的URL地址
var url2 = "http://www.resource.top:3006/book?author=施耐庵";
//带多个参数的URL地址
var url3 = "http://www.resource.top:3006/book?author=施耐庵&id=1";

URL编码

因为URL地址中只允许出现英文相关的字符、数字和标点符号，不允许出现中文字符，如果需要出现中文字符，则必须对中文字符进行编码。
URL编码的原则：使用安全的字符去表示非安全的字符。通俗的理解就是使用英文字符去表示非英文字符。
示例：

var url = "http://www.resource.top:3006/book?author=施耐庵";
//经过编码之后，最后的‘施耐庵’三个字被转义为%E6%96%BD%E8%80%90%E5%BA%B5
//被转义后的编码中每三个百分号为一组表示一个中文字符
var url2 = "http://www.resource.top:3006/book?author=%E6%96%BD%E8%80%90%E5%BA%B5";

浏览器为URL地址的编码和解码提供了相应的API

对URL地址进行编码：encodeURI()

var word = "汉字";
console.log(encodeURI(word));
//输出结果为：%E6%B1%89%E5%AD%97

对URL地址进行解码：decodeURI()

var word = "%E6%B1%89%E5%AD%97";
console.log(decodeURI(word));
//输出结果为：汉字

使用xhr对象发起POST请求

//第一步：实例化一个xhr对象
var xhr = new XMLHttpRequest();
//第二步：调用open()函数
xhr.open("POST","http://liulongbin.top:3006/api/addbook");
//第三步：设置Content-Type属性（固定写法）
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//第四步：调用send()函数，将查询字符串作为参数，将数据以查询字符串的形式提交给服务器
xhr.send("bookname=三国演义&author=吴承恩");
//第五步：监听onreadystatechange事件
xhr.onreadystatechange = function (){
	
}

数据交换的格式

数据交换格式，就是服务器端与客户端之间进行数据传输与交换的格式，在前端领域，经常提及的两种数据提交格式分别是XML和JSON。但由于XML存在的一些缺点致使使用XML无法有效提升数据传输和开发的效率，因此这里主推JSON。

XML

XML（EXtensible Markup Language）即可扩展标记语言，与HTML对比，虽然都是标记语言，但是两者之间没有任何关系。HTML是网页内容的载体，XML则是被设计用来传输和存储数据的，是数据的载体。
XML的缺点：

  1. XML格式臃肿，和数据无关的代码比较多，体积大，传输效率低
  2. 在JavaScript中解析XML比较麻烦

JSON

JSON（Javascript Object Notation）即“JavaScript对象表示法”。简单来讲，JSON就是JavaScript对象和数组的字符串表示法。JSON使用文本表示一个JS对象或JS数组信息，是一种轻量级的文本表示方式，JSON的本质是字符串来表示对象数据或数组数据。

JSON的两种结构

对象结构

对象结构在JSON中表示为{}括起来的内容，数据的结构为{key:value,key:value,key:value}的键值对结构，其中，key必须是使用英文的双引号包裹起来的字符串，而value的数据类型可以是数字、字符串、布尔值、null、数组、对象6种属性。
示例：

{
	"name": "张三",
	"age": 20,
	"gender": "男",
	"isHuman": true,
	"hobby": ["吃饭","睡觉","运动"],
	"description": null
}
数组结构

数组结构在JSON中表示为[]括起来的内容，数据结构为["javascript",30,true]，数组中的数据类型可以是数字、字符串、布尔值、null、数组、对象6种类型。
示例：

["javascript","python","php"]
[100,200,300]
[true,false,null]
[{"name": "李四","age": 20},{"name": "王五","age":30}]
[["苹果","香蕉","橘子"],[10,20,30]]
JSON语法注意事项
  1. 属性名必须使用双引号包裹
  2. 字符串必须用双引号包裹，不允许用单引号进行包裹
  3. JSON中不能写注释
  4. JSON最外层必须是对象结构或者是数组结构
  5. 不能使用undefind或者函数作为JSON的值
JSON和JS对象之间转换

字符串—>对象（反序列化）
要将JSON转换为对象，可以使用JSON.parse()方法

var obj = JSON.parse('{"name:" "小刘", "age": 14}');
//结果为：{name: "小刘", age: 14}

对象—>字符串（序列化）
将对象转换为JSON字符串，可以使用JSON.stringify()方法

var obj = {name: "小刘", age:20};
var str = JSON.stringify(obj);
//str的值为：'{"name": "小刘", "age": 20}';

值得注意的是str的值为字符串，使用单引号是因为发生了单双引号嵌套，在Edge浏览器中的控制台打印的是这个，其中的\表示转义字符
控制台输出

封装自己的Ajax函数

模仿Jquery中的$.ajax()函数来封装属于自己的Ajax函数，我称之为AJAX()函数
定义自己的AJAX函数需要接收一个配置对象作为参数，配置对象中包含如下属性：

  • method 请求类型
  • url 请求的URL地址
  • data 请求携带的数据
  • success 请求成功之后的回调函数

封装一个处理data数据的函数 analyzeData()

function analyzeData(data){
	var arr = [];
	for(var k in data){
		//循环遍历data对象，拼接一个键值对字符串
		arr.push(k + '=' + data[k]);
	}
	//拼接完成后每个键值对再次用‘&’拼接为一个连接字符串并返回出去
	return arr.join("&");
}

封装AJAX函数

function AJAX(obj){
	var xhr = new XMLHttpRequest();
	var queryStr = anylaze(obj.data);
	//判断method方法是get还是post
	if(obj.method.toUpperCase() === "GET"){
		//method值为GET
		xhr.open("GET", obj.url + "?" +queryStr);
		xhr.send();
	} else if(obj.method.toUpperCase() === "POST"){
		//method值为POST
		xhr.open("POST", obj.url);
		xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		xhr.send(queryStr);
	}
	xhr.onreadystatechange = function(){
		if(xhr.status === 4 && xhr.readyState === 200){
			var resultObj = JSON.parse(xhr.responseText);
			obj.success(resultObj);
		}
	}
}

XMLHttpRequest Level2的部分新特性

Level2为XMLHttpRequest的新版，旧版具有以下缺点：

  1. 只支持文本数据的传输，无法用来读取和上传文件
  2. 传送和接收数据时，没有进度信息，只能显示有没有完成

XMLHttpRequest Level2的新功能

  1. 可以设置http请求时限
  2. 可以使用FormData对象对表单的数据进行管理
  3. 可以上传文件
  4. 可以获取数据传输的进度信息

设置http请求时限

有时Ajax很耗时，无法预知要花费多少时间，如果网速慢，用户需要等待很久，Level2中新增了timeout属性，规定从发送到接收最大时长，若超过则停止请求。

var xhr = new XMLHttpRequest();
xhr.timeout = 3000;
//还可以设置超时后的回调函数
xhr.ontimeout = function (){
	console.log("请求超时！");
}

使用FormData对象管理表单数据

在HTML5中，新增了一个FormData对象，方便表单数据的处理，可模拟表单操作：

//实例化一个表单对象
var fd = new FormData();
//通过append给表单数据添加项
fd.append("name", "张三");
fd.append("password", "123456");
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://www.liulongbin.top:3006/api/formdata");
//直接提交FormData对象，这与提交表单中的数据完全一样
xhr.send(fd);
xhr.onreadystatechange = function(){
	if(xhr.status === 200 && xhr.readyState === 4){
		console.log(JSON.parse(xhr.responseText));
	}
}

上传文件

实现思路：

  1. 定义UI结构
  2. 验证是否选择了文件
  3. 向FormData对象中追加文件
  4. 使用xhr发起上传文件的请求

首先是定义UI结构：

<!--  文件选择框-->
<input type="file" id="file1" />
<!-- 上传按钮 -->
<button id="btnUpload">上传文件</button>

然后是相应代码的实现：

	var btn = document.querySelector("#btnUpload");
	btn.addEventListener("click", function () {
		//files属性是一个数组，用来存放上传的文件的相关信息
		var files = document.querySelector("#file1").files;
		if (files.length <= 0) {
			return alert("请选择需要上传的文件！");
		} else {
			var fd = new FormData();
			//向FormData中追加文件
			fd.append("wj", files[0]);
			//利用xhr上传数据
			var xhr = new XMLHttpRequest();
			xhr.open("POST", "http://www.liulongbin.top:3006/api/formdata");
			xhr.send(fd);
		}
	});

计算文件上传进度

在新版本的XMLHttpRequest中，我们可以通过监听xhr.upload.onprogress事件来获取上传进度。
xhr.upload.onprogress事件中存在事件对象，在对象中有三个主要属性，用来描述上传进度的信息，它们分别是：

属性名描述
e.lengthComputable布尔值，表示当前上传资源是否具有可计算长度
e.loaded表示已经传输了的字节
e.total表示需要传输的总字节量

通过这些值很容易就能计算出当前的上传进度

var currentProgess = Math.ceil((e.loaded / e.total) * 100) + "%";

接下来是完整的一段代码（在上面的代码基础上做了补充）：

var btn = document.querySelector("#btnUpload");
	btn.addEventListener("click", function () {
		//files属性是一个数组，用来存放上传的文件的相关信息
		var files = document.querySelector("#file1").files;
		if (files.length <= 0) {
			return alert("请选择需要上传的文件！");
		} else {
			var fd = new FormData();
			//向FormData中追加文件
			fd.append("avatar", files[0]);
			//利用xhr上传数据
			var xhr = new XMLHttpRequest();
			//计算并显示上传进度
			xhr.upload.onprogress = function (params) {
				if (params.lengthComputable) {
					var currentProgress =
						Math.ceil((params.loaded / params.total) * 100) + "%";
					console.log(currentProgress);
				}
			};
			xhr.open("POST", "http://www.liulongbin.top:3006/api/upload/avatar");
			xhr.send(fd);
			xhr.onreadystatechange = function () {
				if (xhr.status === 200 && xhr.readyState === 4) {
					var data2 = JSON.parse(xhr.responseText);
					if (data2.status === 200) {
						console.log("上传成功！");
					} else {
						console.log("上传失败！");
					}
				}
			};
		}
	});

来看一看效果：
效果展示
要在上传结束后更改样式，则需要监听xhr.upload.onload事件

Ajax的一个库-axios

axios是专注于网络数据请求的一个库，相较于jQuery，axios更加轻量化，因为其只专注于网络请求。

使用axios发起GET请求

首先需要引入axios库

<script src="./axios.min.js"></script>

axios中发起get请求的语法

axios.get(ulr, {params: /*  相应对象的参数 */}).then(callback);

示例：

//获取对象（假装有一个button按钮，它的id为btn）
var btn = document.querySelector("#btn");
btn.addEventListener("click", function(){
	var url = "http://www.liulongbin.top:3006/api/get";
	var paramsObj = {name: "张三", age: 20};
	axios.get(url, {params: paramsObj}).then(function (res){
		//打印出服务器返回的数据，注意是res.data，而不是res
		console.log(res.data);
	});
});

来看一下效果：
展示效果

使用axios发起POST请求

调用语法与调用get时基本一致：

axios.post(url, {/* 参数 */}).then(callback);

示例：

var btn2 = document.querySelector("#btn2");
btn2.addEventListener("click", function (){
	var url = "http://www..liulongbin.top:3006/api/post";
	var dataObj = {name: "李四", age: 20};
	//传入的参数与get的区别是不需要对象中的params属性
	axios.post(url, dataObj).then(function (res){
		//仍然注意是res.data，而不是res
		console.log(res.data);
	});
});

效果展示：
展示效果

直接使用axios来发起请求

axios中也提供了类似于jQuery中的$.ajax()的函数，语法如下：

axios({
	method: "请求类型",
	url: "请求的URL地址",
	data: {/* POST数据 */},
	params: {/* GET参数，GET参数都是通过params对象指定的 */}
}).then(callback);

来吧，展示：

//使用axios()直接发起get请求
axios({
	method: "GET",
	url: "http://www.liulobgbin.top:3006/api/get",
	params: {name: "王五", age: 20}
}).then(function (res){
	console.log(res.data);
});

//使用axios()直接发起post请求
var dataObj = {name: "小陈", age: 30};
axios({
	method: "POST",
	url: "http://www.liulongbin.top:3006/api/post",
	data: dataaObj
}).then(function (res){
	console.log(res.data);
});

http://www.niftyadmin.cn/n/484135.html

相关文章

word vba 忽略空格查找_Word中快速查找汉字间的空格

word vba 忽略空格查找_Word中快速查找汉字间的空格

Word中快速查找汉字间的空格Word查找替换功能&#xff0c;输入以下表达式&#xff1a;查找表达式&#xff1a;([一-﨩])([^s   ]{1,})([一-﨩])解释&#xff1a;由3个表达式构成&#xff0c;每个表达式用1组半角圆括号约束。第1组[一-﨩]表示所有汉字&#xff1b;第2组[^s …
阅读更多...
跨域与JSONP 防抖与节流

跨域与JSONP 防抖与节流

跨域与JSONP了解同源策略和跨域实现跨域数据的请求JSONP实现原理JQuery中的JSONP防抖和节流什么是防抖缓存搜索结果什么是节流了解同源策略和跨域 什么是同源&#xff1a;如果两个页面的协议、域名和端口号都相同&#xff0c;则两个页面具有相同的源&#xff0c;只要三者中任何…
阅读更多...
Git版本控制系统的基本使用

Git版本控制系统的基本使用

Git版本控制系统概念基础版本控制软件使用版本控制软件的好处版本控制系统的分类Git基础什么是GitGit的三个区域工作区中文件的四种状态Git的三种状态基本的Git工作流程安装并配置Git配置用户信息查看Git全局的配置信息方法一方法二查看帮助信息获取Git仓库方法一&#xff1a;将…
阅读更多...
mysql 8.0 (ga)_技术分享 | MySQL 8.0.17 GA 发布！

mysql 8.0 (ga)_技术分享 | MySQL 8.0.17 GA 发布！

原创&#xff1a; 管长龙昨日 MySQL 官网正式发布 8.0.17 / 5.7.27 / 5.6.45 三个(维护)版本&#xff0c;距离上一个 GA 版本(8.0.16)发布时隔仅 88 天&#xff01;MySQL 各开发团队的博客网站&#xff0c;同一时间发布了多篇文章报道新版本发布(后续翻译)。三个版本除了修复 B…
阅读更多...
pyqt5中如何连接mysql_Windows环境下 PyQt5 如何安装MySql驱动 （PyQt5连接MYSQL时显示Driver not loaded解决方案）...

pyqt5中如何连接mysql_Windows环境下 PyQt5 如何安装MySql驱动 （PyQt5连接MYSQL时显示Driver not loaded解决方案）...

参考文章&#xff1a;前文说过如何在Ubuntu环境下 为PyQt5 安装MySql驱动&#xff0c; 这里面主要说的是如何在Windows环境下安装MySql驱动。#-*- coding: utf-8 -*-【简介】PyQt5中 处理database 例子importsysfrom PyQt5.QtCore import *from PyQt5.QtGui import *from PyQt…
阅读更多...
初步学习Node.js

初步学习Node.js

初步学习Node.js什么是Node.js判断node.js是否安装成功在node.js环境中执行JavaScript代码fs文件系统模块什么是fs文件系统模块读取指定文件中的内容判断文件是否读取成功向指定的文件中写入内容判断文件是否写入成功fs文件模块路径动态拼接的问题解决方案使用绝对地址使用__di…
阅读更多...
Node.js中的mysql模块

Node.js中的mysql模块

Node.js中的mysql模块在Express中连接mysql并使用select查询insert插入update更新delete删除标记删除在Express中连接mysql并使用 首先要在项目中导入mysql模块 npm i mysql在使用mysql模块控制MySQL数据库之前&#xff0c;需要对mysql模块进行一些配置 // 导入mysql模块 co…
阅读更多...
对密码进行加密处理

对密码进行加密处理

对密码进行加密处理对密码进行加密处理bcryptjs包加密值比较对密码进行加密处理 为了保证数据的安全性&#xff0c;不建议将密码按明文的形式存储&#xff0c;而是建议将密码加密存储。 bcryptjs包 使用bcryptjs对用户密码加密有以下优点 加密后无法逆向破解同一明文加密多…
阅读更多...
最新文章

Copyright @ 2022~2023