Rumah > Artikel > hujung hadapan web > ajax演示源码

ajax演示源码

韦小宝asal: 2018-03-12 10:54:501847semak imbas

本篇文章介绍了关于基础的原生JavaScript中的ajax操作，内容相对比较基础，对于JavaScript中ajax没够掌握清楚的同学可以再次看看学习学习JavaScript中的ajax操作，废话不那么多，我们一起来看看吧！
以下html文件都要服务器环境下打开。

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

<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技术是一种能够将桌面应用程序的体验效果带给web应用程序的技术。这种体验效果主要就是页面的无刷新数据交换以及页面无刷新改变内容。ajax的功能真的是很多，讲不完的那种多

相关ajax文章推荐：

Ajax和PHP实例分析

用jq发送多个ajax然后执行回调的小技巧

Atas ialah kandungan terperinci ajax演示源码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：cookie的用法详细讲解Artikel seterusnya：vue如何获取当前点击的元素并传值

Artikel berkaitan

Lihat lagi