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

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

ajax xml http javascript

0 人点赞