关闭

Ajax (4) ---处理请求

2858人阅读 评论(25) 收藏 举报
分类:

 上一篇文中说到请求返回的消息,可以是字符串也可以是对象,返回的字符串我们可以使用弹出框的形式将所有内容显示出来,但是还没有加工处理。下面将详细说明如何取出对象中有效信息。

 DOM文档对象模型,在JavaScript的学习中,我们只知道它是三个组成部分之一,规定文档结构,还有处理网页内容的接口和API,那时候学习的是了解功能,现在的学习是它如何实现处理内容的。


一:DOM再认识

DOM提供了文档结构化的表示,我们可以简单理解成xml文档中每个结点的元素都是DOM的一部分。而JavaScript是访问和处理DOM的语言,这就意味着,文档中元素可以结合DOM和JavaScript访问啦。

1)用于遍历XML的DOM元素方法

  • getElementById(id) 根据id获取文档中的元素
  • getElementsByTagName(name) 根据标记名返回子元素的数组
  • hasChildNodes() 判断是否有子元素
  • getAttribute(name) 获取元素的属性值

2)实例说明

xml 文件内容:

<?xml version="1.0" encoding="utf-8" ?>
<school>

  <grade>
    lishuangzhe1111
  </grade>
  
</school>

JavaScript文件内容:

var xmlDoc = xmlhttp.responseXML; //设置返回数据类型为xml document对象
var resultNode = xmlDoc.getElementsByTagName("grade");
var currentNode = null;


for (var i = 0; i < resultNode.length; i++) {
                currentNode = states[i];
                out = out + "\n-" + currentNode.childNodes[0].nodeValue; //取出当前字段的值
 }
alert(out);

如果xml文档中再套一层,那我们也就再添加一层去取。如下:

<?xml version="1.0" encoding="utf-8" ?> 
<school>
  
  <grade1>
    <name>li</name>
    <name>li</name>
    <name>li</name>
  </grade1>
  
</school>

JavaScript文件内容:

var xmlDoc = xmlhttp.responseXML; //设置返回数据类型为xml document对象
var resultNode = xmlDoc.getElementsByTagName("grade1")[0]; //将返回的对象中 标记为grade1的放在一个数组中
var retultNodes = resultNode.getElementsByTagName("name"); //获取对象中所有标记为state的元素
var currentNode = null;

for (var i = 0; i < resultNodes.length; i++) {
    currentNode = states[i];
    out = out + "\n-" + currentNode.childNodes[0].nodeValue; //取出当前字段的值
 }
alert(out);

二:请求处理详解

就是将接受到的返回信息,根据需求挑出自己想要的内容。

如下:
<script type="text/javascript">
        var xmlhttp;
        var requestType = "";

        //创建XMLHttpRequest对象
        ....

        //设置开始请求
        function startRequest(requestedList) {
            requestType = requestedList;
            createXMLHttpRequest();

            //设置回掉函数
            xmlhttp.onreadystatechange = handleStateChange;
            xmlhttp.open("GET", "XMLFile1.xml", true);
            xmlhttp.send(null);
        }

        function handleStateChange() {
            if (xmlhttp.readyState == 4) {
                if (xmlhttp.status == 200) {
                    if (requestType == "beijing") {//如果选择"beijing"将执行listbeijing()
                        listbeijing();
                    } else if (requestType == "...") {
                        ....
                    }
                }
            }
        }

        function listbeijing() {

            var xmlDoc = xmlhttp.responseXML; //设置返回数据类型为xml document对象

            var resultNode = xmlDoc.getElementsByTagName("beijing")[0]; //将返回的对象中 标记为north的放在一个数组中

            var out = "beijing:";
            var resultNodes = resultNode.getElementsByTagName("name"); //获取对象中所有标记为state的元素

            outputList("beijing:", resultNodes);

        }

        //迭代处理数组中的所有元素,
        function outputList(title, states) {
            var out = title;
            var currentNode = null;
            for (var i = 0; i < states.length; i++) {
                currentNode = states[i];
                out = out + "\n-" + currentNode.childNodes[0].nodeValue; //取出当前字段的值
            }
            alert(out);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <input type="button" name="name" value=" clickme" onclick="startRequest('beijing')" />
    </form>
</body>

xml文件内容:
<?xml version="1.0" encoding="utf-8" ?>
<school>
    <beijing>
      <name>li1</name>
      <name>li2</name>
    </beijing>

  <langfang>
    <name>shuang1</name>
    <name>shuang2</name>
  </langfang>

</school>

上面的例子,已经将服务器发送的XML消息解析出来啦,当然在实际应用时,并不会给用户弹出个提示框,而是通过其它方式显示给用户。我们已经做到了遍历XML结构,抽取所需信息的目的。

 如上所述就是对通过异步传输过来的xml document对象的处理过程。这样整个Ajax异步处理过程就完成啦。



7
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

ajax和普通请求使用spring mvc在controller中的异常统一处理

ajax和普通请求使用spring mvc在controller中的异常统一处理
  • wenfeifang
  • wenfeifang
  • 2016-12-21 16:33
  • 1963

两种关于ajax跨域请求解决方案

一、使用jsonp实现跨域请求 在前端开发这中你会发现,所有带src属性的标签都可以跨域访问其他服务器文件。jsonp实现的原理也是如此。 以jsonp的数据类型进行请求时,JQ会动态在页面中添加sc...
  • a546200350
  • a546200350
  • 2017-02-09 15:44
  • 2896

js实验2.(4)AJAX的POST请求

5、用ajax-post技术(ajaxPost.html,post.jsp)实现修改数据的功能。 实验要求: 选择输入某个id后: 当输入新的姓名并离开(onblur)时用a...
  • qq_33826977
  • qq_33826977
  • 2017-04-17 23:57
  • 356

extjs4 表单提交 和 Ajax请求 示例

表单的提交form.submit和Ajax请求里的success和failure回调函数有点区别, 表单提交后要求后台返回的必须是json字符串,且必须包含success:true 或 success...
  • yangxuan0261
  • yangxuan0261
  • 2013-09-01 01:58
  • 3615

JavaScript从入门到放弃(4)--原生的DOM操作,以及Ajax网络请求

更改DOM 选项2 选项3 选项4 $(document).ready(function() { $("#button").clic...
  • shb2058
  • shb2058
  • 2017-11-14 13:26
  • 74

Spring MVC 4 - Ajax请求

这是一个Spring MVC 4 实现Ajax 的 post请求用户信息的Demo.1.工程结构2.pom.xml文件<project xmlns="http://maven.apache.org/P...
  • jeikerxiao
  • jeikerxiao
  • 2016-12-21 16:56
  • 628

ExtJS4 ajax请求同步异步问题

今天在写代码过程中遇到一个奇怪的问题,事情是这样的,我写了一个简单的页面用来删除选中的用户,请看下面: 因为后台的servlet的代码实现了根据用户名来删除一条记录,所以我在前台的ExtJS代码里面用...
  • hu8471479
  • hu8471479
  • 2014-04-21 18:50
  • 2411

Ajax4 - 请求PHP接口

process.php <?php # echo "Hello World!"; if (isset($_GET['name'])) { echo "GET: 你的名字是". $_GE...
  • daimomo000
  • daimomo000
  • 2017-12-01 16:26
  • 39

Spring MVC 4 配置ajax请求返回json数据的问题

之前spring mvc返回json数据都是通过自己手动编写类返回的,也知道spring mvc自带这种功能,但一直没有试过,昨天心血来潮想是一把看看,按照网上的说法,大体分为三步: 添加jackso...
  • tianxiehuiyuaninfo
  • tianxiehuiyuaninfo
  • 2017-04-14 16:31
  • 404

ajax的同步/异步请求,以及extjs4中如何在model中实现两张无外键关联表的查询操作

首先,讲下同步和异步的区别。 其实之前我也是很模糊的,现在似乎明白了,下面说下我的理解。 首先,说异步的好了。 var jszz = ""; Ext.Ajax.request({  ...
  • u010236986
  • u010236986
  • 2013-06-07 14:45
  • 1082
    个人资料
    • 访问:2048798次
    • 积分:12248
    • 等级:
    • 排名:第1382名
    • 原创:151篇
    • 转载:12篇
    • 译文:1篇
    • 评论:1668条
    博客专栏
    最新评论