【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数据的表元素

相关文章
|
前端开发 JavaScript Java
使用Ajax进行异步交互:提升Java Web应用的用户体验
【4月更文挑战第3天】Ajax技术在Web开发中提升UX,通过与服务器异步交互实现页面局部更新,无需完整刷新。核心组件包括XMLHttpRequest、JavaScript、HTML/CSS及服务器端脚本。在Java Web应用中,可使用原生JavaScript或框架如jQuery、AngularJS实现Ajax请求。Ajax减少页面刷新,实现实时数据更新,即时表单验证和动态UI,显著改善用户体验,是现代Web开发不可或缺的一部分。
327 0
|
前端开发 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)结合时,这两者能显著增强应用的响应速度和用户体验,使项目更加高效、高大上。
284 2
|
前端开发 JavaScript Java
Ajax进行异步交互:提升Java Web应用的用户体验
Ajax 技术允许在不重载整个页面的情况下与服务器异步交换数据,通过局部更新页面内容,极大提升了 Java Web 应用的响应速度和用户体验。本文介绍 Ajax 的基本原理及其实现方式,包括使用 XMLHttpRequest 对象发送请求、处理响应数据,并在 Java Web 应用中集成 Ajax。此外,还探讨了 Ajax 如何通过减少页面刷新、实时数据更新等功能改善用户体验。
305 3
|
前端开发 JavaScript API
惊呆了!学会AJAX与Fetch API,你的Python Web项目瞬间高大上!
【7月更文挑战第15天】AJAX和Fetch API是Web开发中的关键工具,用于异步前后端交互。AJAX借助XMLHttpRequest实现页面局部更新,而Fetch API是现代的、基于Promise的HTTP请求接口,提供更强大功能和简洁语法。结合Python Web框架如Django或Flask,利用这两者能创造无缝体验,提升项目性能和用户体验。学习并应用这些技术,将使你的Web应用焕发新生。**
305 5
|
前端开发 JavaScript API
告别繁琐!AJAX与Fetch API,让你的前后端沟通畅通无阻,项目效率飙升!
在Web开发中,前后端的顺畅沟通至关重要。传统方法常需频繁刷新页面,影响体验与效率。AJAX和Fetch API的出现简化了这一过程。AJAX利用XMLHttpRequest实现局部页面更新,提升用户体验;Fetch API则以更简洁的语法和强大的功能,进一步优化异步请求处理。两者均能显著提高开发效率,简化代码结构,让项目迭代更快速。拥抱这些技术,让Web开发之路更加顺畅。
232 0
|
前端开发 JavaScript API
告别繁琐!AJAX与Fetch API,让你的前后端沟通畅通无阻,项目效率飙升!
【7月更文挑战第15天】AJAX与Fetch API革新了前后端通信,实现页面局部更新,提高用户体验。AJAX利用XMLHttpRequest异步交互,Fetch API则基于Promises,语法简洁。两者均简化了HTTP请求处理,加速项目开发。通过示例代码展示了如何使用它们进行数据请求与响应处理。拥抱这些技术,让Web应用更流畅,开发更高效!
333 2
|
前端开发 JavaScript API
惊天揭秘!AJAX与Fetch API如何让你的前后端交互秒变‘神级操作’!
【7月更文挑战第15天】在Web开发中,AJAX和Fetch API革新了前后端交互,告别了表单提交带来的页面刷新。AJAX利用XMLHttpRequest实现部分页面更新,开启无刷新时代;Fetch API作为现代替代,以其简洁和Promise支持简化异步操作。从AJAX的先驱地位到Fetch API的进化,两者提升了Web应用的性能和用户体验,成为现代开发的必备技能。
376 2
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
298 5
|
前端开发 Python
Flask之ajax操作示例
Flask之ajax操作示例
175 2
|
XML JSON 前端开发
学习Ajax使用异步对象发送请求
Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种用于创建更好、更快以及交互性更强的Web应用程序的技术。
205 3