117-(AJAX)基本API

最新推荐文章于 2024-04-10 18:38:25 发布

七色的天空

最新推荐文章于 2024-04-10 18:38:25 发布

阅读量112

点赞数

分类专栏： 04_JavaScript 文章标签： ajax okhttp 前端

本文链接：https://blog.csdn.net/q506174602/article/details/133702529

版权

04_JavaScript 专栏收录该内容

121 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>AJAX</title>
</head>
<body>
	<span style="color: red;"></span>
	<script type="text/javascript">
		/*
		XML 指可扩展标记语言(EXtensible Markup Language); 用来传输和存储数据
		Ajax()  Asynchronous JavaScript And XML 异步JavaScript和XML 现在和服务器交换数据一般使用 json 的数据格式

		Ajax 是一种在无需重新接在整个页面的情况下, 能够更新部分网页的技术, 
		也就是js通过一个网址(URL)去加载数据, 且整个过程是用户不可见(无感刷新)
		传统网页 不使用ajax, 如果要更新网页内容, 必须重新加载整个网页
		-- 传统网页 缺点: 
			数据量大,占用网络带宽高; 
			浏览器需要重新渲染整个页面, 用户等待时间长;
			用户体验差
		AJAX(局部刷新) 优势
			异步加载数据, 无需切换或刷新整个页面
			用户体验好, 及时验证, 操作步骤简化
			节省流量, 
			js控制数据的加载, 更加灵活多用
		*/

		// 1.创建 Ajax对象
		// XMLHttpRequest 用于在后台与服务器之间交换数据的, 所有的现代浏览器均支持XMLHttpRequest对象

		var xhr = new XMLHttpRequest(); // 实例化完以后可以使用 xhr的属性和方法
		console.log(xhr);


		/* 2.与服务器建立连接, 方法: open()
		 xhr.open(method, ApiUrl, Async最后一个参数可以省略,默认是true
		 2.1 method: get post put delete
		 	get: 获取服务器信息
		 	post: 向服务器发送信息(一般用在创建信息的接口)
		 	put:  向服务器发送信息(一般用在更新信息的接口)
		 	delete: 删除信息

		 	localhost: 127.0.0.1
	 	 2.2 ApiUrl: 
	 	 2.3 post put
	 	 	-- application/x-www-form-urlencoded
	 	 		name是张三 年龄是18
	 	 		username=张三&age=18
 	 		-- application/json
 	 			{
					"username": "张三",
					"age": 18
 	 			}
	 		-- multipart/form-data: 上传文件
	 			filename: ""
		*/
		xhr.open('get', 'http://124.223.98.197:10086/prod-api/captchaImage?id=1');
		console.log(xhr);
		// 3.发送数据
		// 3.1 get请求通过地址栏传递参数, 也就是在url后面拼接参数, send()里面不写内容
		// post put 请求 将参数转为字符串 写在send()方法里 send(params string);
		/* 
		xhr.open('post', ''http://124.223.98.197:10086/prod-api/captchaImage/create');  
			接口要求要求是application/json的话, 参数这么写paramsObj = {file: 'ss.word', name: 'ss', size: 1090},
			xhr.send(JSON.stringify(paramsObj));

			接口要求是application/x-www-form-urlencoded, 参数这么写 paramsStr = 'file=ss.word&name=ss&size=1090',
			xhr.send(paramsStr);
		*/
		xhr.send();
		console.log(xhr);
		/*
		4. 接收数据
		当readyState 改变时, 触发 onreadystatechange 事件
		readyState 里一定存了 XMLHttpRequest 状态, 值是从0-4 且依次变化;
			--0: 请求未初始化, 表示创建了异步对象, var xhr = new XMLHttpRequest()
			--1: 服务连接已建立, 初始化异步对象的请求参数 xhr.open()
			--2: 请求已接收, 使用 send()方法发送请求
			--3: 请求处理中, 也就是服务器接收了请求数据, 并开始处理了
			--4: 请求已完成, 响应已经就绪, 异步对象接受了数据并将在对象内部处理完成后续的页面展示效果
		*/
		xhr.onreadystatechange = function() {
			console.log(xhr.readyState);
			if (xhr.readyState === 4) {
				// readyState 为4的时候是最终状态(请求状态)
				// responseText (responseXML) 是响应的内容,是字符串, 需要解析成JSON对象
				var resObj = JSON.parse(xhr.responseText);
				// console.log(resObj);
				if (resObj.code === 200) {
					// code 请求结果的状态, 状态码
					// 1** 信息, 服务器接收到请求
					// 2** 成功, 操作成功接收并处理
					// 3** 重定向
					// 4** 客户端错误 请求包含语法错误或者无法完成请求
					// 5** 服务端错误

					/*
					200 成功
					400 Bad Request 客户端请求语法错误
					401 Unauthorized 未授权, 没有登录
					403 Forbidden 禁止访问 拒绝执行该请求
					404 Not Found 请求资源不存在
					405 Method not Allowed 请求方法被禁止
					500 Internal Server Error 服务器内部错误
					501 Not Implemented 服务器不支持请求的功能, 
					502 bad gateway 网关错误
					503 服务器不可用
					504 gateway Timeout 网关请求超时, 不能从服务器获取请求
					*/
					var span = document.querySelector('span');
					span.innerText = resObj.uuid;
					console.log(resObj.uuid);
				}
			}
		}
	</script>
</body>
</html>