How much basic knowledge of ajax do you know? Basic instance analysis of ajax application

寻∝梦

Release： 2018-09-10 14:15:00

Original

829 people have browsed it

This article mainly talks about the introductory chapter about ajax. Have you really learned all the basic knowledge about ajax? After reading this article, you can roughly understand the meaning of ajax. Let’s read this article now

The first article of getting started with Ajax

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

Copy after login

The concept of Ajax

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

Copy after login

Detailed ajax Concept

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

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

ajax的优点：
    1.节省用户的操作，时间，提高用户体验，减少数据请求。
    2.传输获取数据。（想看更多就到PHP中文网栏目中学习）

Copy after login

Ajax request process

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

Copy after login

The execution process of ajax is similar to the above process.

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

Copy after login

Analyze a simple ajax program.

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

Copy after login

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>

Copy after login

This article ends here (if you want to see more, go to the PHP Chinese website AJAX User Manual column to learn), there are If you have any questions, you can leave a message below.

The above is the detailed content of How much basic knowledge of ajax do you know? Basic instance analysis of ajax application. For more information, please follow other related articles on the PHP Chinese website!