Heim > Web-Frontend > js-Tutorial > Wie viele Grundkenntnisse in Ajax verfügen Sie? Grundlegende Instanzanalyse einer Ajax-Anwendung

Wie viele Grundkenntnisse in Ajax verfügen Sie? Grundlegende Instanzanalyse einer Ajax-Anwendung

寻∝梦
Freigeben: 2018-09-10 14:15:00
Original
829 Leute haben es durchsucht

In diesem Artikel geht es hauptsächlich um das Einführungskapitel zu Ajax. Haben Sie wirklich alle Grundkenntnisse über Ajax gelernt? Nachdem Sie diesen Artikel gelesen haben, können Sie die Bedeutung von Ajax grob verstehen. Lesen Sie jetzt diesen Artikel

Erster Artikel zum Einstieg in Ajax

文章简述:
这篇文章主要介绍ajax的是什么,ajax的作用,和ajax请求的流程,并且在文章的分析一个ajax的一个简单例子。
Nach dem Login kopieren

Das Konzept von Ajax

这里主要是介绍我对于ajax的个人理解,如果想了解ajax的详细概念,可以点击下面的链接:
Nach dem Login kopieren

Detailliert Ajax-Konzept

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

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

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

Ajax-Anfrageprozess

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

Der Ausführungsprozess von Ajax ähnelt dem obigen Prozess.

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

Analysieren Sie ein einfaches Ajax-Programm.

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

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>
Nach dem Login kopieren

Dieser Artikel endet hier (wenn Sie mehr sehen möchten, besuchen Sie die Spalte AJAX-Benutzerhandbuch der chinesischen PHP-Website, um mehr zu erfahren), dort Wenn Sie Fragen haben, können Sie unten eine Nachricht hinterlassen.

Das obige ist der detaillierte Inhalt vonWie viele Grundkenntnisse in Ajax verfügen Sie? Grundlegende Instanzanalyse einer Ajax-Anwendung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage