AJAX两种实现方法（Javascript、Jquery）实例

柠夏小白

已于 2022-02-16 12:23:28 修改

阅读量393

点赞数 1

分类专栏： AJAX 文章标签： javascript jquery ajax xmlhttprequest

于 2022-01-16 10:24:45 首次发布

本文链接：https://blog.csdn.net/a2417841572/article/details/122519914

版权

AJAX 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、JavaScript实例：

在这里插入图片描述

<!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>AJAX GET请求（Javascript）</title>
		<style>
			#learn {
				width: 200px;
				height: 200px;
				border: solid 1px #90b;
			}
		</style>
	</head>
	<body>
		<button>点击发送请求</button>
		<div id="learn"></div>
		<script type="text/javascript"></script>
		<script>
			//获取button元素
			var btn = document.getElementsByTagName('button')[0];
			var learn = document.getElementById('learn');
			//绑定事件
			btn.onclick = function() {
				//1.创建对象
				var xhr;
				if (window.XMLHttpRequest) {
					// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
					xhr = new XMLHttpRequest();
				} else {
					// IE6, IE5 浏览器执行代码
					xhr = new ActiveXObject();
				}
				//2.事件绑定 处理服务端返回的结果
				// on  when 当...时候
				// readystate 是xhr对象中的属性，表示状态 0 1 2 3 4
				// change 改变
				xhr.onreadystatechange = function() {
					//判断（服务端返回了所有的结果）
					//判断响应状态码 200表示成功 404 403 401 500
					// xmlhttp.readyState==4     //属性表示对象的状态
					// 0：请求未初始化     1：服务器连接已建立   2：服务器请求已接收  3：服务器处理请求  4: 请求已完成，且响应已就绪
					if (xhr.readyState == 4 && xhr.status == 200) {
						// 获得字符串形式的响应数据：
						learn.innerHTML = xhr.responseText;
					}
				}
				//3.初始化 设置请求方法和url
				// XMLHttpRequest.open(method,url,async);
				//            method参数:表示post请求或者get请求
				//            url参数：请求的地址
				//            async参数：异步true，同步false
				xhr.open('GET', 'ajax.txt', true);
				//4.发送
				//XMLHttpRequest.send() :表示向服务器发送数据
				xhr.send();
			}
		</script>
	</body>
</html>

二、Jquery实例：
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>AJAX(jQuery)</title>
		<!-- 引用jQuery外部 -->
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
		</script>
		<script>
		$(document).ready(function(){
			$("button").click(function(){
				$("#div1").load("ajax.txt");
			})
		})
		</script>
	</head>
	<body>
		<body>
			<button>获取外部内容</button>
			<div id="div1"><h2>使用Jquery AJAX修改文本</h2></div>
		</body>
	</body>
</html>

注：
实例中url为ajax.txt文本，引用时需在同一目录下
在这里插入图片描述

柠夏小白

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX两种实现方法（Javascript、Jquery）实例

一、JavaScript实例：<!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" />
复制链接

扫一扫