如何使用ajax

最新推荐文章于 2024-05-08 22:25:31 发布

咚咚--梅

最新推荐文章于 2024-05-08 22:25:31 发布

阅读量1.2w

点赞数 14

文章标签： ajax

本文链接：https://blog.csdn.net/qq_37252374/article/details/64926672

版权

1、ajax的概念
ajax在2005年推出，到至今一直被广泛的是使用，ajax不是语言，而是一门能不需要重新加载页面，能够部分更新页面的一种强大的技术，它包含了七中技术分别是javascript、xml、xstl、xhtml、css、dom、xmlhttprequest、相当于以一种粘合剂。
现在ajax被用于页面上的例子：新浪的博客、谷歌上的地图、瀑布流、各大银行的股票动向等等。
2、ajax的优点
ajax能在页面上广泛的使用，当然是尤其的好处优点的地方。
（1）、不需要刷新得到动态数据（银行网页的股票）
（2）、界面美观，给用户的体验好
（3）、对数据库的操作
（4）、部分刷新页面
（5）、返回类型多：字符串、json、xml、html
3、ajax的运用
例子：无刷新用户名的验证
（1）、创建ajax的xmlhttprequest对象
xmlhttprequest对象存在兼容性的问题，所以需要对ajax的xmlhttprequest对象要进行兼容处理。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onload=function(){
                function $(id){
                    return document.getElementById(id);
                }
                /*1.创建ajax对象*/
                function getxml(){
                    var oAjax;
                    if(window.XMLHttpRequest){
                        oAjax=new XMLHttpRequest();//对主流浏览器的兼容：谷歌、火狐、欧鹏、IE7//
                    }
                    else{
                        oAjax=new ActiveXObject('Microsoft.XMLHTTP');//对IE7以下的版本进行处理//
                    }
                    return oAjax;
                }


            }
        </script>
    </head>
    <body>
        <form action="checkName.php" method="get">
            用户名：<input type="text" name="" id="usename" value="" /><input type="button" name="bnt" id="bnt" value="验证" /><span id="inf"></span><br />
            密码：<input type="password" id="pw"/>
            <input type="submit" value="提交"/>
        </form>
    </body>
</html>

（2）、链接服务器

                $('bnt').onclick=function(){
                    var xhr=getxml();//申明变量xhr装着getxml（）后台返回的数据经过处理，进行dom的节点插入
            var url='/checkName.php?time='+new Date()+'&name='+$('usename').value;//路径，解决缓存使用时间戳，没刷新一次路劲都不一样
                    xhr.open('GET',url,true);//链接服务器，使用get方式传输数据，上次是使用get获取数据，第一个参数是获取或传输数据的方式，第二个是处理文件的路径，第三个同步或异步，默认情况下是true。
                    xhr.send(null);//get方式发送请求send（）里面写null或空。如果是post方式，那send（）里面要传输的内容


                        }
                    }
                }

（4）、请求状态

xhr.onreadystatechange=function(){//请求状态
                        if(xhr.readyState==4){//当返回的数据的状态是4时
                            if(xhr.status==200){//其的状态码是200解析完成时
                                $('inf').innerHTML=xhr.responseText;//将其的返回来的数据插入span标签里面
                            }

咚咚--梅

关注

14
点赞
踩
36

收藏

觉得还不错? 一键收藏
2
评论
如何使用ajax

1、ajax的概念 ajax在2005年推出，到至今一直被广泛的是使用，ajax不是语言，而是一门能不需要重新加载页面，能够部分更新页面的一种强大的技术，它包含了七中技术分别是javascript、xml、xstl、xhtml、css、dom、xmlhttprequest、相当于以一种粘合剂。现在ajax被用于页面上的例子：新浪的博客、谷歌上的地图、瀑布流、各大银行的股票动向等等。 2、aj
复制链接

扫一扫