JS AJAX---AJAX简介

news/2024/7/19 15:10:38 标签: ajax, js, web
webkit-tap-highlight-color: rgba(0, 0, 0, 0);">

AJAX是开发者的梦想,因为你能够:

  • 不刷新页面更新网页
  • 在页面加载后从服务器请求数据
  • 在页面加载后从服务器接收数据
  • 在后台向服务器发送数据

AJAX实例:

HTML页面

<!DOCTYPE html>
<html>
<body>
<!--<div>用来显示来自服务器的信息
<button>调用函数(当他被点击)
-->
<div id="demo">
	<h2> 让 AJAX 更改这段文本 </h2>
	<button type="button" onclick="loadDOC()" >更改文本</button>
</div>

<script>
//该函数从web 服务器请求数据并显示它
function loadDoc() {
	var xhttp = new XMLHttprequest();
	xhttp.onreadystatechange = function(){
		if (this.readyState == 4 && this.status == 200) {
			document.getElementById("demo").innerHTML = this.responseText;
		}
	};
	xhttp.open("GET" , "ajax_info.txt" ,true);
	xhttp.send();
}
</script>
</body>
</html>

什么是AJAX?

AJAX = Asynchronous JavaScript And XML

  • AJAX 并非编程语言
  • AJAX 仅仅组合了:
    • 浏览器内建的XMLHttpRequest 对象(从服务器请求数据)
    • JavaScript 和HTML DOM (显示和使用数据)

Ajax 是一个令人误导的名称。Ajax 应用程序可能使用 XML 来传输数据,但将数据作为纯文本或 JSON 文本传输也同样常见。

Ajax 允许通过与场景后面的 Web 服务器交换数据来异步更新网页。这意味着可以更新网页的部分,而不需要重新加载整个页面。

AJAX 如何工作

在这里插入图片描述

  1. 网页中发生一个事件(页面加载、按钮点击)
  2. 由JS 创建 XMLHttpRequest对象
  3. XMLHttpRequest对象向Web 服务器发送请求
  4. 服务器处理该请求
  5. 服务器将响应发送回网页
  6. 由JS读取响应
  7. 由JS执行正确的动作 (比如更新页面)

http://www.niftyadmin.cn/n/553262.html

相关文章

递归实现N级目录

// data var menuList [{Name: 1级1,id: 1},{Name: 1级2,id: 2,},{Name: 1级1-1,id: 3,parent: 1},{Name: 1级2-1,id: 4,parent: 2},{Name: 好多级,id: 5,parent: 3,},{Name: 好多级2,id: 6,parent: 5,} ]; function sonMenu(obj, arr) {var child []for (var i 0; i &l…

JS AJAX--- XMLHttp

Ajax的核心是 XMLHttpRequest对象 XMLHttpRequest对象 所有现代浏览器都支持XMLHttpRequest对象 XMLHttpRequest 对象用于同幕后服务器交换数据。 这意味着可以更新网页的部分&#xff0c;而不需要重新加载整个页面。 创建 XMLHttpRequest 对象 所有现代浏览器&#xff08;C…

如何文件操作

今日内容 1.什么是文件 2.为何用文件 3.如何用文件 4.文件操作补 5.常用方法 6.文件内指针的移动 7.with的使用 4. 文件操作 4.1 主模式 r:只读模式L&#xff08;默认&#xff09;当文件不存在时&#xff0c;会报错当文件存在时&#xff0c;文件指针指向文件的开头w:只写模式当…

JS AJAX---请求

XMLHttpRequest对象用于同服务器交换数据 向服务器发送请求 如需向服务器发送请求&#xff0c;我们使用 XMLHTTPRequest 对象的open&#xff08;&#xff09;和 send&#xff08;&#xff09;方法&#xff1a; xhttp.open("GET" ,"ajax_info.txt",true);…

PL/SQL 训练06--字符串处理

现在需要做一个任务调度&#xff0c;请大家设计&#xff0c;满足以下需求&#xff08;1&#xff09;任务可配置&#xff0c;比如可以配置PKG方法TEST_PROCEDURE(:1,:2...)&#xff0c;可以是任意多个入参的方法&#xff0c;也可以没有入参&#xff08;2&#xff09;每个方法的实…

JS AJAX ---响应

AJAX - 服务器响应 onreadtstatechange属性 readyState 属性存留 XMLHttpRequest 的状态。 onreadystatechange 属性定义当 readyState 发生变化时执行的函数。 status 属性和 statusText 属性存有 XMLHttpRequest 对象的状态。 每当 readyState 发生变化时就会调用 onrea…

L2-007 家庭房产 (25 分) (并查集)

链接&#xff1a;https://pintia.cn/problem-sets/994805046380707840/problems/994805068539215872 题目&#xff1a; 给定每个人的家庭成员和其自己名下的房产&#xff0c;请你统计出每个家庭的人口数、人均房产面积及房产套数。 输入格式&#xff1a; 输入第一行给出一个正整…

JS AJAX--- XML文件

AJAX 可用于同 XML文件进行交互式通信 AJAX XML 实例 下面的例子演示网页如何通过 AJAX 从 XML 文件读取信息&#xff1a; 当用户点击“获取 CD 信息”按钮时&#xff0c;执行 loadDoc() 函数。loadDoc() 函数创建 XMLHttpRequest 对象&#xff0c;添加当服务器响应就绪时执行…