> 웹 프론트엔드 > JS 튜토리얼 > 당신은 Ajax에 대한 기본 지식을 얼마나 알고 있나요? Ajax 애플리케이션의 기본 인스턴스 분석

당신은 Ajax에 대한 기본 지식을 얼마나 알고 있나요? Ajax 애플리케이션의 기본 인스턴스 분석

寻∝梦
풀어 주다: 2018-09-10 14:15:00
원래의
829명이 탐색했습니다.

이 글은 주로 ajax에 대한 소개 장을 다루고 있습니다. 실제로 ajax에 대한 기본 지식을 모두 배웠나요? 이 글을 읽고 나면 Ajax의 의미를 대략적으로 이해할 수 있을 것입니다. 지금 이 글을 읽어보세요

Ajax 시작하기 첫 번째 글

文章简述:
这篇文章主要介绍ajax的是什么,ajax的作用,和ajax请求的流程,并且在文章的分析一个ajax的一个简单例子。
로그인 후 복사

Ajax 개념

这里主要是介绍我对于ajax的个人理解,如果想了解ajax的详细概念,可以点击下面的链接:
로그인 후 복사

자세한 ajax 개념

ajax:
    全称是异步的JavaScript和xml,主要针对部分网页进行无刷新更新数据。

ajax的作用:
    主要是用于数据的交互。

ajax的优点:
    1.节省用户的操作,时间,提高用户体验,减少数据请求。
    2.传输获取数据。(想看更多就到PHP中文网栏目中学习)
로그인 후 복사

Ajax 요청 과정

在我们的日常浏览网页的时候,一般会有如下几个步骤
    1.打开浏览器
    2.在浏览器上输入地址
    3.提交请求
    4.等待服务器返回内容
로그인 후 복사

ajax 실행 과정은 위 과정과 같은 의미입니다.

    1.创建一个ajax对象----->XMLHttpRequest(),类同与打开浏览器。
    2.调用ajax对象的open()方法,---->在浏览器中输入要访问的网址。
    3.调用ajax对象的send()方法,---->提交。
    4.等待服务器返回数据。
로그인 후 복사

간단한 Ajax 프로그램을 분석해 보세요.

该程序主要实现的功能是:
    在页面中定义一个按钮,当点击按钮时,将实现无刷新的从后台获取一个文本的信息,并将它输出在浏览器中。   
    程序的源码:
로그인 후 복사

ajax.html

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>ajax的第一例子</title>

            <script>
                window.onload=function(){
                    var oBtn=document.getElementById("btn");
                    oBtn.onclick=function(){
                        var xhr=null;                        //为了解决兼容性问题,先判断是否存在XMLHttpRequest对象
                        if(window.XMLHttpRequest){                            //如果存在就直接创建该对象
                            xhr=new XMLHttpRequest();
                        }else{                            //如果不存在,就使用ActiveXObject插件创建Microsoft.XMLHTTP对象。
                            xhr=new ActiveXObject(&#39;Microsoft.XMLHTTP&#39;);
                        }                        //调用ajax对象的open方法,传入的三个参数分别是:数据请求的方式,请求的地址,是否异步。
                        xhr.open(&#39;get&#39;,&#39;1.txt&#39;,true);                        //提交
                        xhr.send();                        //等待服务器返回数据
                        xhr.onreadystatechange = function(){
                            if(xhr.readyState==4){                                if(xhr.status==200)
                                {
                                    alert(xhr.responseText);
                                }                                else{
                                    alert("出错了,错误信息是:"+xhr.status);
                                }
                            }
                        }
                    }

                }            </script>
        </head>**重点内容**        <body>
            <input type="button" value="按钮" id="btn" />
        </body>
    </html>
로그인 후 복사

이 기사는 여기에서 끝납니다. (자세한 내용을 보려면 PHP 중국어 웹사이트AJAX 사용자 매뉴얼 컬럼을 방문하세요.) 궁금한 점이 있으면 아래에 메시지를 남겨주세요.

위 내용은 당신은 Ajax에 대한 기본 지식을 얼마나 알고 있나요? Ajax 애플리케이션의 기본 인스턴스 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿