这篇文章主要介绍了Ajax返回值类型与用法,结合实例形式分析了ajax返回值的xml类型与文本类型详细分类、用法与相关操作注意事项,需要的朋友可以参考下

本文实例讲述了Ajax返回值类型与用法。分享给大家供大家参考,具体如下:

Ajax返回值类型主要有XML类型和文本类型,其中文本类型又可以分为HTML、json类型等。

1、返回值之XML类型

如果服务器的响应头中Content-type的内容为text/xml时,此时XMLHttpRequest对象的responseXML属性才能使用。

2、返回值之文本类型

文本类型主要分为Html类型和json类型。

(1)Html类型

使用:一般返回需要重复复杂的操作。比如,页面使用ajax从服务器请求了json格式数据,返回到页面这,然后又要转换为数组,又要遍历,追加到页面中,可以考虑返回Html类型,在服务器把html页面封装好,然后到页面这只需要直接使用innerHTML追加到页面即可。

(2)json类型

{
"name": "天龙八部",
"intro": "《天龙八部》是著名作家金庸的武侠代表作。著于1963年,历时4年创作完成(部分内容曾由倪匡代笔撰写),前后共有三版,并在2005年第三版中经历6稿修订,结局改动较大。"
}

如果返回值是json文本,首先需要使用eval函数将文本转换为js对象,然后才能使用其属性。

案例:

使用Ajax返回值

文件结构图:

07-returntype-html文件:

页面中有3个按钮,分别实现了onclick事件,点击每个按钮就是从服务器获取不同格式的数据,然后解析,显示到页面中。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Ajax返回值类型</title>
  <link rel="stylesheet" href="">
</head>
<script>
  //创建XMLHttpRequest对象
  function createXhr(){
    var xhr = null;
    if(window.XMLHttpRequest){
      xhr = new XMLHttpRequest();//谷歌、火狐等浏览器
    }else if(window.ActiveXObject){
      xhr = new ActiveXObject("Microsoft.XMLHTTP");//ie低版本
    }
    return xhr;
  }
  //测试返回值为xml
  function test1(){
    //1、创建XMLHttpRequest
    var xhr = createXhr();
    //2、确定请求参数
    xhr.open('GET','./07-returntype-xml.php',true);
    //3、重写回调函数
    xhr.onreadystatechange = function (){
      if(xhr.readyState == 4 && xhr.status == 200){
        var domxml = xhr.responseXML;
        var name = domxml.getElementsByTagName('book')[0].firstChild.firstChild.wholeText;
        var intro = domxml.getElementsByTagName('book')[0].lastChild.firstChild.wholeText;
        document.getElementById('name').value = name;
        document.getElementById('intro').value = intro;
      }
    }
    //4、发送请求
    xhr.send(null);
  }
  //测试返回值为文本-HTML
  function test2(){
    //1、创建XMLHttpRequest
    var xhr = createXhr();
    //2、确定请求参数
    xhr.open('GET','./07-returntype-html.php',true);
    //3、重写回调函数
    xhr.onreadystatechange = function (){
      if(xhr.readyState == 4 && xhr.status == 200){
        var domxml = xhr.responseXML;
        document.getElementById('area').innerHTML = xhr.responseText;
      }
    }
    //4、发送请求
    xhr.send(null);
  }
  //测试返回值为文本-json
  function test3(){
    //1、创建XMLHttpRequest
    var xhr = createXhr();
    //2、确定请求参数
    xhr.open('GET','./07-returntype-json.php',true);
    //3、重写回调函数
    xhr.onreadystatechange = function (){
      if(xhr.readyState == 4 && xhr.status == 200){
        var result = eval('('+xhr.responseText+')');
        document.getElementById('name').value = result.name;
        document.getElementById('intro').value = result.intro;
      }
    }
    //4、发送请求
    xhr.send(null);
  }
</script>
<body>
  <p>书名:<input type="text" id="name"/></p>
  <p>简介:<input type="text" id="intro"/></p>
  <input type="button" onclick="test1();" value="测试xml"/>
  <input type="button" onclick="test2();" value="测试HTML" />
  <input type="button" onclick="test3();" value="测试json" />
  <p id="area"></p>
</body>
</html>

07-returntype-xml.php文件:

主要是返回xml格式的数据

<?php
/**
 * 返回xml数据
 * @author webbc
 */
header('Content-type:text/xml;charset=utf-8');
echo '<?xml version="1.0" encoding="UTF-8"?><bookstore><book><name>天龙八部</name><intro><![CDATA[《天龙八部》是著名作家金庸的武侠代表作。著于1963年,历时4年创作完成(部分内容曾由倪匡代笔撰写),前后共有三版,并在2005年第三版中经历6稿修订,结局改动较大。]]></intro></book></bookstore>';
?>

07-returntype-html.php文件:

主要是返回html文本

<?php
/**
 * 返回html标签数据
 * @author webbc
 */
$arr = array('赵','钱','孙','李');
$str = '';
foreach ($arr as $v) {
  $str .= '<li>' . $v .'</li>';
}
echo $str;
?>

07-returntype-json.php文件:

主要是返回json格式数据

<?php
/**
 * 返回json格式数据
 * @author webbc
 */
header('Content-type:text/html;charset=utf-8');
echo '{"name":"天龙八部","intro":"《天龙八部》是著名作家金庸的武侠代表作。著于1963年,历时4年创作完成(部分内容曾由倪匡代笔撰写),前后共有三版,并在2005年第三版中经历6稿修订,结局改动较大。"}';
?>

效果图:

更多关于ajax相关内容感兴趣的读者可查看本站专题:《jquery中Ajax用法总结》、《JavaScript中ajax操作总结》、《PHP+ajax与应用小结》及《asp.net ajax总结专题》

希望本文所述对大家ajax程序设计有所帮助。

最新资讯
和罗永浩锁了!中国银联首次杀入直播圈

和罗永浩锁了!中国银联

今天下午,银联发布的3条微博都提示“记得6·2来看罗永
快手拿下周杰伦全部歌曲版权授权

快手拿下周杰伦全部歌

快手正式宣布与杰威尔音乐达成版权授权合作。
湖畔大学开学 马云:世界比任何时候都需要企业家精神

湖畔大学开学 马云:世

湖畔大学六届新生在初夏的杭州迎来开学典礼。
京东与拼多多的微信“巷战”

京东与拼多多的微信“

市值刚被拼多多超越的京东,用一份稳定的财报凸显微弱的
新氧战略转型背后:用户何时才能“安心变美”?

新氧战略转型背后:用户

新氧正在经历从电商平台到产业平台的转变,其2020年战略
爱奇艺新会员价翻倍你会买账吗?

爱奇艺新会员价翻倍你

5月23日,爱奇艺正式上线“星钻VIP会员”。
最新文章
bootstrap select2 动态从后台Ajax动态获取数据的代码

bootstrap select2 动

这篇文章主要介绍了bootstrap select2 动态从后台Ajax
ThinkPHP5 通过ajax插入图片并实时显示(完整代码)

ThinkPHP5 通过ajax插

这篇文章主要介绍了ThinkPHP5 通过ajax插入图片并实时
使用AJAX(包含正则表达式)验证用户登录的步骤

使用AJAX(包含正则表达

这篇文章主要介绍了使用AJAX(包含正则表达式)验证用户登
Ajax原理与应用案例快速入门教程

Ajax原理与应用案例快

这篇文章主要介绍了Ajax原理与应用案例,结合实例形式
Ajax提交post请求案例分析

Ajax提交post请求案例

这篇文章主要介绍了Ajax提交post请求,结合具体案例形
Ajax返回值类型与用法实例分析

Ajax返回值类型与用法

这篇文章主要介绍了Ajax返回值类型与用法,结合实例形