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

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
简介: 【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数据的表元素

相关文章
|
1月前
|
存储 编译器 C语言
C++类与对象深度解析(一):从抽象到实践的全面入门指南
C++类与对象深度解析(一):从抽象到实践的全面入门指南
49 8
|
1月前
|
数据处理 Python
深入探索:Python中的并发编程新纪元——协程与异步函数解析
深入探索:Python中的并发编程新纪元——协程与异步函数解析
27 3
|
1月前
|
Python
深入解析 Python 中的对象创建与初始化:__new__ 与 __init__ 方法
深入解析 Python 中的对象创建与初始化:__new__ 与 __init__ 方法
19 1
|
2月前
|
设计模式 存储 人工智能
深度解析Unity游戏开发:从零构建可扩展与可维护的游戏架构,让你的游戏项目在模块化设计、脚本对象运用及状态模式处理中焕发新生,实现高效迭代与团队协作的完美平衡之路
【9月更文挑战第1天】游戏开发中的架构设计是项目成功的关键。良好的架构能提升开发效率并确保项目的长期可维护性和可扩展性。在使用Unity引擎时,合理的架构尤为重要。本文探讨了如何在Unity中实现可扩展且易维护的游戏架构,包括模块化设计、使用脚本对象管理数据、应用设计模式(如状态模式)及采用MVC/MVVM架构模式。通过这些方法,可以显著提高开发效率和游戏质量。例如,模块化设计将游戏拆分为独立模块。
185 3
|
2月前
|
JavaScript 前端开发 API
Javaweb之javascript的BOM对象的详细解析
BOM为Web开发提供了强大的API,允许开发者与浏览器进行深入的交互。合理使用BOM中的对象和方法,可以极大地增强Web应用的功能性和用户体验。需要注意的是,BOM的某些特征可能会在不同浏览器中表现不一致,因此在开发过程中需要进行仔细的测试和兼容性处理。通过掌握BOM,开发者能够制作出更丰富、更动态、更交互性的JavaWeb应用。
31 1
|
3月前
|
前端开发 JavaScript Java
Ajax进行异步交互:提升Java Web应用的用户体验
Ajax 技术允许在不重载整个页面的情况下与服务器异步交换数据,通过局部更新页面内容,极大提升了 Java Web 应用的响应速度和用户体验。本文介绍 Ajax 的基本原理及其实现方式,包括使用 XMLHttpRequest 对象发送请求、处理响应数据,并在 Java Web 应用中集成 Ajax。此外,还探讨了 Ajax 如何通过减少页面刷新、实时数据更新等功能改善用户体验。
73 3
|
3月前
|
存储 JavaScript 前端开发
一文带你深度解析:JavaScript中对象与数组的威力究竟有多大?
一文带你深度解析:JavaScript中对象与数组的威力究竟有多大?
|
4月前
|
SQL 安全 数据库
Ruby on Rails 数据库迁移操作深度解析
【7月更文挑战第19天】Rails 的数据库迁移功能是一个强大的工具,它帮助开发者以版本控制的方式管理数据库结构的变更。通过遵循最佳实践,并合理利用 Rails 提供的迁移命令和方法,我们可以更加高效、安全地管理数据库结构,确保应用的稳定性和可扩展性。
|
4月前
|
数据处理 Python
深入探索:Python中的并发编程新纪元——协程与异步函数解析
【7月更文挑战第15天】Python 3.5+引入的协程和异步函数革新了并发编程。协程,轻量级线程,由程序控制切换,降低开销。异步函数是协程的高级形式,允许等待异步操作。通过`asyncio`库,如示例所示,能并发执行任务,提高I/O密集型任务效率,实现并发而非并行,优化CPU利用率。理解和掌握这些工具对于构建高效网络应用至关重要。
48 6
|
4月前
|
前端开发 JavaScript API
惊天揭秘!AJAX与Fetch API如何让你的前后端交互秒变‘神级操作’!
【7月更文挑战第15天】在Web开发中,AJAX和Fetch API革新了前后端交互,告别了表单提交带来的页面刷新。AJAX利用XMLHttpRequest实现部分页面更新,开启无刷新时代;Fetch API作为现代替代,以其简洁和Promise支持简化异步操作。从AJAX的先驱地位到Fetch API的进化,两者提升了Web应用的性能和用户体验,成为现代开发的必备技能。
50 2

推荐镜像

更多