首页 / AJAX / ajax的基础知识你会多少？ajax应用的基础实例解析

ajax的基础知识你会多少？ajax应用的基础实例解析

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了ajax的基础知识你会多少？ajax应用的基础实例解析，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2372字，纯文字阅读大概需要4分钟。

内容图文

本篇文章主要的讲述了关于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('Microsoft.XMLHTTP');
                        }                        //调用ajax对象的open方法，传入的三个参数分别是：数据请求的方式，请求的地址，是否异步。
                        xhr.open('get','1.txt',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应用的基础实例解析的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的ajax的基础知识你会多少？ajax应用的基础实例解析全部内容，希望文章能够帮你解决ajax的基础知识你会多少？ajax应用的基础实例解析所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/284806.html

来源：【匿名】