Ajax 理解，使用，记录

最新推荐文章于 2022-05-08 19:36:20 发布

原创最新推荐文章于 2022-05-08 19:36:20 发布 · 277 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #javascript #前端交互 #前后端交互

学习-复习专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了AJAX（异步JavaScript和XML）的概念、实现方法及应用案例。包括如何创建XMLHttpRequest对象进行GET和POST请求，解释了这两种请求方式的区别，并通过一个具体的HTML示例展示了如何使用AJAX动态加载网页内容。

ajax== Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

XMLHttpRequest 对象
创建xhr对象，

var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

包括对 IE5 和 IE6的兼容。

2.XHR请求
XMLHttpRequest 对象的 open() 和 send() 方法：

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

url：包括get(), post()
关于get和post的区别：与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

3.XHR响应
XMLHttpRequest 对象的 responseText 或 responseXML 属性。

实例

<!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>

4.关于使用问题

ajax通常情况下用于同一域下

结果：

注：关于请求的文件，txt就是文本文件，html可以请求，php也可以，xml也行，jsp文件我试了，请求到了里面html的部分。

5.XHRreadystate

每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。

实例：

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

好，大概就是这些。