前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【AJAX】对于AJAX 解析已经XMLHttpRequest对象对于异步的操作等等在项目中的体验

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

作者头像
上进小菜猪
发布2022-12-24 09:12:13
1.6K0
发布2022-12-24 09:12:13
举报

AJAX 解析

代码语言:javascript
复制
<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用于在后台与服务器交换数据。这意味着可以在不重新加载整个页面的情况下更新页面的某些部分。

代码语言:javascript
复制
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对象:

代码语言:javascript
复制
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 浏览器执行代码

代码语言:javascript
复制
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:

代码语言:javascript
复制
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不需要等待服务器的响应,而是: 等待服务器响应时执行其他脚本 准备就绪后处理响应

代码语言: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的状态信息。

代码语言:javascript
复制
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数据的表元素

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2022-12-23,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • AJAX 解析
  • XMLHttpRequest对象
  • 异步
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档