ajax入门

2024年5月11日 215次阅读 来源: 喆喆

不会给后端发送要求。只会复制粘贴，道理啥的也不相识，如今的项目是用axios，然则axios是以Ajax+Promise为基本的，所以先学一波Ajax。
Ajax能够做到部分革新，无需从新革新页面，具有更好的用户体验。

Ajax有两种要求体式格局——POST和GET，模板以下：

GET要求

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
// 按钮点击事宜触发的函数
function loadXMLDoc()
{
    var xmlhttp;
    // XMLHttpRequest对象是现今一切AJAX和Web 2.0应用程序的手艺基本
    if (window.XMLHttpRequest)
    {
        // IE7+, Firefox, Chrome, Opera, Safari 浏览器实行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器实行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    // 每当 readyState 属性转变时，就会挪用该函数
    xmlhttp.onreadystatechange=function()
    {
        // readyState存储着XMLHttpRequest的状况，从0-4
        // 0——要求未初始化（还没有挪用open()）
        // 1——服务器衔接已竖立（还没有挪用send()）
        // 2——要求已吸收
        // 3——要求处置惩罚中
        // 4——要求已完成，且相应已停当
        // status值的诠释
        // 1XX 信息相应类，示意吸收到要求而且继承处置惩罚
        // 2XX 处置惩罚胜利相应类，示意行动被胜利吸收、明白和接收
        // 3XX 重定向相应类，示意为了完成指定的行动，必需接收进一步处置惩罚
        // 4XX 客户端毛病，客户要求包括语法毛病或者是不能准确实行
        // 5XX 服务器毛病，服务器不能准确实行一个准确的要求
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    }
    // open(method, url, async) 划定要求的范例、URL以及是不是异步处置惩罚要求
    // {Param} method:要求的范例；GET或POST
    // {Param} url:文件在服务器上的位置
    // {Param} async:true——异步；false——同步。不引荐运用false，如果用了false，就不需要写onreadystatechange()函数
    xmlhttp.open("GET","/try/ajax/demo_get.php?num=" + Math.random(),true);

    // send(string) 将要求发送到服务器
    // {Param} string 仅用于POST要求
    xmlhttp.send();
}
</script>
</head>
<body>
    <button type="button" onclick="loadXMLDoc()">要求数据</button>
    <div id="myDiv"></div>
</body>
</html>

POST要求

<!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("POST","/try/ajax/demo_post2.php",true);
    // setRequestHeader(header,value) 向要求增加HTTP头
    // {Param} header 划定头的称号
    // {Param} value 划定头的值
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    // 发送的数据
    xmlhttp.send("fname=Henry&lname=Ford");
}
</script>
</head>
    <body>
    <button type="button" onclick="loadXMLDoc()">要求数据</button>
    <div id="myDiv"></div>
</body>
</html>

两种要求的优缺点：
GET更简朴、更快；
POST能够发送大批数据，越发稳固牢靠。
详细的优缺点能够看后面的链接，内里还详讲了三次握手：GET和POST要求的优缺点

    原文作者：喆喆
    原文地址: https://segmentfault.com/a/1190000019115145
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞