JavaWEB笔记12 Javascript中的原生AJAX

最新推荐文章于 2022-06-10 11:34:12 发布

RainOnTheMoon

最新推荐文章于 2022-06-10 11:34:12 发布

阅读量240

点赞数

分类专栏：笔记文章标签： ajax java js

本文链接：https://blog.youkuaiyun.com/weixin_46702804/article/details/119765872

版权

笔记专栏收录该内容

35 篇文章

订阅专栏

JavaWEB笔记12 Javascript中的原生AJAX

文章目录

JavaWEB笔记12 Javascript中的原生AJAX

一.AJAX概念：

AJAX （Asynchronous JavaScript and XML） ：异步的 JavaScript 和 XML，AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

XMLHttpRequest是AJAX的基础：
XMLHttpRequest 对象：所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

二.原生AJAX：

JS的原生AJAX书写分为以下几步：

1.创建 XMLHttpRequest 对象：

var xmlhttp = new XMLHttpRequest();

2.向服务器发送请求：

使用 XMLHttpRequest 对象的 open() 和 send() 方法，将请求发送至服务器：

xmlhttp.open(methods,url,async);
xmlhttp.send();

方法详解：

方法	参数详解
xmlhttp.open(methods,url,async)	规定请求的类型、URL 以及是否异步处理请求

method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）

方法	参数详解
xmlhttp.send(string)	将请求发送到服务器：注意string仅用于 POST 请求

关于选取请求方式是GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用，然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

3.获得服务器中的响应：

使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性科研获得对应服务器中的响应：

xmlhttp.onreadystatechange = function() {
	if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				//写AJAX得到服务器响应后的操作
			}
		}

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务，当readyState等于4且状态为200时，表示响应已就绪，因此作为判断条件，if判断体中书写的代码是得到服务器响应之后的操作

4.解析json数据并渲染界面：

这一步中的代码实现依赖于上面的服务器已成功得到响应，具体步骤可以看成是以下几步：
1）先将json字符串换成对象：JSON.parse(jsonStr)
2）再将对应的信息依次取出，如：json.data.日期.date
3）通过AJAX可以动态返回对应的值，注意拼串生成对应的文件路径，以防覆盖

//获取响应的json字符串：
var jsonStr = xmlhttp.responseText;
//打印到控制台进行查看：
console.log(jsonStr);
//解析JSON数据展示到页面上：
var jsonObj = JSON.parse(jsonStr);
var text = jsonObj.data.yesterday.date;
document.getElementById("myh").innerHTML=text;

三.AJAX模板案例：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1 id="myh"></h1>
	</body>
	<script type="text/javascript">
	//创建 XMLHttpRequest 对象
	var xmlhttp = new XMLHttpRequest();
	//请求服务器
	xmlhttp.open("GET","http://wthrcdn.etouch.cn/weather_mini?city=西安", true);
	//发送请求
	xmlhttp.send();
	xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
			//获取响应的json字符串
			var jsonStr = xmlhttp.responseText;
			//打印到控制台
			console.log(jsonStr);
			//解析JSON数据展示到页面上
			var jsonObj = JSON.parse(jsonStr);
			var text = jsonObj.data.yesterday.date;
			document.getElementById("myh").innerHTML=text;
			}
		}
	</script>
</html>

效果：
在这里插入图片描述