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

2017-10-04 19:54:56来源:CSDN作者:Shenpibaipao人点击

分享

>AJAX工具类的获取

具体代码见此:

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


>如何使用?

在<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 onload="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();        }    }}


最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台