JavaScript Ajax_ajax javascript csdn-优快云博客

本文链接：https://blog.youkuaiyun.com/UserPython/article/details/105499386

Ajax

Ajax的简介
Ajax的基本用法
Ajax函数封装
缓存问题
读取JSON数据
了解GET和POST请求的区别
- GET 请求
- POST 请求
了解同步和异步的区别
- 同步
- 异步

Ajax的简介

什么是Ajax?
Ajax = Asynchronous JavaScript and XML（异步的JavaScript和XML）
Ajax可以通过在后台与服务器进行少量数据交换，使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新

传统的网页（不使用Ajax）如果需要更新内容，必需重载整个网页面

Ajax的基本用法

创建XMLHttpRequest对象

语法：var myAjax = new XMLHttpRequest();

向服务器发送请求

使用open()和send()方法

open(method，url, async)：规定请求的类型、URL以及是否异步处理请求
1、method：请求的类型：GET或POST
2、url：文件在服务器上的位置
3、sync：true（异步）或false（同步）
send(string)：string：仅用于POST请求

服务器响应

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

responseText属性：返回字符串形式的响应
responseXML属性：如果来自服务器的响应是XML，而且需要作为XML对象进行解析，请使用responseXML属性

onreadystatechange事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当readyState改变时，就会触发onreadystatechange事件

XMLHTTPRequest对象的三个重要的属性：

1、onreadystatechange：存储一个函数（或函数名），每当readyState属性改变时，就会调用该（事件）函数(类似onclick事件一样，当点击了就会执行该事件的函数)

2、readyState：存有XMLHttpRequest的状态。从0到4发生变化
     0：请求未初始化
     1：服务器连接已建立
     2：请求已接收
     3：请求处理中
     4：请求已完成，且响应已就绪

3、states：200：表示“OK”；404：表示未找到页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax的基本用法</title>
</head>
<body>
    <input type="button" id="btn" value="Test按钮">
    <script>
        var btn = document.getElementById("btn");
            btn.onclick = function(){
                // 1、创建Ajax对象
                var myAjax = new XMLHttpRequest();
                // alert(myAjax);

                // 2、连接服务器
                // open(方法， 文件路径，异步传输)
                myAjax.open("GET", "test.txt", true);
                
                // 3、发送请求
                myAjax.send(null);

                //4、接收返回的数据(当readyState改变时，就会执行onreadystatechange的事件)
                myAjax.onreadystatechange = function(){
                    if(myAjax.readyState == 4){
                        if(myAjax.status == 200){
                            alert("成功" + myAjax.responseText);
                        }else{
                            alert("失败" + "\n" + myAjax.statusText);
                        }
                    }
                }
            }
    </script>
</body>
</html>

Ajax函数封装

将上述四步步骤封装成一个函数，方便使用

// 封装Ajax函数
function ajax(url, funSucc, funFaild){
    var xhr = new XMLHttpRequest();

    xhr.open("GET", url, "true");

    xhr.send(null);

    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                funSucc(xhr.responseText);
            }else{
                // 判断是否有第三个参数，如果没有则不执行报错
                if(funFaild){
                    funFaild(xhr.statusText);
                }
            }
        }
    }
}

使用如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax函数封装</title>
    <style type="text/css">
        #div1{
            background: orange;
            width: 300px;
            height: 200px;
        }
    </style>
    <script src="./ajax.js"></script>
</head>
<body>
    <input id = "btn" type="button" value = "测试按钮">
    <div id="div1"></div>
    <script>
        var btn = document.getElementById("btn");
        var div1 = document.getElementById("div1");
        
        btn.onclick = function(){
            ajax("test.txt", function(str){
                div1.innerHTML = str;
                }, function(faild){
                    alert(faild);
                })
        }
    </script>
</body>
</html>

缓存问题

可以在上述案例的ajax函数的url后面加上问号，再加上随机数或时间解决浏览器缓存问题；或者优化为在提前给url加上随机数或时间
如：

//加随机数
ajax("hero.txt?" + Math.random(), function(str){
                div1.innerHTML = str;
                }, function(faild){
                    alert(faild);
                })

//加时间
ajax("hero.txt?" + new Date().getTime(), function(str){
                div1.innerHTML = str;
                }, function(faild){
                    alert(faild);
                })

//提前给url加上
url = url + "?" + Math.random();
url = url + "?" + new Date().getTime();

读取JSON数据

data.json文件

{
    "name" : "张三",
    "age" : 23,
    "VIP" : "lv9",
    "other" : "JSON里不能有注释"
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax读取JSON数据</title>
    <style type="text/css">
        #div1{
            background: orange;
            width: 300px;
            height: 200px;
        }
    </style>
    <script src="./ajax.js"></script>
</head>
<body>
    <input id = "btn" type="button" value = "测试按钮">
    <div id="div1"></div>
    <script>
        var btn = document.getElementById("btn");
        var div1 = document.getElementById("div1");
        
        btn.onclick = function(){
            ajax("data.json?" + new Date().getTime(), function(str){
                // div1.innerHTML = str;
                // alert(typeof str);//读取的JSON数据为string字符串

                var jsonObj = JSON.parse(str);//将读取的字符串解析为JSON数据

                // alert(typeof jsonObj);//object
                div1.innerHTML = jsonObj["name"];

                }, function(faild){
                    alert(faild);
                })
        }
    </script>
</body>
</html>