javascript之json+ajax技术实现网页异步更新

最新推荐文章于 2024-07-15 15:46:09 发布

罗隽_jerChuan

最新推荐文章于 2024-07-15 15:46:09 发布

阅读量1.4k

点赞数 1

本文链接：https://blog.csdn.net/qq_31678809/article/details/77116448

版权

ajax 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

json

2 篇文章 0 订阅

订阅专栏

什么是 AJAX ？
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。
我们通过输入数据到表单，只要失去焦点，表单就会调用script，进行提交，返回后台信息
这里写图片描述

具体的ajax底层技术和json技术在我的另外两个博客：

ajax的技术原理：http://blog.csdn.net/qq_31678809/article/details/75258919
JavaScript语言基础—(十一)写属于自己的对象 json技术：http://blog.csdn.net/qq_31678809/article/details/71272747
我们通过json技术把ajax的方法封装到一个类中进行调用这样能够让代码更加简洁，一目了然

如何实现ajax？

我们通过XMLHttpRequest调用open()方法，调用后台，从后台发送status信息，然后接收回后台信息即可反映到客户端
然后依据发送方式来写发送方法
get方式：

function Ajax() {
        this.get = function(url, succ, failure) {
            var xhr = null;
            if (window.XMLHttpRequest) {//看看浏览器中是否存在该对象---IE7之后，火狐，google等支持
                xhr = new XMLHttpRequest();
            } else {//IE6及一下版本，及大部分旧版本的浏览器
                xhr = new ActiveObject("Microisoft.XMLHttp");
            }
            //2设置通讯方式地址
            xhr.open("GET", url, true);//参数1：发送方式，参数2：url 参数3：是否异步
            //3设置访问成功后的js对象(回调函数)
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {//要用200的返回信息
                        var txt = xhr.responseText;
                        succ(txt);
                    } else {
                        failure(xhr.status);
                    }
                }
            };
            //4发送动作的触发
            xhr.send(null);//GET方式时参数为null。如果要向后台提交参数则写在url地址中。
        };

post方式：

this.post = function(url, succ, failure, name) {
            //1.创建一个ajax对象
            var xhr = null;
            if (window.XMLHttpRequest) {//看看浏览器中是否存在该对象---IE7之后，火狐，google等支持
                xhr = new XMLHttpRequest();
            } else {//IE6及一下版本，及大部分旧版本的浏览器
                xhr = new ActiveObject("Microisoft.XMLHttp");
            }
            //2设置通讯方式地址
            xhr.open("POST", url, true);
            //3设置访问成功后的js对象(回调函数)
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {//要用200的返回信息
                        var txt = xhr.responseText;
                        succ(txt);
                    } else {
                        failure(xhr.status);
                    }
                }
            };
            //post方式需要设置响应头
            xhr.setRequestHeader("Content-Type",
                    "application/x-www-form-urlencoded");

            //4发送动作的触发
            xhr.send("name=" + name);//Post方式时，向后台提交的参数写在函数的参数中

        };

接下来只要把onblur方法写好：

function check1(obj) {
        var name = obj.value;
        var url = "<c:url value='/OneServlet?name=" + name + "'/>";
        var ajax = new Ajax();
        ajax.get(url, succ, failure);
        function succ(txt) {
            document.getElementById("div1").innerHTML = txt;
        }
        function failure(txt) {
            document.getElementById("div1").innerHTML = txt;
        }
    }
    function check2(obj) {
        var name = obj.value;
        var url = "<c:url value='/OneServlet?'/>";
        var ajax = new Ajax();
        ajax.post(url, succ, failure, name);
        function succ(txt) {
            document.getElementById("div2").innerHTML = txt;
        }
        function failure(txt) {
            document.getElementById("div2").innerHTML = txt;
        }
    }

客户端显示网页界面：

<body>
    <h3>封装后的ajax</h3>

    <form action="#" method="post">
        <h3>Get方式的ajax技术演示</h3>
        Name:<input type="text" name="name" onblur="check1(this);" />
        <div id="div1"></div>
        <br />
        <h3>Post方式的ajax技术演示</h3>
        Name:<input type="text" name="name" onblur="check2(this);" />
        <div id="div2"></div>
        <br /> pwd:<input type="text" name="pwd" /><br /> email:<input
            type="text" name="email" /><br /> <input type="submit" value="注册" />
    </form>
</body>
</html>

罗隽_jerChuan

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
javascript之json+ajax技术实现网页异步更新

什么是 AJAX ？ AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。有很多使用 AJAX 的应用程序案例：新浪微博、Google
复制链接

扫一扫