Ajax

最新推荐文章于 2022-07-31 10:36:21 发布

戈叁铭

最新推荐文章于 2022-07-31 10:36:21 发布

阅读量103

点赞数

分类专栏： Ajax 文章标签： ajax 前端

本文链接：https://blog.csdn.net/qq_38241002/article/details/112563713

版权

Ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文深入探讨了Ajax技术，包括其核心机制XMLHttpRequest、工作原理、使用步骤及示例。通过Ajax，JavaScript可以异步与服务器交互，实现页面无刷新更新。文中还展示了原生Ajax、简易封装及jQuery、Axios的Ajax用法，揭示了Ajax在前后端通信中的重要作用。

摘要由CSDN通过智能技术生成

Ajax

在这里插入图片描述

Ajax包含的技术

使用css和XHTM来标准化呈现
使用DOM模型来交互和动态显示
使用XMLHttpRequest来和服务器进行异步通信。
使用javaScript来绑定调用。

Ajax原理

通过XMLHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。
　XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。

示例

readyState

值	状态	描述
0	UNSENT	代理被创建，但尚未调用 open() 方法。
1	OPENED	open() 方法已经被调用。
2	HEADERS_RECEIVED	send() 方法已经被调用，并且头部和状态已经可获得。
3	LOADING	下载中； responseText 属性已经包含部分数据。
4	DONE	下载操作已完成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>演示使用原生ajax实现登录操作</title>
	</head>
	<body>
		<form action="" method="post" >
			<p><label for="">账号:</label><input type="text" name="account" value="admin"></p>
			<p><label for="">密码:</label><input type="password" name="passwd" value="123456"></p>
			<p><button type="button">登录</button></p>
		</form>
		<div class="notice"></div>
		<script>
			let btnEl = document.querySelector('form  button');
			btnEl.addEventListener('click',()=>{
				let accountVal = document.querySelector('[name=account]').value.trim();
				let passwdVal = document.querySelector('[name=passwd]').value.trim();
				// 准备ajax请求
				// 1. 创建XMLHttpRequest 模板对象的对象，简称请求对象
				let req = new XMLHttpRequest();
				// 2. 为请求对象准备 readystatechange(请求对象发生改变) 事件的监听函数，
				//处理来字服务端的响应，事件由请求对象发起调用，当请求状态发生改变时函数会被调用。
				//请求对象的状态称为readyState，服务器的响应状态由请求对象status属性接受
				req.onreadystatechange = function(){
					// 需要使用this， this是req对象
					// 服务器处理已经完成并得到服务器数据
					
					if(this.readyState === 4){ 
						// 服务器正常的响应了请求
						if(this.status === 200){ 
							// 获取服务器响应的数据 
							let result = this.responseText;
							let noticeEl = document.querySelector('.notice');
							noticeEl.innerText = result;
						}
					}
				}
				// 3. 通过请求对象的open()方法 
				//第一个参数请求方式，
				//第二个参数请求地址
				//第三个参数可选表示设置请求是否是异步的。如果设为 true (默认值）
				req.open('POST','http://192.168.1.10:8880/user/login',true);
				// 4. 通过请求对象的setRequestHeader()方法需要向服务器写入的请求头信息。注意该步骤不是所有请求都需要
				req.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// 5. 通过请求对象的send()方法向服务器发送请求
				let sendData = 'account='+accountVal+'&password='+passwdVal;
				//send()的参数可以是任何向发送给服务器的内容。
				req.send(sendData);
			});
		</script>
	</body>
</html>

简易Ajax封装

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		function ajax (options) {
			// 默认值，get请求
			var defaults = {
				type: 'get',
				url: '',
				data: {},
				header: {
					'Content-Type': 'application/x-www-form-urlencoded'
				},
				success: function () {},
				error: function () {}
			};

			// 使用options对象中的属性覆盖defaults对象中的属性
			Object.assign(defaults, options);

			// 创建ajax对象
			var xhr = new XMLHttpRequest();
			// 拼接请求参数的变量
			var params = '';
			// 循环用户传递进来的对象格式参数
			for (var attr in defaults.data) {
				// 将参数转换为字符串格式
				params += attr + '=' + defaults.data[attr] + '&';
			}
			// 将参数最后面的&截取掉 
			// 将截取的结果重新赋值给params变量
			params = params.substr(0, params.length - 1);

			// 判断请求方式
			if (defaults.type == 'get') {
				defaults.url = defaults.url + '?' + params;
			}

			// 配置ajax对象
			xhr.open(defaults.type, defaults.url);
			// 如果请求方式为post
			if (defaults.type == 'post') {
				// 用户希望的向服务器端传递的请求参数的类型
				var contentType = defaults.header['Content-Type']
				// 设置请求参数格式的类型
				xhr.setRequestHeader('Content-Type', contentType);
				// 判断用户希望的请求参数格式的类型
				// 如果类型为json
				if (contentType == 'application/json') {
					// 向服务器端传递json数据格式的参数
					xhr.send(JSON.stringify(defaults.data))
				}else {
					// 向服务器端传递普通类型的请求参数
					xhr.send(params);
				}

			}else {
				// 发送请求
				xhr.send();
			}
			// 监听xhr对象下面的onload事件
			// 当xhr对象接收完响应数据后触发
			xhr.onload = function () {

				// xhr.getResponseHeader()
				// 获取响应头中的数据
				var contentType = xhr.getResponseHeader('Content-Type');
				// 服务器端返回的数据
				var responseText = xhr.responseText;

				// 如果响应类型中包含applicaition/json
				if (contentType.includes('application/json')) {
					// 将json字符串转换为json对象
					responseText = JSON.parse(responseText)
				}

				// 当http状态码等于200的时候
				if (xhr.status == 200) {
					// 请求成功 调用处理成功情况的函数
					defaults.success(responseText, xhr);
				}else {
					// 请求失败 调用处理失败情况的函数
					defaults.error(responseText, xhr);
				}
			}
		}

		ajax({
			type: 'post',
			// 请求地址
			url: 'http://localhost:3000/responseData',
			success: function (data) {
				console.log('这里是success函数');
				console.log(data)
			}
		})
	</script>
</body>
</html>

JQuery的Ajax

https://www.jquery123.com/jQuery.ajax/

ajax({参数列表})

参数说明

url ：发送请求的地址
type：请求方式 (“POST” 或 “GET”)，默认为 “GET”。注意:其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
username：用于响应HTTP访问认证请求的账户名
password：用于响应HTTP访问认证请求的密码
headers ：一个额外的"{键:值}"对映射到请求一起发送。此设置会beforeSend 函数调用之前被设置 ;
dataType：预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断。(xml, json, script, or html)
data ：向服务器发送的数据,可以给字符串或者json格式对象
success：请求成功之后的处理函数。类型: Function( Object data, String textStatus, jqXHR jqXHR )
error：请求失败之后的处理函数

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>演示Jqueyr的ajax</title>
	</head>
	<body>
		<form action="" method="post" >
			<p><label for="">账号:</label><input type="text" name="account" value="admin"></p>
			<p><label for="">密码:</label><input type="password" name="passwd" value="123456"></p>
			<p><button type="button">登录</button></p>
		</form>
		<div class="notice"></div>
		<script src="lib/jquery/jquery-3.4.1.js"></script>
		<script>
			$(function(){
				$('button').click(()=>{
					let account = $('[name=account]').val();
					let pass = $(':password').val();
					// jquery的ajax
					$.ajax({
						url:'http://192.168.1.10:8880/user/login',
						type:'POST',
						data:{account:account,password:pass},
						success:function(data){
							// 反引号指的是模板字符串，可以在字符串中使用变量
							let info = `<div><h2>消息:</h2>${data.message}</div><div><h2>秘钥:</h2>${data.token}</div>`;
							$('.notice').html(info);
						}
					});
				});
			});
		</script>
	</body>
</html>

Axios

//get请求
// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 可选地，上面的请求可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
  //post请求
  axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });