使用原生Ajax处理HTML,XML,JSON数据

最新推荐文章于 2022-09-08 11:39:39 发布
最新推荐文章于 2022-09-08 11:39:39 发布
阅读量2.9k 收藏 2
点赞数
分类专栏： 前端之道
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AZHELL/article/details/72526684
版权

虽然在上一篇博客中介绍了Ajax的基本知识，但还是需要温习一下相关的知识点，我们还是从最简单的实现步骤讲起

index.html

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	window.οnlοad= function(){
		document.getElementsByTagName("a")[0].onclick = function(){
			// 1、创建一个XMlHttpRequest对象
			var xhr = new XMLHttpRequest();
			// 2、准备发送请求的方式和URL
			var method = "GET";
			var url = this.href;
			// 如果请求类型是POST请求，还应该有如下代码
			//xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			// 3、调用XMlHttpRequest对象的open方法
			xhr.open(method, url);
			// 4、调用XMlHttpRequest对象的send方法
			xhr.send(null);
			// 5、为XMlHttpRequest对象添加onreadystatechange属性的响应函数
			xhr.onreadystatechange= function(){
				// 6、判断响应是否完成：readyState属性值为4即代表完成
				if(xhr.readyState == 4){
					// 7、判断响应是否可用：status属性值为200则代表可用
					if(xhr.status == 200){
						alert(xhr.responseText);
					}
				}
			}
			
			// 取消a节点的默认行为
			return false;
		}
	};
</script>
</head>
<body>
<a href="helloAjax.txt">hello Ajax</a>
</body>
</html>

代码中的注释写的很清楚了，实现Ajax的步骤一目了然。所以下面的三个部分我依旧是上代码不做解释。


1、处理HTML数据

main.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>显示名人信息</title>
<style type="text/css">
* {
	font-family: "微软雅黑";
	font-size: 15pt;
}

a {
	color: #ABABAF;
}

h2, h3 {
	color: green;
}
</style>
<script type="text/javascript">
	window.onload = function() {
		var aNodes = document.getElementsByTagName("a");
		for (var i = 0; i < aNodes.length; i++) {
			aNodes[i].onclick = function() {
				var request = new XMLHttpRequest();
				var method = "GET";
				var url = this.href;
				request.open(method, url);
				request.send(null);
				request.onreadystatechange = function() {
					if (request.readyState == 4) {
						if (request.status == 200) {
							// 直接将返回的数据插入到页面
							document.getElementById("details").innerHTML = request.responseText;
						}
					}
				}
				return false;
			}
		}
	}
</script>
</head>
<body>
	<ul>
		<li><a href="file/ming.html">rgx</a>
		<li><a href="file/hong.html">lj</a>
	</ul>
	<div id="details"></div>
</body>
</html>

ming.html

<h2>小明</h2>
<h3>学号：2017116512</h3>
<h3>属性：学渣</h3>

hong.html

<h2>小红</h2>
<h3>学号：2017116505</h3>
<h3>属性：学霸</h3>

2、处理XML数据

main.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>显示名人信息</title>
<style type="text/css">
* {
	font-family: "微软雅黑";
	font-size: 15pt;
}

a {
	color: #ABABAF;
}
h2{
	color: red;
}
h3 {
	color: green;
}
</style>
<script type="text/javascript">
	window.onload = function() {
		var aNodes = document.getElementsByTagName("a");
		for (var i = 0; i < aNodes.length; i++) {
			aNodes[i].onclick = function() {
				var request = new XMLHttpRequest();
				var method = "GET";
				var url = this.href;
				request.open(method, url);
				request.send(null);
				request.onreadystatechange = function() {
					if (request.readyState == 4) {
						if (request.status == 200) {
							/*
							当数据传输格式变为xml的时候，我们应该先接收到数据，再解析数据，然后将解析到的数据，动态的创建
							html元素，再将这些html元素加在div中
							*/
							var result = request.responseXML;
							
							var name  = result.getElementsByTagName("name")[0].firstChild.nodeValue;
							var studentId = result.getElementsByTagName("studentId")[0].firstChild.nodeValue;
							var param = result.getElementsByTagName("param")[0].firstChild.nodeValue;
							
							var name_h2 = document.createElement("h2");
							name_h2.appendChild(document.createTextNode(name));
							var studentId_h3 = document.createElement("h3");
							studentId_h3.appendChild(document.createTextNode(studentId));
							var param_h3 = document.createElement("h3");
							param_h3.appendChild(document.createTextNode(param));
							
							var details = document.getElementById("details");
							details.innerHTML = "";
							details.appendChild(name_h2);
							details.appendChild(studentId_h3);
							details.appendChild(param_h3);
						}
					}
				}
				return false;
			}
		}
	}
</script>
</head>
<body>
	<ul>
		<li><a href="file/ming.xml">rgx</a>
		<li><a href="file/hong.xml">lj</a>
	</ul>
	<div id="details"></div>
</body>
</html>
ming.xml 
<?xml version="1.0" encoding="utf-8"?>
<details>
	<name>小明</name>
	<studentId>学号：2017116512</studentId>
	<param>属性：学渣</param>
</details>

hong.html

<?xml version="1.0" encoding="utf-8"?>
<details>
	<name>小红</name>
	<studentId>学号：2017116505</studentId>
	<param>属性：学霸</param>
</details>

3、处理json数据

main.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>显示名人信息</title>
<style type="text/css">
* {
	font-family: "微软雅黑";
	font-size: 15pt;
}

a {
	color: #ABABAF;
}

h2, h3 {
	color: green;
}
</style>
<script type="text/javascript">
	window.onload = function() {
		var aNodes = document.getElementsByTagName("a");
		for (var i = 0; i < aNodes.length; i++) {
			aNodes[i].onclick = function() {
				var request = new XMLHttpRequest();
				var method = "GET";
				var url = this.href;
				request.open(method, url);
				request.send(null);
				request.onreadystatechange = function() {
					if (request.readyState == 4) {
						if (request.status == 200) {
							var result = request.responseText;
							// 把result转换为json对象，eval函数会把字符串当做js代码执行
							var object = eval("("+ result +")");
							
							var name  = object.person.name;
							var studentId = object.person.studentId;
							var param = object.person.param;
							
							var name_h2 = document.createElement("h2");
							name_h2.appendChild(document.createTextNode(name));
							var studentId_h3 = document.createElement("h3");
							studentId_h3.appendChild(document.createTextNode(studentId));
							var param_h3 = document.createElement("h3");
							param_h3.appendChild(document.createTextNode(param));
							
							var details = document.getElementById("details");
							details.innerHTML = "";
							details.appendChild(name_h2);
							details.appendChild(studentId_h3);
							details.appendChild(param_h3);
						}
					}
				}
				return false;
			}
		}
	}
</script>
</head>
<body>
	<ul>
		<li><a href="file/ming.json">rgx</a>
		<li><a href="file/hong.json">lj</a>
	</ul>
	<div id="details"></div>
</body>
</html>

ming.json

{
"person":{
	"name":"小明",
	"studentId":"2017116512",
	"param":"学渣"
}
}

hong.json

{
"person":{
	"name":"小红",
	"studentId":"2017116505",
	"param":"学霸"
}
}

AZHELL
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax处理XML、HTML、JSON三种数据格式的方法
qq_22655689的博客
07-08 3745
服务器的编程语言只能返回三种格式的数据：XML、HTML、JSON。Ajax要在前端浏览器处理这三种格式。 1、HTML HTML是三种格式中最好处理的一种，HTML由普通文本组成，文本将存储在responseText中，它已经是所希望的文本，不用解析，直接用innerHTML属性使用就可以。 eg:如果要把data.htmlL里的内容显示在另一个index.html中。 data
javascript解析ajax返回的xml和json格式数据实例详解
10-20
本文将深入探讨如何使用JavaScript解析Ajax返回的XML和JSON格式数据。 首先，我们来看如何处理XML格式的数据。XML是一种可扩展标记语言，常用于结构化数据交换。在JavaScript中，我们可以通过创建`XMLHttpRequest`...
使用原生ajax处理json字符串的方法
12-03
AJAX AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。 什么是json？ JSON的全称是 Javascript Object Notation（javascript对象表示法），是基于javascript对象字面量，如果单从眼睛看，JSON里的数据是被保存在花括号里面– {},如果在用途上面进一步分析，JSON是一种数据交换格式。JSON内部以 名称:值这种格式排列，如
ajax的使用、json数据传输
温故。的博客
06-15 2655
文章目录javaWeb一、课程目标二、Ajax2.1 执行流程2.2 原生Ajax2.3 jqueryAjax2.3.1 常用方法2.3.1.1 Ajax请求**常用属性参数****常用回调方法**语法实例2.3.1.2 Get请求常用属性参数及回调方法语法实例2.3.1.2 Post请求常用属性参数及回调方法语法实例2.4 json数据的返回 javaWeb 一、课程目标 【了解】原生ajax 【掌握】JqueryAjax的使用 【理解】json数据前后期交互 【掌握】java处理解析json数据 二
原生ajax_axios框架_json传输字符串
LXL2790的博客
09-08 1086
原生ajax_axios框架_json传输字符串
ajax的基本使用(xml和json)
weixin_43555093的博客
07-09 842
1.什么是ajax 　　Ajax即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.Ajax=异步JavaScript和XML(标准通用标记语言的子集).通过后台与服务器进行少量数据交换,Ajax可以使用网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某个部分进行更新(无刷新技术)....
js ajax解析json数据,JavaScript处理解析JSON数据过程详解
weixin_39837352的博客
08-07 579
JSON (JavaScript Object Notation)一种简单的数据格式，比xml更轻巧。 JSON 是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。JSON的规则很简单： 对象是一个无序的“‘名称/值'对”集合。一个对象以“{”(左括号)开始，“}”(右括号)结束。每个“名称”后跟一个“:”(冒号)；“‘...
猿创征文 | 如何使用原生AJAX请求数据
叶子yes的博客
08-28 1746
AJAX英文全称 Asynchronous Javascript And XML（异步的JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互。AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。AJAX描述了一种主要使用脚本操作HTTP的Web应用架构，AJAX应用的主要特点是使用脚本操纵HTTP和Web服务器进行数据交换，不会导致页面重载。......
通过原生js发起ajax请求和通过json格式返回数据及解析
punk的博客
12-20 1966
ajax可以实现不刷新页面就发起请求（局部刷新） 异步对象：XMLHttpRequest ajax中使用xmlHttpRequest对象 //1、创建xmlHttpRequest对象 var xmlHttpRequest = new xmlHttpRequest(); //2、绑定事件 (每次当异步对象发起请求，获取了数据都会触发这个事件 onreadystatechange) xmlHttpRequest.onreadystatechange = function () { if (xml
原生Ajax详细获取数据
热门推荐
weixin_52703987的博客
07-22 2万+
1.原生AjaxGET获取 //步骤一:创建异步对象 var ajax = new XMLHttpRequest(); //步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端 ajax.open('get','路径'); //步骤三:发送请求 ajax.send(); //步骤四:注册事件 onreadystatechange 状态改变就会调用 ajax.onreadystatechange = function () {
Ajax使用JSON数据格式案例
12-04
JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。 JSON的规则很简单：对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。...
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
10-23
主要介绍了JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例的相关资料,需要的朋友可以参考下
ajax后台处理返回json值示例代码
12-01
总的来说，Ajax后台处理返回JSON值涉及的主要步骤包括：后端接收请求，处理数据，将数据转换为JSON格式，设置响应类型，将JSON数据写入响应流；前端则通过Ajax请求获取JSON数据，解析数据并在页面上进行展示。这样的...
Ajax的简单使用与JSON数据格式
xikx99的博客
05-12 697
Ajax 1、概念 Asynchronous JavaScript And XML： 异步的JavaScript和XML 1、异步和同步：客户端和服务器通信的基础上 ​ 同步：客户端必须等服务器的响应，在等待的时间内不可以做其它的操作 ​ 异步：客户端不需要等待服务器的响应，在服务器处理请求的过程中可以干其它的事情 ​ Ajax是一种无需重新加载整个网页的情况下，能够更新部分网页的技术 ​ 通过与后台服务器少量数据交换，Ajax可以使网页实现异步更新，这意味着可以不在重新加载整
JQuery的事件之鼠标事件
AZHELL的博客
05-05 5235
最近在慕课网学习JQuery，然后在W3C参考相关资料（在这里感谢慕课网，感谢W3C）！样式和DOM都学完了，最近在学习事件，但是说实话很多东西真的不是很理解，手里倒是有源码，但是作为菜鸟问题就在这里，不会看啊，/(ㄒoㄒ)/~~。之前的样式和DOM还好，事件学习过程中问题有点多，所以打算记录下来，简单的就提一下略过，不理解的就谈谈自己的感悟，以后成为大牛了回来再改改，各位同志们也多多指导啊！！！...
animation动画结束后无法再次执行的问题
AZHELL的博客
12-28 3394
首先这里有一个结论：想要解决这个问题，我们只能选择监听animationend事件，其他的我们以为的可以解决的方案都是不可行的。 1、页面中的元素 &amp;lt;div class=&quot;st_apples&quot;&amp;gt; &amp;lt;!-- 动画会作用在这个span上 --&amp;gt; &amp;lt;span data-value=&quot;&quot;&amp;gt;&amp;lt
使用JQuery的Ajax操作html，xml，json数据
AZHELL的博客
05-21 1130
博主在上一篇文章使用原生Ajax处理HTML,XML,JSON数据中介绍了原生的Ajax处理三种数据格式的方法，一眼便知是很麻烦的，而且很多的步骤是可以封装起来减少开发人员的痛苦的。比如js的比较优秀的库JQuery就对Ajax有很好的支持。本文会介绍几个常用的方法，至于其它众多的操作方法不是本文介绍的重点，大家可以移步W3Cschool去查询。 首先介绍一个方法load，load方法通过 AJ
Ajax学习初体验
AZHELL的博客
04-13 330
我的Ajax的学习也是刚刚开始，也基本有了大致的概念，最近在慕课网上学习了一个老师的课程，讲得蛮好的，很感谢老师，虽然他的项目的服务器是PHP写的，哈哈！所以我不得不自己的花点时间自己重新写一个基本的java Servlet服务器。也是很好的巩固了自己的知识吧。但是不要忘了，重点还是在Ajax的学习上喔。 我们都知道Ajax的核心是XMLHttpRequest，这是实现异步请求和响应的基本对象。
使用原生ajax进行提交实例详解
最新发布
05-01
Ajax (Asynchronous JavaScript and XML) 是一种在不刷新整个页面的情况下，使用 JavaScript 发起异步请求，获取或提交数据的技术。原生 Ajax 是指不依赖任何 JavaScript 框架或库，纯粹使用原生 JavaScript 实现 Ajax。下面是一个使用原生 Ajax 进行提交的实例详解。 首先需要创建一个 XMLHttpRequest 对象： ``` var xmlhttp; if (window.XMLHttpRequest) { // IE7+、Firefox、Chrome、Opera、Safari 浏览器执行代码 xmlhttp = new XMLHttpRequest(); } else { // IE6、IE5 浏览器执行代码 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } ``` 然后设置请求方式和请求地址： ``` var url = "submit.php"; // 提交的处理程序 var method = "POST"; // 提交的方式，可以是 GET 或 POST xmlhttp.open(method, url, true); // true 表示异步请求 ``` 接着设置请求头： ``` xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); ``` 这里使用了 application/x-www-form-urlencoded 格式。如果需要提交 JSON 格式的数据，则设置为： ``` xmlhttp.setRequestHeader("Content-type", "application/json"); ``` 接下来设置回调函数： ``` xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { // 请求成功，处理返回的数据 console.log(this.responseText); } }; ``` 当 readyState == 4 时，表示请求已完成；status == 200 表示请求成功。这里只是简单地输出了返回的数据，可以根据具体情况进行处理。 最后发送请求，提交数据： ``` var data = "name=John&age=18"; // 提交的数据，可以是表单数据或 JSON 数据 xmlhttp.send(data); ``` 这里提交了两个字段，name 和 age，可以根据实际情况修改。当使用 GET 方式提交时，数据需要拼接到 URL 中，例如： ``` var url = "submit.php?name=John&age=18"; xmlhttp.open("GET", url, true); xmlhttp.send(); ``` 以上就是使用原生 Ajax 进行提交的实例详解。需要注意的是，原生 Ajax 还需要处理一些兼容性和安全性问题，例如 IE6、7 下不能并发多个 Ajax 请求，跨域请求需要使用 JSONP 或设置 CORS 等。因此，如果条件允许，建议使用现代的 JavaScript 框架或库来简化 Ajax 的操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值