首页 > web前端 > js教程 > ajax的基础知识你会多少?ajax应用的基础实例解析

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

寻∝梦
发布: 2018-09-10 14:15:00
原创
915 人浏览过

本篇文章主要的讲述了关于ajax的入门篇,关于ajax的的初级知识,你真的全会了吗?看完这篇文章你就能大致的明白ajax的意义了。现在来阅读本篇文章吧

Ajax入门第一篇

1

2

文章简述:

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

登录后复制

Ajax的概念

1

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

登录后复制

详细的ajax的概念

1

2

3

4

5

6

7

8

9

ajax:

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

 

ajax的作用:

    主要是用于数据的交互。

 

ajax的优点:

    1.节省用户的操作,时间,提高用户体验,减少数据请求。

    2.传输获取数据。(想看更多就到PHP中文网栏目中学习)

登录后复制

Ajax的请求流程

1

2

3

4

5

在我们的日常浏览网页的时候,一般会有如下几个步骤

    1.打开浏览器

    2.在浏览器上输入地址

    3.提交请求

    4.等待服务器返回内容

登录后复制

ajax的执行的流程和上述的流程有异曲同工的意思。

1

2

3

4

    1.创建一个ajax对象----->XMLHttpRequest(),类同与打开浏览器。

    2.调用ajax对象的open()方法,---->在浏览器中输入要访问的网址。

    3.调用ajax对象的send()方法,---->提交。

    4.等待服务器返回数据。

登录后复制

分析一个简单的ajax的程序。

1

2

3

该程序主要实现的功能是:

    在页面中定义一个按钮,当点击按钮时,将实现无刷新的从后台获取一个文本的信息,并将它输出在浏览器中。   

    程序的源码:

登录后复制

ajax.html

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

<!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中文网其他相关文章!

相关标签:
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板