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

上进小菜猪

已于 2022-12-23 23:56:42 修改

阅读量120

点赞数

分类专栏：开发大纲文章标签： ajax safari javascript

于 2022-12-23 23:53:45 首次发布

本文链接：https://blog.csdn.net/m0_71592416/article/details/128425439

版权

开发大纲专栏收录该内容

33 篇文章 0 订阅

订阅专栏

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