AJAX简介与应用——学习周记10

最新推荐文章于 2024-07-21 17:13:47 发布
最新推荐文章于 2024-07-21 17:13:47 发布
阅读量224 收藏
点赞数 1
分类专栏： AJAX 文章标签： ajax 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54919878/article/details/116752112
版权

AJAX

AJAX简介

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

<!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

AJAX工作原理

2

AJAX应用

  • 运用 XHTML+CSS 来表达资讯；
  • 运用 JavaScript 操作 DOM（Document Object Model）来执行动态效果；
  • 运用 XML 和 XSLT 操作资料;
  • 运用 XMLHttpRequest 或新的 Fetch API 与网页服务器进行异步资料交换；
  • 注意：AJAX 与 Flash、Silverlight 和 Java Applet 等 RIA 技术是有区分的。

GET/POST

GET

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
  var xmlhttp;
  if (window.XMLHttpRequest)
  {
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    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/demo_get2.php?fname=Henry&lname=Ford",true);
  xmlhttp.send();
}
</script>
</head>
<body>

<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
 
</body>
</html>

POST

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
  var xmlhttp;
  if (window.XMLHttpRequest)
  {
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
  xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  xmlhttp.send("fname=Henry&lname=Ford");
}
</script>
</head>
<body>

<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
 
</body>
</html>

小栗子

当用户在文本框中键入内容时，使用 XMLHttp：

<html>
<head>
<script type="text/javascript">

var xmlHttp=null;

function showHint(str)
{
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML="";
  return;
  }
try
  {// Firefox, Opera 8.0+, Safari, IE7
  xmlHttp=new XMLHttpRequest();
  }
catch(e)
  {// Old IE
  try
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  catch(e)
    {
    alert ("Your browser does not support XMLHTTP!");
    return;  
    }
  }
var url="/ajax/gethint.asp?q=" + str;
url=url+"&sid="+Math.random();
xmlHttp.open("GET",url,false);
xmlHttp.send(null);
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
</script> 
</head>
<body><form> 
First Name:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form><p>Suggestions: <span id="txtHint"></span></p> </body>
</html>

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

★好啦~AJAX的实验操作请期待下一篇丰富有趣的内容吧★
AJAX实例操作-学习周记11

！喜欢的话不要忘记【一键三连】哦！撒花撒花~

咸盐月饼
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
学习周记8——AJAX
qq_48999927的博客
05-20 225
实验三：输入城市，查找该城市的天气 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title> <script src="https://cdn.
第十一周学习周记——初学AJAX
jix_Hu的博客
06-14 317
第十一周学习周记前言一、AJAX简介二、AJAX工作原理三、天气预报1. 代码2. 运行结果总结 前言 上一周通过三个实验巩固了JSON，这一周将学习新的知识：AJAX。 一、AJAX简介 AJAX=Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），是一种使用现有标准的新方法，其最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容，不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。 二、AJAX
学习周记 AJAX
m0_47087071的博客
06-17 138
AJAX 是开发者的梦想，因为您能够： 不刷新页面更新网页 在页面加载后从服务器请求数据 在页面加载后从服务器接收数据 在后台向服务器发送数据
信息管理创新实践课学习周记 第十三周
Dddd1_2345的博客
06-03 118
AJAXAJAXAJAX 实例解析GET&POSTGETPOST AJAX AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。 AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。 AJAX 实例解析 上面的 AJAX 应用程序包含一个 div 和
第十二周学习周记——进一步学习AJAX
jix_Hu的博客
06-14 191
第十二周学习周记前言一、AJAX实例二、创建XMLHttpRequest对象1. XMLHttpRequest对象2. 创建XMLHttpRequest对象总结 前言 上一周初步学习了AJAX，这一周将继续学习AJAX。 一、AJAX实例 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function loadXMLDoc() { var xmlhttp;
JavaScript学习总结之JS、AJAX应用
10-22
主要介绍了JavaScript学习总结JS AJAX应用 的相关资料,需要的朋友可以参考下
Ajax应用——三级联动
12-04
1. Ajax应用——三级联动: 内容:首选选择省份,市会无刷新更新,选择市,区可以无刷新更新。 要求:提供用户添加省市区功能,以便测试
谷歌浏览器插件—— Ajax Interceptor
03-16
**Ajax Interceptor：深入理解与应用** Ajax Interceptor 是一款专为谷歌浏览器（Chrome）设计的插件，它允许开发者在Ajax请求发送后和响应返回前进行干预，从而实现对AJAX请求数据的修改。这款插件对于前端开发、...
掌握Ajax，第1部分:Ajax简介
02-04
本文的作者是一位Ajax专家，他演示了这些技术如何协同工作——从总体概述到细节的讨论——使高效的Web开发成为现实。他还揭开了Ajax核心概念的神秘面纱，包括XMLHttpRequest对象。五年前，如果不知道XML，您就是一只...
Ajax学习日记(1)
DR.马 的博客
11-04 229
Ajax = Asynchronous Javascript and XML 异步JS和XMLAjax用于局部刷新页面AJAX的 XMLHttpRequest 对象很重要                   语法： variable = new XMLHttpRequest();具体步骤     创建   XHR对象 发送XHR请求 .open .send varia
JS学习日记--ajax
weixin_42149770的博客
02-05 183
一、Ajax及其使用 1、什么是Ajax Ajax全称：Asynchronnuw JavaScript And XML 是一种异步加载数据的技术 可以通过使用Ajax实现页面的局部刷新 说白了就是可以不用刷新页面就可以从服务器取得数据并局部更新页面的技术，可以使页面更灵活 2、Ajax的使用 Ajax的核心对象：XMLHttpRequest GET 目的：从服务器取得数据。特点：数据放在ur...
Ajax的学习心得
lxz2018173805的博客
06-24 593
Ajax是什么？ AJAX 是一种客户端 Web 开发技术，用于生成交互式 Web 应用程序。AJAX 是一种开发应用程序的方法，它结合了下面的功能，使用 JavaScript 将它们组合在一起 1.基于 XHTML 和 CSS 标准的演示 2.通过文档对象模型与页面交互 3.与 XML 和 XSLT 的数据交换 4.使用 XML HTTP 请求进行异步数据检索。 AJAX的主要用途是什么? Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax
【.NET全栈】ASP.NET开发Web应用——AJAX开发技术
JosieBook
07-18 998
AJAX技术是这几年中出现的较为热闹的技术。大多数的Web开发者都已经关注，或正在使用AJAX。AJAX全称是Asynchironous JavaScript and XML。中文称为异步JavaScript和XML。AJAX本身不能称为一门技术、语言或者软件。它是由多种技术组合，这些技术存在了很多年，现在借助于AJAX组合，称为一种新的开发模式。认识ASP.NET AJAXASP.NET AJAX服务器扩展ASP.NET AJAX服务器端控件扩展。
使用AJAX发起一个异步请求，从【api_endpoint】获取数据，并在成功时更新页面上的【target_element】
xixixixixixixi21的博客
07-18 254
在Web开发中，使用AJAX（Asynchronous JavaScript and XML，异步JavaScript和XML）可以实现在不刷新整个页面的情况下，向服务器发送请求并获取数据。// 发送请求xhr.send();在这个例子中，onload事件会在请求完成且成功时触发，然后我们处理返回的数据并更新指定的HTML元素内容。
如何学习Spark：糙快猛的大数据之旅
一个7年大数据开发工程师的碎碎念
07-19 3326
回顾我从零开始学习大数据的journey，我深深体会到"糙快猛"学习方法的重要性。在Spark这样复杂而强大的技术面前，我们不应该被完美主义所束缚。相反，我们应该勇于尝试，在实践中学习，在错误中成长。记住，当我们面对看似不可能的挑战时，要保持那份"可把我牛逼坏了，让我叉会腰儿"的自信和决心。每一次你解决了一个棘手的数据问题，优化了一个复杂的查询，或者部署了一个高性能的Spark应用，你都在向着成为大数据专家的目标迈进一步。在这个数据驱动的时代，Spark的学习之旅永无止境。
Ajax学习笔记
最新发布
2301_79614379的博客
07-21 763
定义：asyn和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为，而无需刻意地链式调用Promise。概念：在async函数内，使用await关键字取代then函数，等待获取Promise对象成功状态的结果值。定义：执行代码和收集异步任务的模型，在调用栈空闲，反复调用任务队列里回调函数的执行机制，就叫事件循环。axios响应拦截器：响应回到then/catch之前，触发的拦截函数，对响应的结果统一处理。Promise本身是同步的，而then和catch回调函数是异步的。
Web开发：ASP.NET CORE前后端交互之AJAX（含基础Demo）
m0_67412019的博客
07-18 540
List result)//用[FromBody]来接收。①需要写清楚url和type（传输类型），以下url表示。return Content($"成功！的ViewData（或者ViewBag）只可以传输给。（要和前端一一对应好），用JSON传递还需要加上。// 返回示例：假设直接返回成功信息。②只能在同一个控制器+方法名传输，例如。，不能够传递给其余前端界面。①需要声明和强制转换。②后端接收也需要注明。
100道ajax面试题、练习题
2401_82471222的博客
07-17 446
答案：AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。AJAX通过XMLHttpRequest对象与服务器交换数据，并允许网页异步更新。AJAX的名称中，“Asynchronous”表示异步，“JavaScript”表示使用JavaScript脚本语言，“and XML”则表示数据交换格式可以是XML，但实际上也可以是JSON等其他格式。
jQuery教程：Ajax应用与表格操作
本章将深入学习如何使用jQuery进行Ajax交互，处理表格功能以及应用常见的jQuery插件。 1. jQuery的Ajax应用 Ajax是Asynchronous JavaScript and XML的缩写，允许网页在不重新加载整个页面的情况下与服务器交换数据...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值