一、JSON简介：

JSON（JavaScript Object Notation）是一种轻量级的数据交换语言，以文字为基础，且易于让人阅读，同时也方便了机器进行解析和生成。JSON简单说就是javascript中的对象和数组，所以这两种结构就是对象和数组两种结构，通过这两种结构可以表示各种复杂的结构，其可以将JavaScript 对象中表示的一组数据转换为字符串，然后就可以在函数之间轻松地传递这个字符串，或者在异步应用程序中将字符串从Web客户机传递给服务器端程序。JSON采用完全独立于程序语言的文本格式，但是也使用了类C语言的习惯（包括C、C++、C#、Java、JavaScript、Perl、Python等）。这些特性使JSON成为理想的数据交换语言。

JSON建构有两种结构：

JSON数据语言：json简单说就是javascript中的对象和数组，所以这两种结构就是对象和数组2种结构，通过这两种结构可以表示各种复杂的结构

　　1、对象：对象在js中表示为“{}”扩起来的内容，数据结构为 {key：value,key：value,...}的键值对的结构，在面向对象的语言中，key为对象的属性，value为对应的属性值，所以很容易理解，取值方法为 对象.key 获取属性值，这个属性值的类型可以是 数字、字符串、数组、对象几种。

　　2、数组：数组在js中是中括号“[]”扩起来的内容，数据结构为 ["java","javascript","vb",...]，取值方式和所有语言中一样，使用索引获取，字段值的类型可以是 数字、字符串、数组、对象几种。

　　经过对象、数组2种结构就可以组合成复杂的数据结构了。

Json应用例子：

  1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.  <title>无标题文档</title>
  6.  <script src="../jquery-1.11.2.min.js">
  7.  </script>
  8.  </head>
  9.  
  10.  <body>
  11.  <input type="button" id="btn" />
  12.  </body>
  13.  <script>
  14.  $(document).ready(function(e) {
  15.  
  16.      //json数据格式
  17.      var a={
  18.          code:"poo1",
  19.          name:"张三",
  20.          shuzu:new Array(1,2,3,4),
  21.          json:{aa:"aa",bb:"bb",cc:"cc"},
  22.          age:"18"
  23.          };
  24.          alert(a.json.bb);
  25.  
  26.          //JSON应用：
  27.          //1.接口
  28.          //2.AJAX
  29.          //3.封装插件
  30.  
  31.  });
  32.  </script>
  33.  </html>

二、AJAX简介

      AJAX 指异步JavaScript及XML（Asynchronous JavaScript And XML（异步JavaScript和XML）），是指一种创建交互式网页应用的网页开发技术。 国内通常的读音为“阿贾克斯”和阿贾克斯足球队读音一样。是一种基于 JavaScript和HTTP请求（HTTP requests），广泛应用在浏览器的网页开发技术。Ajax是多项技术的综合应用。Ajax概念由Jesse James Garrett所提出，在2005 年由Google推广开来的编程模式。

AJAX的优点：

传统的web应用允许用户填写表单(form)，当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单，然後返回一个新的网页。这个做法浪费了许多带宽，因为在前後两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。

使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。

AJAX的基本应用：

1.主页面：

  1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.  <title>ajax基本应用</title>
  6.  <script src="jquery-1.11.2.min.js">
  7.  </script>
  8.  </head>
  9.  
  10.  <body>
  11.  <!--ajax在不刷新页面的情况下进行增删改 -->
  12.  <!--案例：用户名的输入：若存在显示已存在，若没有，显示该用户名可用 -->
  13.  <div><input type="text" id="uid" />  <!--输入用户名 -->
  14.  <span id="xinxi"></span></div>       <!--显示提示内容 -->
  15.  
  16.  </body>
  17.  <script type="text/javascript">
  18.  $(document).ready(function(e) {
  19.  
  20.      $("#uid").blur(function(){
  21.          //取出文本框内的值
  22.          var uid=$(this).val();
  23.  
  24.          //js无法直接调用数据库，所以用ajax调用数据库，它是jq里面封装的一个方法
  25.           //ajax里面是Json数据，用｛｝
  26.      $.ajax({
  27.          async:true,       //async原意是异步的，返回true是指异步，返回false是指同步
  28.          url:"ChuLi.php",  //调用哪个页面来处理
  29.          data:{u:uid},     //传递的数据,json类型
  30.          type:"POST",      //提交方式
  31.          datatype:"TEXT",  //返回数据类型 还有json,xml
  32.          success:function(data){    //回调函数：ajax调用成功之后，返回来一个值同时调用这个方法
  33.                  if(data=="OK")
  34.                  {
  35.                      var str="该用户名可以使用";
  36.                      $("#xinxi").html(str);
  37.                      }
  38.                  else
  39.                  {
  40.                      var str="<span style='color:red'>该用户名已经存在</span>";
  41.                      $("#xinxi").html(str);
  42.                      }
  43.              }
  44.  
  45.          });
  46.      })
  47.  
  48.  });
  49.  </script>
  50.  
  51.  </html>

2.数据处理：

  1.  <?php
  2.  
  3.  //接受传递来的参数
  4.  $uid=$_POST["u"];
  5.  //查询数据库：
  6.  include ("../DBDA.class.php");
  7.  $db=new DBDA();
  8.  $sql="select count (*) from users where uid='{$uid}'";
  9.  $attr=$db->Query($sql);
  10.  if($attr[0][0]==1)
  11.  {
  12.      echo "NO";
  13.      }
  14.  else
  15.  {
  16.      echo "OK";
  17.      }

3.运行结果：

async：原意是异步的，true是指异步，false是指同步 。默认为异步。

数据传输：同步：传输必须等到接收方接收到，才能传下一个。异步：传输不用等到对方接收就可以继续传递。

AJAX：同步：AJAX必须处理完才能继续向下执行。异步：AJAX在处理数据的同时代码继续往下执行

例子1：登录界面

1.主页面：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <script src="../jquery-1.11.2.min.js"></script>
  7. </head>
  8.  
  9. <body>
  10. <h1>登录</h1>
  11. <div>用户名：<input type="text" id="uid" /></div>
  12. <div>密码：<input type="text" id="pwd" /></div>
  13. <div><input type="button"  id="btn" value="登录" /></div>
  14.  
  15. </body>
  16. <script type="text/ecmascript">
  17. $(document).ready(function(e) {
  18.  
  19.     $("#btn").click(function(){
  20. 		var uid=$("#uid").val();
  21. 		var pwd=$("#pwd").val();
  22. 		$.ajax({
  23.  
  24. 			  /*
  25.  
  26. 	数据传输：同步：传输必须等到接收方接收到，才能传下一个。异步：传输不用等到对方接收就可以继续传递。
  27.  
  28. 	AJAX：同步：AJAX必须处理完才能继续向下执行。异步：AJAX在处理数据的同时代码继续往下执行
  29. 	*/
  30.  
  31. 			async:true,    //async原意是异步的，true是指异步，false是指同步
  32. 			url:"LoginChu.php",
  33. 			data:{u:uid,p:pwd},
  34. 			type:"POST",
  35. 			dataType:"TEXT",
  36. 			success: function(data){
  37.  
  38. 				if(data=="OK")
  39. 				{
  40. 					window.location="Ajax.php";
  41. 					}
  42. 				else
  43. 				{
  44. 					alert ("用户名或密码错误!");
  45. 					}
  46.  
  47. 				},
  48. 			<!--error:function(){}  //执行失败时调用，一般不常用	 -->		
  49.  
  50. 			});
  51.  
  52. 		})
  53.  
  54. });
  55.  
  56. </script>
  57.  
  58. </html>

　　

　　2.处理页面：

  1. <?php
  2. $uid=$_POST["u"];
  3. $pwd=$_POST["p"];
  4. include ("../DBDA.class.php");
  5. $db=new DBDA();
  6. $sql="select count(*)from users where uid='{$uid} and pwd='{$pwd}'";
  7. $attr=$db->Query($sql);
  8. if($attr[0][0]==1)//有数据
  9. {
  10. 	echo "OK";
  11. 	}
  12. else
  13. {
  14. 	echo "NO";
  15. 	}

　　

　　3.运行结果显示：

例子2：体现同步性-----例如点击div的同时显示里面的内容

　　1.主页面：

  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3. <title>无标题文档</title>
  4. <script src="../jquery-1.11.2.min.js"></script>
  5. </head>
  6.  
  7. <body>
  8. <!--体现async同步： -->
  9. <div id="text" style="width:200px; height:200px; background-color:#03F" ></div>
  10.  
  11. </body>
  12. <script type="text/ecmascript">
  13. $(document).ready(function(e) {
  14.  
  15. 		$("#text").click(function(){
  16.  
  17. 		$("#text").html("");//清空原有数据
  18. 				$.ajax({
  19. 					async:false,//同步ajax
  20. 					url:"TextChu.php",
  21. 					dataType:"TEXT",
  22. 					success: function(data){
  23.  
  24. 						$("#text").html(data);
  25.  
  26. 						}
  27.  
  28. 					});
  29.  
  30. 				alert ($("#shuzu").html());
  31.  
  32. 				})	
  33.  
  34. });
  35.  
  36. </script>
  37.  
  38. </html>

　　

　　2.处理页面：

  1. <?php
  2. echo "<div id='shuzu'>Hello world</div>";

　　

　　3.运行结果显示：

Json,Ajax（0516）的更多相关文章

  1. AJAX（一）

    AJAX(一) Ajax是Asynchronous Javascript和XML的简写,这一技术能够向服务器请求额外的数据而无需卸载页面,会带来更好的用户体验. [前面的基础知识][关于同步和异步的了 ...

  2. 又是一周-AJAX（三）

    hi 我又食言了,但我还是厚颜无耻的回来了... 1.AJAX(三) 三.AJAX的简单的例子 3.1 简介 完成:查询员工信息,通过输入员工编号查询员工的基本信息+新建员工的信息,包含员工姓名,编号 ...

  3. Python开发【前端】:Ajax（二）

    原生Ajax.JQuery.伪Ajax三种方式使用优先级 如果发送的是[普通数据] jQuery XMLHttpRequest iframe 如果发送的是[文件] iframe jQuery(Form ...

  4. jQuery学习笔记之jQuery的Ajax（3）

    jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件 源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...

  5. 【前端】JSON.stringfy 和 JSON.parse（待续）

    JSON.stringfy 和 JSON.parse(待续) 支持全局对象JSON的浏览器有:IE8+, FireFox3.5+, Safari4+, Chrome, Opera10.5+ JSON. ...

  6. AJAX（二）AJAX框架

    上文(AJAX(一)AJAX的简介和基础)对ajax异步请求服务器做了详细的介绍和基础应用,可以看出,ajax的一些过程是相对不变的.不必要每次发送请求都写一遍发送代码,一些ajax开发人员已经把他们 ...

  7. AJAX（XMLHttpRequest）进行跨域请求方法详解

    AJAX(XMLHttpRequest)进行跨域请求方法详解(三) 2010年01月11日 08:48:00 阅读数:24213 注意:以下代码请在Firefox 3.5.Chrome 3.0.Saf ...

  8. IOS 解析Json数据（NSJSONSerialization）

    ● 什么是JSON ● JSON是一种轻量级的数据格式,一般用于数据交互 ● 服务器返回给客户端的数据,一般都是JSON格式或者XML格式(文件下载除 外) ● JSON的格式很像OC中的字典和数组 ...

  9. 分享基于.NET动态编译&Newtonsoft.Json封装实现JSON转换器（JsonConverter）原理及JSON操作技巧

    看文章标题就知道,本文的主题就是关于JSON,JSON转换器(JsonConverter)具有将C#定义的类源代码直接转换成对应的JSON字符串,以及将JSON字符串转换成对应的C#定义的类源代码,而 ...

随机推荐

  1. shape及其子节点详解

    shape最大的最用便是用来替代图片,释放磁盘空间.另外则是增加适应不通过屏幕的设备. 先来看看shape下面的节点以及它所起到的作用. gradient   -- 对应颜色渐变(startcolor ...

  2. Android 获取网络链接类型

    /** * 获取当前网络类型 * @return 0:没有网络 1:WIFI网络 2:WAP网络 3:NET网络 */ public int getNetworkType() { int netTyp ...

  3. uva 10026 Shoemaker's Problem

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...

  4. altium designer不经过原理图直接在空白pcb上加封装然后画线

    如果是复杂点的PCB,建议还是画下SCH,如果PCB只有几个元件,那么可以用这种方法,想不画原理图,直接进行布线,往往是很多初学者最想知道的,但是这也一定不是初学者能学到的.因为你买的书,都是按画PC ...

  5. JavaScript……

    退役了好伤心…… 这几天搞研究性学习写网页版贪吃蛇代码……太蛋疼了 要学javascript,就还要搞AJAX.JQuery.JSON…… 我感觉整个人都不好了

  6. Codeforces Round #316 (Div. 2) D、E

    Problem D: 题意:给定一棵n个点树,每个点有一个字母,有m个询问,每次询问某个节点x的子树中所有深度为k的点能否组成一个回文串 分析:一堆点能组成回文串当且仅当数量为奇数的字母不多于1个,显 ...

  7. hadoop-2.6.0为分布式安装

    hadoop-2.6.0为分布式安装 伪分布模式集群规划(单节点)------------------------------------------------------------------- ...

  8. js学习之道：js防止表单重复提交

    第一种:用flag标识,下面的代码设置checkSubmitFlg标志: <script language="”javascript”"> var checkSubmi ...

  9. Engineer Economic

    1.选择题 10.下列哪项不属于总成本费用() A.生产成本    B.机会成本    C.管理费用    D.财务费用 第1章 11.下列哪项关于自有资金的表述是错误的(D) A.自有资金包括资本金 ...

  10. com.microsoft.sqlserver.jdbc.SQLServerException: 结果集没有当前行

    參考博客com.microsoft.sqlserver.jdbc.SQLServerException: 结果集没有当前行 java获取结果集,if(rs!=null).和while(rs.next( ...