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

本文涉及的产品
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 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++类与对象深度解析(一):从抽象到实践的全面入门指南
48 8
|
1月前
|
前端开发 JavaScript API
惊呆了!学会AJAX与Fetch API,你的Python Web项目瞬间高大上!
在Web开发领域,AJAX与Fetch API是提升交互体验的关键技术。AJAX(Asynchronous JavaScript and XML)作为异步通信的先驱,通过XMLHttpRequest对象实现了局部页面更新,提升了应用流畅度。Fetch API则以更现代、简洁的方式处理HTTP请求,基于Promises提供了丰富的功能。当与Python Web框架(如Django、Flask)结合时,这两者能显著增强应用的响应速度和用户体验,使项目更加高效、高大上。
50 2
|
1月前
|
Python
深入解析 Python 中的对象创建与初始化:__new__ 与 __init__ 方法
深入解析 Python 中的对象创建与初始化:__new__ 与 __init__ 方法
17 1
|
1月前
|
前端开发 JavaScript API
告别繁琐!AJAX与Fetch API,让你的前后端沟通畅通无阻,项目效率飙升!
在Web开发中,前后端的顺畅沟通至关重要。传统方法常需频繁刷新页面,影响体验与效率。AJAX和Fetch API的出现简化了这一过程。AJAX利用XMLHttpRequest实现局部页面更新,提升用户体验;Fetch API则以更简洁的语法和强大的功能,进一步优化异步请求处理。两者均能显著提高开发效率,简化代码结构,让项目迭代更快速。拥抱这些技术,让Web开发之路更加顺畅。
26 0
|
2月前
|
设计模式 存储 人工智能
深度解析Unity游戏开发:从零构建可扩展与可维护的游戏架构,让你的游戏项目在模块化设计、脚本对象运用及状态模式处理中焕发新生,实现高效迭代与团队协作的完美平衡之路
【9月更文挑战第1天】游戏开发中的架构设计是项目成功的关键。良好的架构能提升开发效率并确保项目的长期可维护性和可扩展性。在使用Unity引擎时,合理的架构尤为重要。本文探讨了如何在Unity中实现可扩展且易维护的游戏架构,包括模块化设计、使用脚本对象管理数据、应用设计模式(如状态模式)及采用MVC/MVVM架构模式。通过这些方法,可以显著提高开发效率和游戏质量。例如,模块化设计将游戏拆分为独立模块。
180 3
|
2月前
|
JavaScript 前端开发 API
Javaweb之javascript的BOM对象的详细解析
BOM为Web开发提供了强大的API,允许开发者与浏览器进行深入的交互。合理使用BOM中的对象和方法,可以极大地增强Web应用的功能性和用户体验。需要注意的是,BOM的某些特征可能会在不同浏览器中表现不一致,因此在开发过程中需要进行仔细的测试和兼容性处理。通过掌握BOM,开发者能够制作出更丰富、更动态、更交互性的JavaWeb应用。
31 1
|
3月前
|
存储 JavaScript 前端开发
一文带你深度解析:JavaScript中对象与数组的威力究竟有多大?
一文带你深度解析:JavaScript中对象与数组的威力究竟有多大?
|
4月前
|
SQL 安全 数据库
Ruby on Rails 数据库迁移操作深度解析
【7月更文挑战第19天】Rails 的数据库迁移功能是一个强大的工具,它帮助开发者以版本控制的方式管理数据库结构的变更。通过遵循最佳实践,并合理利用 Rails 提供的迁移命令和方法,我们可以更加高效、安全地管理数据库结构,确保应用的稳定性和可扩展性。
|
4月前
|
前端开发 JavaScript API
惊呆了!学会AJAX与Fetch API,你的Python Web项目瞬间高大上!
【7月更文挑战第15天】AJAX和Fetch API是Web开发中的关键工具,用于异步前后端交互。AJAX借助XMLHttpRequest实现页面局部更新,而Fetch API是现代的、基于Promise的HTTP请求接口,提供更强大功能和简洁语法。结合Python Web框架如Django或Flask,利用这两者能创造无缝体验,提升项目性能和用户体验。学习并应用这些技术,将使你的Web应用焕发新生。**
50 5
|
4月前
|
前端开发 JavaScript API
告别繁琐!AJAX与Fetch API,让你的前后端沟通畅通无阻,项目效率飙升!
【7月更文挑战第15天】AJAX与Fetch API革新了前后端通信,实现页面局部更新,提高用户体验。AJAX利用XMLHttpRequest异步交互,Fetch API则基于Promises,语法简洁。两者均简化了HTTP请求处理,加速项目开发。通过示例代码展示了如何使用它们进行数据请求与响应处理。拥抱这些技术,让Web应用更流畅,开发更高效!
44 2

推荐镜像

更多