[JavaScript][AJAX]封装好的AJAX工具类

身披白袍

于 2017-10-04 00:12:08 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/shenpibaipao/article/details/78156965

版权

网站|服务器|网络|通信同时被 2 个专栏收录

41 篇文章 1 订阅

订阅专栏

前端|JavaScript|Node.js

11 篇文章 0 订阅

订阅专栏

>简介

跟JQuery的AJAX方法相比，某种意义上还是有差距的。不过好处就在于不需要另外学习JQuery和部署JQuery，就能通过原生的JavaScript语句，基于Java面向对象的编程习惯完成这套AJAX发送和获取数据的流程。

PS:至于怎么利用JavaScript实现面向对象编程，可以看这里：http://blog.csdn.net/shenpibaipao/article/details/78154470

当然，如果只是想简单地使用、并希望利用原生JavaScript做到JQuery式的简短，可以利用回调接口的方法去封装，详细见：http://blog.csdn.net/shenpibaipao/article/details/78160994

>AJAX工具类的获取

具体代码见此：

https://gitee.com/shenpibaipao/codes/vxajibsqf7ry358tol6cg16

直接复制，到本地黏贴到一个空白的.js文件里就行。

>如何使用？

在<head>里，在你的js代码前加上：

<script src=".相对地址/你的AJAXScript.js" type="text/javascript" charset="utf-8"></script>

然后就可以直接通过new的方法获取相应的实例，并进行发送的操作了。

已封装两个实例：

XmlAJAX 对应的获取响应的方式为 responseXML;
MsgAJAX 对应的获取相应的方式为 responseText；

API:

1.发送每种实例对应两种发送方法，即post(url,value)和get(url)。其中，发送传参与Html传参模式相同，如post("/as.jsp","age=7&sex=boy")；如果是get方法，则为get("/as.jsp?age=7&sex=boy")。

2.需要判断服务器是否正确返回了数据isReady();

3.获取服务器返回数据的方法为getData()；

没有什么太复杂的API，总共就三种方法。日后再扩充。

>一个使用的例子

每隔一秒向一个servlet请求xml：

<html>
<head>
    <title>AJAXtest</title>
    <script src="js/AJAXScript.js" type="text/javascript" charset="utf-8"></script>//0.引入该AJAXjs类
    <script>//编写你自己的脚本
        var xmlAjax = new XmlAJAX();//1.创建实例
        function showTime(){
            xmlAjax.get("/testServlet");//2.向指定的url获取一个xml文件(此处没有传递地址栏参数值)
            if(xmlAjax.isReady()){//3.判断数据是否到来
                var xml=xmlAjax.getData();//3.获取数据
                var text=xml.getElementsByTagName("name")[0].childNodes[0].nodeValue;//4.解析xml(收到xml才需要解析)
                document.getElementById("result").innerHTML = text;//5.使用数据
            }
            setTimeout("showTime()",1000);
        }
    </script>
</head>
<body οnlοad="showTime()">
<div class="container">
    <div class="row clearfix">
        <div id="result">
            结果显示区
        </div>
    </div>
</div>
</body>
</html>

Servlet如下：

@WebServlet(name = "Servlet")
public class Servlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/xml;charset=UTF-8");
        response.setHeader("Cache-control", "no-cache");
        try{
            PrintWriter out = response.getWriter();
            String xml="<?xml version='1.0' encoding='utf-8'?><user><name>ges</name><pwd>fes</pwd></user>";
            out.write(xml);
        }catch (Exception e){
            e.printStackTrace();
        }
    }
}

还可以到这里看看：[JavaScript][AJAX]Servlet与AJAX引擎互发XML并解析

身披白袍

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[JavaScript][AJAX]封装好的AJAX工具类

封装好的AJAX实用类。跟JQuery的AJAX方法相比，某种意义上还是有差距的。不过好处就在于不需要另外学习JQuery和部署JQuery，就能通过原生的JavaScript语句，基于Java面向对象的编程习惯完成这套AJAX发送和获取数据的流程。
复制链接

扫一扫

专栏目录