【AJAX】对于AJAX 解析已经XMLHttpRequest对象对于异步的操作等等在项目中的体验

简介: 【AJAX】对于AJAX 解析已经XMLHttpRequest对象对于异步的操作等等在项目中的体验

AJAX 解析

<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>

AJAX=异步JavaScript和XML。
AJAX不是一种新的编程语言,而是一种使用现有标准的新方法。
AJAX的最大优点是它可以与服务器交换数据并更新某些网页,而无需重新加载整个网页。
AJAX不需要任何浏览器插件,但用户需要允许JavaScript在浏览器上执行。
XMLHttpRequest只是实现Ajax的一种方法。

XMLHttpRequest对象

在这里插入图片描述

所有现代浏览器都支持XMLHttpRequest对象(IE5和IE6使用ActiveX对象)。
XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个页面的情况下更新页面的某些部分。

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

创建XMLHttpRequest对象
所有现代浏览器(IE7+、Firefox、Chrome、Safari和Opera)都内置XMLHttpRequest对象。
创建XMLHttpRequest对象的语法:
variable=new XMLHttpRequest();
旧版本的Internet Explorer(IE5和IE6)使用ActiveX对象:
variable=新ActiveXObject(“Microsoft.XMLHTTP”);
为了应对所有现代浏览器,包括IE5和IE6,请检查浏览器是否支持XMLHttpRequest对象。如果支持,请创建XMLHttpRequest对象。如果没有,请创建ActiveX对象:

var xmlhttp;
if (window.XMLHttpRequest)
{
    xmlhttp=new XMLHttpRequest();
}
else
{
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

回调函数是作为参数传递给另一个函数的函数。
如果的网站上有多个AJAX任务,应该编写一个用于创建XMLHttpRequest对象的标准函数,并为每个AJAX任务调用该函数。
函数调用应包括URL和发生onreadystatechange事件时要执行的任务(每个调用可能不同)

IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码。IE6, IE5 浏览器执行代码

xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);
xmlhttp.send();

与POST相比,GET更简单、更快,并且可以在大多数情况下使用。
但是,在以下情况下使用POST请求:
不想使用缓存文件(更新服务器上的文件或数据库)
向服务器发送大量数据(POST没有数据限制)
当发送包含未知字符的用户输入时,POST比GET更稳定可靠

异步

AJAX指的是异步JavaScript和XML。
如果XMLHttpRequest对象要在AJAX中使用,其open()方法的异步参数必须设置为true:

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();

xmlhttp.open(“GET”,“ajax_test.html”,true);
发送异步请求是web开发人员向前迈出的一大步。在服务器上执行的许多任务都很耗时。这可能会导致应用程序在AJAX出现之前挂起或停止。
使用AJAX,JavaScript不需要等待服务器的响应,而是:
等待服务器响应时执行其他脚本
准备就绪后处理响应

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
    txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;

我们不建议使用async=false,但对于一些小请求,这是可以的。
请记住,JavaScript将等待服务器响应准备好继续。如果服务器忙或慢,应用程序将挂起或停止。
注意:当使用async=false时,请不要编写onreadystatechange函数-只需将代码放在send()语句之后:

当请求发送到服务器时,我们需要执行一些基于响应的任务。
只要readyState发生更改,就会触发onreadystatechange事件。
readyState属性存储XMLHttpRequest的状态信息。

function loadXMLDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
    myFunction(this);
    }
  };
  xhttp.open("GET", "cd_catalog.xml", true);
  xhttp.send();
}

当用户单击上面的“获取我最喜爱的CD”按钮时,将执行loadXMLDoc()函数。
loadXMLDoc()函数创建XMLHttpRequest对象,在服务器响应就绪时添加要执行的函数,并将请求发送到服务器。
当服务器响应就绪时,它将构建一个HTML表,从XML文件中提取节点(元素),最后使用填充了id=“demo”XML数据的表元素

相关文章
|
12月前
|
安全 虚拟化
在数字化时代,网络项目的重要性日益凸显。本文从前期准备、方案内容和注意事项三个方面,详细解析了如何撰写一个优质高效的网络项目实施方案,帮助企业和用户实现更好的体验和竞争力
在数字化时代,网络项目的重要性日益凸显。本文从前期准备、方案内容和注意事项三个方面,详细解析了如何撰写一个优质高效的网络项目实施方案,帮助企业和用户实现更好的体验和竞争力。通过具体案例,展示了方案的制定和实施过程,强调了目标明确、技术先进、计划周密、风险可控和预算合理的重要性。
268 5
|
10月前
|
监控 安全 数据可视化
哪些项目适合采用BOT+EPC模式?深度解析
2分钟了解什么是BOT+EPC项目管理模式以及该模式适用于哪些类型的项目。
791 1
哪些项目适合采用BOT+EPC模式?深度解析
|
5月前
|
XML JSON 前端开发
XMLHttpRequest细节介绍与Ajax实践
XHR和AJAX结合起来,就能在不刷新页面的情况下,实现数据的神不知鬼不觉的交换,让用户体验如同吃了润滑油的滑梯。简洁而高效,这就是现代web开发的一个闪光点。
91 12
|
8月前
|
消息中间件 JavaScript 前端开发
最细最有条理解析:事件循环(消息循环)是什么?为什么JS需要异步
度一教育的袁进老师谈到他的理解:单线程是异步产生的原因,事件循环是异步的实现方式。 本质是因为渲染进程因为计算机图形学的限制,只能是单线程。所以需要“异步”这个技术思想来解决页面阻塞的问题,而“事件循环”是实现“异步”这个技术思想的最主要的技术手段。 但事件循环并不是全部的技术手段,比如Promise,虽然受事件循环管理,但是如果没有事件循环,单一Promise依然能实现异步不是吗? 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您
|
10月前
|
数据可视化 项目管理
项目计划与进度跟踪:甘特图的强大功能解析
甘特图是现代项目管理中不可或缺的工具,通过时间线和任务条直观展示项目进度,支持任务分解、依赖关系管理和进度跟踪。结合板栗看板,可实现任务可视化与实时协作,提升团队效率。定期更新甘特图并灵活应对变化,确保项目顺利推进。
|
10月前
|
算法 搜索推荐 Java
【潜意识Java】深度解析黑马项目《苍穹外卖》与蓝桥杯算法的结合问题
本文探讨了如何将算法学习与实际项目相结合,以提升编程竞赛中的解题能力。通过《苍穹外卖》项目,介绍了订单配送路径规划(基于动态规划解决旅行商问题)和商品推荐系统(基于贪心算法)。这些实例不仅展示了算法在实际业务中的应用,还帮助读者更好地准备蓝桥杯等编程竞赛。结合具体代码实现和解析,文章详细说明了如何运用算法优化项目功能,提高解决问题的能力。
313 6
|
数据处理 Python
深入探索:Python中的并发编程新纪元——协程与异步函数解析
深入探索:Python中的并发编程新纪元——协程与异步函数解析
139 3
|
项目管理
项目里程碑定义及重要性解析
项目里程碑是项目管理中的重要工具,用于将复杂项目分解为更小的阶段,明确目标和时间节点,提高管理效率。项目管理软件可辅助创建、跟踪和管理里程碑,确保项目按计划进行。通过设定里程碑,团队可以更好地协调资源,减少不必要的重复工作,确保项目顺利推进。
435 0
|
存储 JavaScript 前端开发
Vue.js项目中全面解析定义全局变量的常用方法与技巧
Vue.js项目中全面解析定义全局变量的常用方法与技巧
224 0
|
UED 开发者
哇塞!Uno Platform 数据绑定超全技巧大揭秘!从基础绑定到高级转换,优化性能让你的开发如虎添翼
【8月更文挑战第31天】在开发过程中,数据绑定是连接数据模型与用户界面的关键环节,可实现数据自动更新。Uno Platform 提供了简洁高效的数据绑定方式,使属性变化时 UI 自动同步更新。通过示例展示了基本绑定方法及使用 `Converter` 转换数据的高级技巧,如将年龄转换为格式化字符串。此外,还可利用 `BindingMode.OneTime` 提升性能。掌握这些技巧能显著提高开发效率并优化用户体验。
224 0

推荐镜像

更多
  • DNS
  • 下一篇
    开通oss服务