AJAX-----07XMLHttpRequest对象的处理返回的JSON类型数据
要玩json首先就需要知道一般都数据是怎么处理的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function createXHR(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else if(window.ActiveXObject){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
} function test1(){
var xhr = createXHR();
xhr.open('GET','8.php',true);
xhr.onreadystatechange = function(){
if(this.readyState == 4){
document.getElementById('lists').innerHTML = this.responseText;
}
}
xhr.send(null);
}
</script>
</head>
<body>
<input type="button" value="更新歌曲" onclick="test1();">
<div id="lists"></div>
</body>
</html>
<?php
header("Content-Type:text/html;charset=utf-8"); foreach( array('夜夜十八摸','人狗情未了主题曲','左手右手慢动作','妹妹坐船头') as $v ){
echo '<li>'.$v.'</li>';
}
我们居然知道普通数据是怎么处理的了，那么json数据其实也是很简单的，不过是设计得比较巧妙，看上去好像很有规律，巧就巧在可以让javascript当对象使用而已。。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul{ list-style:none; }
</style>
<script>
function createXHR(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else if(window.ActiveXObject){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
} function test1(){
var xhr = createXHR();
xhr.open('GET','8.php',true);
xhr.onreadystatechange = function(){
if(this.readyState == 4){
//alert(this.responseText);
var mp3 = eval('('+ this.responseText +')');
document.getElementById('title').innerHTML = mp3.title;
document.getElementById('desc').innerHTML = mp3.desc; }
}
xhr.send(null);
}
</script>
</head>
<body>
<input type="button" value="更新歌曲" onclick="test1();">
<ul>
<li>
<p id="title"></p>
<p id="desc"></p>
</li>
</ul>
</body>
</html>
<?php
$mp3 = array('title'=>'夜夜十八摸','desc'=>'男人夜夜都是泪');
echo json_encode($mp3);
AJAX-----07XMLHttpRequest对象的处理返回的JSON类型数据的更多相关文章
- AJAX-----06XMLHttpRequest对象的处理返回的XML类型数据
我们首先要确保XML文件是否正常执行 如果访问时候报类似 Parse error: syntax error, unexpected 'version' (T_STRING 这样的错误,我们则需要 ...
- Struts2+Jquery实现ajax并返回json类型数据
来源于:http://my.oschina.net/simpleton/blog/139212 摘要 主要实现步骤如下: 1.JSP页面使用脚本代码执行ajax请求 2.Action中查询出需要返回的 ...
- 转载：Struts2+Jquery实现ajax并返回json类型数据
摘要: 主要实现步骤如下: 1.JSP页面使用脚本代码执行ajax请求 2.Action中查询出需要返回的数据,并转换为json类型模式数据 3.配置struts.xml文件 4.页面脚本接受并处理数 ...
- springMvc 使用ajax上传文件，返回获取的文件数据 附Struts2文件上传
总结一下 springMvc使用ajax文件上传 首先说明一下,以下代码所解决的问题 :前端通过input file 标签获取文件,通过ajax与后端交互,后端获取文件,读取excel文件内容,返回e ...
- javascript解析从服务器返回的json格式数据
在javascript中我们可以将服务器返回的json格式数据转换成json格式进行使用,如下: 1.服务器返回的json格式数据: 通过response.responseText获得: " ...
- json进阶(一)js读取解析JSON类型数据
js读取解析JSON类型数据 一.什么是JSON? JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式,同 ...
- C#操作json类型数据
将对象序列化为 JavaScript 对象表示法 (JSON),并将 JSON 数据反序列化为对象. 此类不能继承. // msdn 例子: namespace SL_DataContractJson ...
- MySQL JSON 类型数据操作
1.Java 中动态扩展字段,会导致数据库表被锁,在MySQL 5.7.8版本之前,因为MySQL不能直接操作JSON类型数据,可以将一个字段设定成varchar类型,里面存放JSON格式数据,这样在 ...
- js读取解析JSON类型数据【申明：来源于网络】
js读取解析JSON类型数据[申明:来源于网络] 地址:http://blog.csdn.net/sunhuaqiang1/article/details/47026841
随机推荐
- hadoop CLASSNAME命令使用注意点
Hadoop中可是使用hadoop CLASSNAME命令.这个CLASSNAME就是你写好的类名.hadoop CLASSNAME命令类似于java classname. 使用hadoop CLAS ...
- Linux查看操作系统时间
date命令的功能是显示和设置系统日期和时间. 该命令的一般格式为: date [选项] 显示时间格式(以+开头,后面接格式) date 设置时间格式 命令中各选项的含义分别为: -d datestr ...
- java设计模式。。。转载
maowang I am a slow walker,but I never walk backwards! 博客园 首页 新随笔 联系 订阅 管理 随笔 - 125 文章 - 0 评论 - 12 ...
- 细说jQuery原型的创建和实现原理，并用实例简单模仿
在解析jQuery实现机理之前,我们先总结一下几点知识,这些都是我学习路上遇到的坑,我跌倒过很多次,现在把它补上: 1)自定义构造函数,如下例: function person(){ this.nam ...
- 使用Font Awesome替换你的网站图标
http://fortawesome.github.io/Font-Awesome/whats-new/ 使用Font Awesome替换你的网站图标 ******************IE7BUG ...
- IIS 8 下使用 WCF
按照以下步骤添加后,IIS8即支持WCF服务. 首先添加MIME类型 扩展名“.svc”,MIME类型 “application/octet-stream” 2. 然后在“Handler Mappin ...
- javascript控制开始日期,和结束日期在同一个月
/* * 控制开始日期,和结束日期 * 开始日期为当前月份,结束日期为当天 * 开始日期为之前月份,结束日期为最后一天 * @return string * @poseidon 2015-9-17 * ...
- Python 第一课
Python语言特点: 优雅,明确,简单 适合开发: Web网络和各种网络服务 系统工具和脚本 作为胶水语言把其他语言开发的模块包装起来方便使用 Python2.7.10的安装(path环境变量) ...
- html本地服务器
html本地服务器 http://files.cnblogs.com/files/douxuyao/Aws.rar
- Android课程---用进度条改变图片透明度
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...