AJAX

最新推荐文章于 2025-03-16 10:00:00 发布

happyqiangsir

最新推荐文章于 2025-03-16 10:00:00 发布

阅读量225

点赞数

CC 4.0 BY-SA版权

分类专栏： vue.js

本文链接：https://blog.youkuaiyun.com/strideahead/article/details/81279373

vue.js 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了AJAX的基础概念，展示了如何使用XMLHttpRequest对象与服务器进行异步数据交换，并提供了简单的示例代码，包括如何通过JavaScript操作DOM来显示服务器响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

AJAX是基于现有的Internet标准，并且联合使用它们：

XMLHttpRequest 对象 (异步的与服务器交换数据)
JavaScript/DOM (信息显示/交互)
CSS (给数据定义样式)
XML (作为转换数据的格式)

AJAX应用程序与浏览器和平台无关的！

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
   var xmlhttp;
   if (window.XMLHttpRequest)
   {
       // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
       xmlhttp=new XMLHttpRequest();
   }
   else
   {
       // IE6, IE5 浏览器执行代码
       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   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();
}
</script>
</head>
<body>

<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>

</body>
</html>

XMLHttpRequest 对象用于和服务器交换数据。

方法	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。 method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）
send(string)	将请求发送到服务器。 string：仅用于 POST 请求

方法

描述

open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）

send(string)

将请求发送到服务器。

string：仅用于 POST 请求

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

AJAX - 服务器响应

服务器响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

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;