ajax入门

86520093

2019-11-18

不会给后端发送请求。只会复制粘贴，原理啥的也不了解，现在的项目是用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请求的优缺点

ajax xmlhttp