code source de la démo ajax-js tutoriel-php.cn

code source de la démo ajax

韦小宝

Libérer： 2018-03-12 10:54:50

original

1794 Les gens l'ont consulté

Cet article présente le fonctionnement de base d'ajax en JavaScript natif. Le contenu est relativement basique. Les étudiants qui n'ont pas une compréhension claire d'ajax en JavaScript peuvent y jeter un œil à nouveau pour apprendre le fonctionnement d'ajax en JavaScript. . , pas tellement de bêtises, regardons ensemble !
Les fichiers html suivants doivent être ouverts dans un environnement serveur.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ceshi</title>
    <script type="text/javascript" src="ajax.js"></script>

</head>
<body>
    帐号：<input type="text" id="username">
    密码：<input type="password" id="password">
    <input type="button" value="提交" onclick="checkname()">
</body>

<script type="text/javascript">
    function checkname() {
        var username = document.getElementById(&#39;username&#39;).value;
        //1、创建对象
        var xhr = new XMLHttpRequest();
        //2、连接服务器
        xhr.open(&#39;GET&#39;,&#39;name.json&#39;,true);//json数据内容如下图3

        //3、向服务器发送请求
        xhr.send(null);
        //4、请求完成，响应就绪
        xhr.onreadystatechange=function(){
        if (xhr.readyState==4) {
            if (xhr.status==200) {//表示已经获取到文件。
                var str = JSON.parse(xhr.responseText);//将json数据转换成js数组对    
                   alert(str);//输出结果如图4 。               
            }else{
                alert(xhr.statusText)//如果没有获取name.json的数据，即服务器找不到这个文件，则执行该段代码。输出框会显示“Not Found”。如果是alert(xhr.status)，则显示404；
                }

            }
        }
        };


</script>
</html>

Copier après la connexion

code source de la démo ajax

<script type="text/javascript">
    function checkname() {
        var username = document.getElementById(&#39;username&#39;).value;
        var boo = false;
        //1、创建对象
        var xhr = new XMLHttpRequest();
        //2、连接服务器
        xhr.open(&#39;GET&#39;,&#39;name1.json&#39;,true);
        //3、向服务器发送请求
        xhr.send(null);
        //4、请求完成，响应就绪
        xhr.onreadystatechange=function(){
        if (xhr.readyState==4) {
            if (xhr.status==200) {
                var str = JSON.parse(xhr.responseText);//将json数据转换成js数组对象
                alert(str)                  
             for (var i = 0; i < str.length; i++) {
                if (username == str[i]) {
                    boo = true;
                }
             }//判断用户名是否已经存在，即输入的用户名是否存在与json文件中。
            if (boo) {
               alert("用户民已存在");
            } else {
                alert("用户名可以使用")
            }

            }
        }
        };
     ｝；
</script>

Copier après la connexion

La technologie ajax est une technologie qui peut apporter l'expérience des applications de bureau aux applications Web. Cet effet d'expérience consiste principalement à échanger des données sans actualiser la page et à modifier le contenu sans actualiser la page. Il y a vraiment de nombreuses fonctions d'ajax, et il y en a tellement que je n'arrive pas à finir de parler

Articles ajax connexes recommandés :

Analyse des instances Ajax et PHP

Conseils pour utiliser jq pour envoyer plusieurs ajax puis exécuter des rappels

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!