AJAX学习笔记(一、初识)

简介: 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】、https://www.runoob.com/ajax/ajax-tutorial.html

【2】、https://www.w3cschool.cn/ajax/ajax-example.html


目录
相关文章
|
7月前
|
JSON 前端开发 JavaScript
AJAX 课程学习笔记三
AJAX 课程学习笔记三
|
7月前
|
JSON 缓存 前端开发
AJAX 课程学习笔记二
AJAX 课程学习笔记二
|
7月前
|
XML 前端开发 JavaScript
AJAX 课程学习笔记一
AJAX 课程学习笔记一
|
前端开发
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤3
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤3
73 0
|
前端开发
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤1
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤1
63 0
|
前端开发
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤4
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤4
60 0
|
前端开发
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤2
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤2
52 0
|
XML JSON 前端开发
【Spring MVC学习笔记 六】SpringMVC框架整合AJAX完成局部刷新
【Spring MVC学习笔记 六】SpringMVC框架整合AJAX完成局部刷新
100 0
|
JSON 前端开发 JavaScript
Ajax学习笔记
Ajax学习笔记
|
JSON 前端开发 数据格式
SpringMVC学习笔记(获取参数,传递参数——关于前后端传参交互的总结、from表单、Ajax数据提交))(下)
SpringMVC学习笔记(获取参数,传递参数——关于前后端传参交互的总结、from表单、Ajax数据提交))(下)
119 0