JSON和AJAX学习笔记

其他 2020-03-28 16:34:13 阅读次数: 0

JSON和AJAX

JSON

简介

  • JSON全称JavaScript object Notation，也就是JavaScript的对象表示法；
  • JSON是一种轻量级的文本数据交换格式，是类似于XML的交换文本信息的语法，但是比XML更小更快，更易于解析。
  • JSON虽然说起来是给JavaScript用的，实际上却独立于语言和平台，在很多地方都有应用；
  • 使用JavaScript内建的eval()函数可以轻易地将JSON数据生成JavaScript对象。

JSON与XML的比较

相似处

  • 都是纯文本
  • 人可以直接读懂
  • 都具有层级结构，JSON在一个值里面可以存另一个值，还可以并列存几个值（类似于C语言中结构体的嵌套）
  • 可以使用JavaScript解析
  • 可以使用AJAX传输

不同之处

  • JSON没有标签的说法
  • JSON更短，读写更快
  • 使用数组，不使用保留字

JSON的语法规则

JSON的语法是JavaScript语法的子集

  • 数据由逗号分割
  • 大括号保存对象，中括号保存数组
  • 数据在名值对中:key=value，其中key必须是一个字符串，而value可以是任何合法的JavaScript数据类型
  • JSON对象支持嵌套（嵌套的是一个完整的对象）
    {
    "notes":[
        {"name":"JSON","size":36},
        {"name":"AJAX","size":38}
    ]
}

JSON的值类型

包括数字（整数或浮点数）、字符串（在双引号中）、逻辑值（true OR false）、数组（在中括号中）、对象（在大括号中）、null。

将一个JSON对象转换为XML

  • JSON
    {
    "notes":[
        {"name":"JSON","size":"small"},
        {"name":"AJAX","size":"small"}
    ]
}
  • XML
    <notes>
  <note>
      <name>JSON</name>
      <size>small</size>
  </note>
  <note>
      <name>AJAX</name>
      <size>small</size>
  </note>
</notes>

JSON对象与JavaScript对象的转换

需要用到两个函数

  • JSON.parse():将JSON对象转换为JavaScript对象
  • JSON.stringify():将一个JavaScript值转换为JSON字符串

访问JSON对象值：

var myObj,x;
myObj = {"name":"JSON","size":36,"addr":null};
x = myObj.name;//x的值为"JSON"
myObj.size = 38;//修改JSON的size为38
delete myObj.size;//删除了myObj对象中的size键值对

JSON中的数组及其嵌套使用

var myObj = {
    "name":"language",
    "num":2,
    "members":[
        {"name":"JSON","size":38},
        {"name":"AJAX","size":36}
    ]
}
var x = myObj.members[1].name; //x的值为AJAX

在member数组中放置了两个JSON对象，这是一个检验JSON对象格式是否正确的工具。

从服务器请求JSON数据并解析为JavaScript格式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>request</title>
</head>
<body>
<h2>使用XMLHttpRequest获取文件内容</h2>
<p id="demo"></p>
<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myObj = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = myObj.name;
    }
};
xmlhttp.open("GET", "/try/ajax/json_demo.txt", true);
xmlhttp.send();
</script>
<p>查看JSON数据：<a href="/filefolder/filename.js" target="_blank">jsonData.txt</a></p>
</body>
</html>

解析JSON数据

  • 将JSON数据转换为JavaScript对象var jsObj = JSON.parse(jsonObj)
  • 将JavaScript对象转换为JSON字符串JSON.stringify(jsObj[,replacer[,space]])
    • jsObj是一个JavaScript对象也可以是一个数组
    • replacer是可选项，如果它是一个函数，则会对传入的每个键值对通过函数做处理，如果函数返回值是undefined则会处理为空值""
    • space也是可选的如果为一个数字则返回的文本每个级别都会缩进对应值的空格，space也可以不是数字，如\t制表符等
  • 注意事项
    • JSON对象中不能存函数（如果实在需要，可以将其先转化为字符串，使用toString()函数）
    • JSON对象中不能存Date日期对象

JSONP

由于同源策略的影响为了让网页可以从别的网站获取数据，需要用到JSONP即JSON with Padding（同源策略是由Netscape提出的一个著名的安全策略，几乎所有支持JavaScript的浏览都会用这个策略）

  • 如果客户希望得到数据["name1","name2"]，则真正返回来的数据会是callbackFunction(["name1","name2"])
    • 服务端的JSONP.php文件为：
      <?php
header('Content-type: application/json');
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json数据
$json_data = '["customername1","customername2"]';
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";
?>
    • 客户端页面的代码为
      <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP 实例</title>
</head>
<body>
<div id="divCustomers"></div>
<script type="text/javascript">
function callbackFunction(result, methodName)
{
    var html = '<ul>';
    for(var i = 0; i < result.length; i++)
        {
            html += '<li>' + result[i] + '</li>';
         }
    html += '</ul>';
    document.getElementById('divCustomers').innerHTML = html;
}
</script>
<script type="text/javascript" src="website/try/ajax/JSONP.php?jsoncallback=callbackFunction"></script>
</body>
</html>

AJAX

AJAX简介

  • 全称Asynchronous JavaScript and XML（异步的JavaScript和XML），它不是一门新的编程语言而是一种使用现有标准的技术；
  • 可以在不刷新整个网页的情况下与服务器交换数据实现网页中局部画面的更新，可以用来创建快速动态网页；
  • 不需要任何插件，但是浏览器需要支持JavaScript。

AJAX的应用

工作流程

  1. 客户端触发事件，创建XMLHttpRequest对象并发送给服务器；
  2. 服务器处理XMLHttpRequest并将数据返回；
  3. 客户端使用JavaScript处理数据并刷新部分界面。

AJAX是基于现有的Internet技术

  • XMLHttpRequest对象（异步的与服务器交换数据）；
  • JavaScript/DOM（信息交互/显示）
  • CSS
  • XML

一段完整的代码分析

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        //执行代码创建XMLHttpRequest对象，适用于主流的浏览器如：IE7+, Firefox, Chrome, Opera, Safari 
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // 兼容老版浏览器IE6, IE5，创建ActiveXObject对象 
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    //对象状态发生改变时执行代码
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            //将会修改body中的div标签的innerHTML内容
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
    xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<!-- 给按钮绑定一个脚本，摁下时执行脚本 -->
<button type="button" onclick="loadXMLDoc()">修改内容</button>
</body>
</html>
  • 上面的例子用到了JavaScript/DOM和XMLHttpRequest技术；
  • 向服务器请求数据用到了XMLHttpRequest对象的open()和send()方法：
    • open(method,url,async):method是请求的类型，可以为GET或者POST，大部分情况GET都能使用，但是当发送内容含有未知字符串、数据量过大或者无法使用缓存时使用POST更稳定；url是文件在服务器上的位置；async为true表示同步，false表示异步。
    • send(string):string仅用于POST，一般为空。
  • 在代码 document.getElementById("myDiv").innerHTML=xmlhttp.responseText 中修改HTML内容用的是 responseText ，这是因为返回数据并非XML格式，如果为XML格式则需要改成 txt 。
  • 在XML对象状态改变的判断 if (xmlhttp.readyState==4 && xmlhttp.status==200) 中的4表示请求已完成，且响应已就绪，200表示状态“OK”，还有一些其他的状态如下：
    readyState 状态 status 状态
    0 请求未初始化 200 OK
    1 服务器连接已建立 404 页面未找到
    2 请求已接收
    3 请求处理中
    4 请求已完成，且响应已就绪
  • 当需要多次执行AJAX任务时，我们可以抽象出一个调用回调函数(作为参数传递的函数)改变页面的方法，方便随时调用：
      <script>
  var xmlhttp;
  function loadXMLDoc(url,cfunc){
     if (window.XMLHttpRequest){
             xmlhttp=new XMLHttpRequest();
         }else{
             xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
         }
     xmlhttp.onreadystatechange=cfunc;//状态改变时执行回调函数
     xmlhttp.open("GET",url,true);
     xmlhttp.send();
 }
  function myFunction(){
     //直接使用抽象好的方法来改变页面
     loadXMLDoc("/try/ajax/ajax_info.txt",function(){
      if (xmlhttp.readyState==4 && xmlhttp.status==200){
          document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
      }
  });
 }
  </script>
  • 另一个例子：当需要实现向输入框中输入任意内容就得到响应的功能时可以使用：xmlhttp.open("GET","/try/ajax/getcustomer.php?q="+str,true); 来向服务器请求与输入框中内容相关的数据，其中的str可以通过onchange()等方法从页面中的相关部分获取，例如通过拉选框的改变：
      <select name="customers" onchange="showCustomer(this.value)" style="font-family:Verdana, Arial, Helvetica, sans-serif;">
  <option value="APPLE">Apple Computer, Inc.</option>
  <option value="BAIDU ">BAIDU, Inc</option>
  <option value="Canon">Canon USA, Inc.</option>
  <option value="Google">Google, Inc.</option>
  <option value="Nokia">Nokia Corporation</option>
  <option value="SONY">Sony Corporation of America</option>
  </select>
    其中onchange中绑定的函数为function onchange(str)传入的参数this.value正是下拉框中的innerHTML。

使用AJAX处理XML数据，一段完整的代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 设置表格样式，让处理结果更好看 -->
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>
</head>

<body>
<button type="button" onclick="loadXMLDoc()">获取我收藏的 CD</button>
<br><br>
<table id="demo"></table>
<script>
function loadXMLDoc(){
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function(){
    if (this.readyState == 4 && this.status == 200){
      //调用函数处理返回数据this中的XML数据
      myFunction(this);
    }
  };
  xhttp.open("GET", "cd_catalog.xml", true);
  xhttp.send();
}
function myFunction(xml){
  var i;
  var xmlDoc = xml.responseXML;//获取传入对象xml中的XML数据
  var table="<tr><th>Artist</th><th>Title</th></tr>";
  var x = xmlDoc.getElementsByTagName("CD");
  for (i = 0; i <x.length; i++) {//拼接表格单元
    table += "<tr><td>" + 
              x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + 
             "</td><td>" + x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + 
             "</td></tr>";
  }
  document.getElementById("demo").innerHTML = table;//修改原空表格的内容，将处理好的数据写入
}
</script>
</body>
</html>

相关资源

XML学习笔记
php实现JSON的解析

猜你喜欢

转载自www.cnblogs.com/mitoohi/p/12587931.html
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022