Ajax 데모 소스 코드-JS 튜토리얼-php.cn

Ajax 데모 소스 코드

韦小宝

풀어 주다： 2018-03-12 10:54:50

원래의

1794명이 탐색했습니다.

이 글에서는 네이티브 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>

로그인 후 복사

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>

로그인 후 복사

ajax 기술은 데스크톱 애플리케이션의 경험을 웹 애플리케이션으로 가져올 수 있는 기술입니다. 이러한 경험 효과는 주로 페이지를 새로 고치지 않고 데이터를 교환하고 페이지를 새로 고치지 않고 콘텐츠를 변경하는 것입니다. ajax의 기능은 정말 많고 너무 많아서 이야기를 끝낼 수 없습니다

추천 관련 ajax 기사:

Ajax 및 PHP 예제 분석

jq를 사용하여 여러 개 보내기 ajax를 사용한 다음 콜백을 실행하세요. 팁

위 내용은 Ajax 데모 소스 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!