AJAX学习笔记（一、初识）
AJAX以前搞过，不过是走马观花地看一下，但现在前后端分离多会用到这个技术，所以再仔细地再过一遍。
简介
AJAX—— Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
.Ajax 不是一种新的编程语言，而是一种现有标准下用于创建更好更快以及交互性更强的Web应用程序的技术。。
.AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
.AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
应用
AJAX 使用XHTML作为内容，CSS使用文档对象模型和JavaScript进行动态内容显示。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。使用AJAX，当点击提交时，JavaScript将向服务器发出请求，解释结果并更新当前屏幕。
当客户端程序在后台请求来自服务器的信息时，用户可以继续使用该应用程序。
数据驱动而不是页面驱动。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{ document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
参考：
【1】、https://www.runoob.com/ajax/ajax-tutorial.html
【2】、https://www.w3cschool.cn/ajax/ajax-example.html
文章来源: blog.csdn.net，作者：三分恶，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/sinat_40770656/article/details/95088262
- 点赞
- 收藏
- 关注作者
评论（0）