suchen

Heim >Web-Frontend >js-Tutorial >Ajax-Demo-Quellcode

Ajax-Demo-Quellcode

韦小宝
韦小宝Original
2018-03-12 10:54:501871Durchsuche

Dieser Artikel stellt die grundlegenden Ajax-Operationen in nativem JavaScript vor. Der Inhalt ist relativ einfach. Schüler, die keine klaren Kenntnisse von Ajax in JavaScript haben, können einen Blick darauf werfen, um Ajax-Operationen in JavaScript zu erlernen. , nicht so viel Unsinn, lasst uns gemeinsam einen Blick darauf werfen!
Die folgenden HTML-Dateien müssen in einer Serverumgebung geöffnet werden. 

<!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>

Ajax-Demo-Quellcode

Ajax-Demo-Quellcode

<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>

Ajax-Technologie ist eine Technologie, die das Erlebnis von Desktop-Anwendungen auf Webanwendungen übertragen kann. Bei diesem Erlebniseffekt handelt es sich hauptsächlich um den Austausch von Daten ohne Aktualisierung der Seite und das Ändern des Inhalts ohne Aktualisierung der Seite. Es gibt wirklich viele Funktionen von Ajax, und es gibt so viele, dass ich nicht zu Ende reden kann

Empfohlene verwandte Ajax-Artikel:

Ajax- und PHP-Instanzanalyse

Tipps zur Verwendung von jq zum Senden mehrerer Ajax und anschließender Ausführung von Rückrufen

Das obige ist der detaillierte Inhalt vonAjax-Demo-Quellcode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung der Cookie-NutzungNächster Artikel：Detaillierte Erläuterung der Cookie-Nutzung

In Verbindung stehende Artikel

Mehr sehen