前端重新学习（11）javascipt之ajax代码实例（2）

最新推荐文章于 2021-06-20 19:09:35 发布

夏草v

最新推荐文章于 2021-06-20 19:09:35 发布

阅读量212

点赞数

分类专栏：原生JavaScript

本文链接：https://blog.csdn.net/qq_16546829/article/details/81746228

版权

原生JavaScript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

本文主要讲述在Ajax请求json的实例

实例和源码将在wamp64上面进行测试，编辑器使用sublime3

详情见https://study.163.com/course/courseMain.htm?courseId=1004570051

Ajax常规4步

ajax.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Ajax 2 - 请求JSON数据</title>
</head>
<body>
	<button id="button1">请求单个用户</button>
	<button id="button2">请求所有用户（遍历）</button>

	<br><br>

	<h1>单个用户</h1>
	<div id="user"></div>

	<h1>所有用户</h1>
	<div id="users"></div>

	<script>
		document.getElementById('button1').addEventListener('click',loadUser);
		document.getElementById('button2').addEventListener('click',loadUsers);

		function loadUser(){
			var xhr = new XMLHttpRequest();
			xhr.open("GET","user.json",true);
			xhr.onload = function(){
				if (this.status == 200) {
					console.log(this.responseText);//测试输出第一个数据
					var user = JSON.parse(this.responseText);//数据解析
					console.log(user.name);//测试解析后输出第一个数据属性

					var output = '';
					output += 
						'<ul>'+
							'<li>'+user.id+'</li>'+
							'<li>'+user.name+'</li>'+
							'<li>'+user.email+'</li>'+
						'</ul>';
					;
					document.getElementById('user').innerHTML = output;
				}
			}

			xhr.send();
		}

		function loadUsers(){
			var xhr = new XMLHttpRequest();
			xhr.open("GET","user.json",true);
			xhr.onload = function(){
				if (this.status == 200) {
					var users = JSON.parse(this.responseText);
					var output = '';

					// 遍历数组
					for(var i in users){
						output += 
							'<ul>'+
								'<li>'+users[i].id+'</li>'+
								'<li>'+users[i].name+'</li>'+
								'<li>'+users[i].email+'</li>'+
							'</ul>';
						;
					}
					document.getElementById('users').innerHTML = output;
				}
			}

			xhr.send();
		}

	</script>
</body>
</html>

user.json

[
	{
		"id":1,
		"name":"Henry",
		"email":"henry@gmail.com"
	},
	{
		"id":2,
		"name":"Bucky",
		"email":"bucky@gmail.com"
	},
	{
		"id":3,
		"name":"Hemiah",
		"email":"27732357@qq.com"
	}
]

IE浏览器Ajax的兼容性

XMLHttpRequest 对象

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

解决方案

                var xhr;
                if (window.XMLHttpRequest)
                {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xhr=new XMLHttpRequest();
                }
                else
                {// code for IE6, IE5
                    xhr=new ActiveXObject("Microsoft.XMLHTTP");
                }

同一个URL只有一个结果（资源更新时无法及时更新到最新资源）

在IE浏览器中, 如果通过Ajax发送GET请求, 那么IE浏览器认为

同一个URL只有一个结果

解决方案

console.log(Math.random());
console.log(new Date().getTime());
  
//利用动态url解决此问题 
xhr.open("GET","05-ajax-get.txt?t="+(new Date().getTime()),true);

夏草v

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端重新学习（11）javascipt之ajax代码实例（2）

本文主要讲述在Ajax请求json的实例实例和源码将在wamp64上面进行测试，编辑器使用sublime3详情见https://study.163.com/course/courseMain.htm?courseId=1004570051Ajax常规4步 ajax.html&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&l...
复制链接

扫一扫