博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

ajax实例代码及效果

Posted on 2016-11-24 06:27  简单是书  阅读(65)  评论(0编辑  收藏  举报

ps:不足之处,请大家多多指教
以下html文件都要服务器环境下打开。

<!DOCTYPE html>
<html lang="en">
<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('username').value;
        //1、创建对象
        var xhr = new XMLHttpRequest();
        //2、连接服务器
        xhr.open('GET','name.json',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>

3.png

4.png

<script type="text/javascript">
    function checkname() {
        var username = document.getElementById('username').value;
        var boo = false;
        //1、创建对象
        var xhr = new XMLHttpRequest();
        //2、连接服务器
        xhr.open('GET','name1.json',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>