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请求的优缺点

相关推荐

mmywcoco / 0评论 2020-06-06