一、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应用例子：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>无标题文档</title>

 <script src="../jquery-1.11.2.min.js">

 </script>

 </head>

 <body>

 <input type="button" id="btn" />

 </body>

 <script>

 $(document).ready(function(e) {

     //json数据格式

     var a={

         code:"poo1",

         name:"张三",

         shuzu:new Array(1,2,3,4),

         json:{aa:"aa",bb:"bb",cc:"cc"},

         age:"18"

         };

         alert(a.json.bb);

         //JSON应用：

         //1.接口

         //2.AJAX

         //3.封装插件

 });

 </script>

 </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.主页面：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>ajax基本应用</title>

 <script src="jquery-1.11.2.min.js">

 </script>

 </head>

 <body>

 <!--ajax在不刷新页面的情况下进行增删改 -->

 <!--案例：用户名的输入：若存在显示已存在，若没有，显示该用户名可用 -->

 <div><input type="text" id="uid" />  <!--输入用户名 -->

 <span id="xinxi"></span></div>       <!--显示提示内容 -->

 </body>

 <script type="text/javascript">

 $(document).ready(function(e) {

     $("#uid").blur(function(){

         //取出文本框内的值

         var uid=$(this).val();

         //js无法直接调用数据库，所以用ajax调用数据库，它是jq里面封装的一个方法

          //ajax里面是Json数据，用｛｝

     $.ajax({

         async:true,       //async原意是异步的，返回true是指异步，返回false是指同步

         url:"ChuLi.php",  //调用哪个页面来处理

         data:{u:uid},     //传递的数据,json类型

         type:"POST",      //提交方式

         datatype:"TEXT",  //返回数据类型 还有json,xml

         success:function(data){    //回调函数：ajax调用成功之后，返回来一个值同时调用这个方法

                 if(data=="OK")

                 {

                     var str="该用户名可以使用";

                     $("#xinxi").html(str);

                     }

                 else

                 {

                     var str="<span style='color:red'>该用户名已经存在</span>";

                     $("#xinxi").html(str);

                     }

             }

         });

     })

 });

 </script>

 </html>

2.数据处理：

 <?php

 //接受传递来的参数

 $uid=$_POST["u"];

 //查询数据库：

 include ("../DBDA.class.php");

 $db=new DBDA();

 $sql="select count (*) from users where uid='{$uid}'";

 $attr=$db->Query($sql);

 if($attr[0][0]==1)

 {

     echo "NO";

     }

 else

 {

     echo "OK";

     }

3.运行结果：

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

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

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

例子1：登录界面

1.主页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script src="../jquery-1.11.2.min.js"></script>

</head>

<body>

<h1>登录</h1>

<div>用户名：<input type="text" id="uid" /></div>

<div>密码：<input type="text" id="pwd" /></div>

<div><input type="button"  id="btn" value="登录" /></div>

</body>

<script type="text/ecmascript">

$(document).ready(function(e) {

    $("#btn").click(function(){

		var uid=$("#uid").val();

		var pwd=$("#pwd").val();

		$.ajax({

			  /*

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

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

	*/

			async:true,    //async原意是异步的，true是指异步，false是指同步

			url:"LoginChu.php",

			data:{u:uid,p:pwd},

			type:"POST",

			dataType:"TEXT",

			success: function(data){

				if(data=="OK")

				{

					window.location="Ajax.php";

					}

				else

				{

					alert ("用户名或密码错误!");

					}

				},

			<!--error:function(){}  //执行失败时调用，一般不常用	 -->		

			});

		})

});

</script>

</html>

　　

　　2.处理页面：

<?php

$uid=$_POST["u"];

$pwd=$_POST["p"];

include ("../DBDA.class.php");

$db=new DBDA();

$sql="select count(*)from users where uid='{$uid} and pwd='{$pwd}'";

$attr=$db->Query($sql);

if($attr[0][0]==1)//有数据

{

	echo "OK";

	}

else

{

	echo "NO";

	}

　　

　　3.运行结果显示：

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

　　1.主页面：

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script src="../jquery-1.11.2.min.js"></script>

</head>

<body>

<!--体现async同步： -->

<div id="text" style="width:200px; height:200px; background-color:#03F" ></div>

</body>

<script type="text/ecmascript">

$(document).ready(function(e) {

		$("#text").click(function(){

		$("#text").html("");//清空原有数据

				$.ajax({

					async:false,//同步ajax

					url:"TextChu.php",

					dataType:"TEXT",

					success: function(data){

						$("#text").html(data);

						}

					});

				alert ($("#shuzu").html());

				})	

});

</script>

</html>

　　

　　2.处理页面：

<?php

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. 怎么用visual studio2010编写c++程序

    如何通过visual studio 2010编写一个简单的c++程序,随小编不一起看看如何编写. 首先打开visual studio 2010 点击软件左上角“文件-新建-项目”,选择“win32-w ...

  2. 大整数算法[10] Comba乘法（实现）

    ★ 引子 上一篇文章讲了 Comba 乘法的原理,这次来讲讲如何实现.为了方便移植和充分发挥不同平台下的性能,暂时用了三种不同的实现方式: 1.单双精度变量都有的情况. 2.只有单精度变量的情况. 3 ...

  3. Xcode中将图片放入Images.xcassets和直接拖入的区别

    将图片放入Images.xcassets 在mainBundle里面Xcode会生成一个Assets.car文件,将我们放在Images.xcassets的图片打包在里面.(程序会变大(?)) 无论是 ...

  4. Sicily 1936. Knight Moves

    题目地址:1936. Knight Moves 思路: 这道题一开始不理解题意…orz...囧,看大神们理解的. 题意是说一个8*8的国际象棋,骑士以马的形式走动(“日”字型),指定两个点,输出最小的 ...

  5. SQL viewId 比较好看的 Id

    有时候我们希望 Id 要好看一些,比如 Id=1 -> Id=T000001 refer : http://www.kodyaz.com/t-sql/custom-sequence-string ...

  6. MFC界面更新实现方法

    1.更新窗口 即采用UpdateWindow()函数立即发送WM_PAINT消息更新整个窗口. void CEditTestDlg::OnBnClickedBtnSysUpdate() { CStri ...

  7. jquery获取表格中特定列

    jQuery().text() 如果有一个表格,我们要用jquery获取特定列,则需要修改列的索引值就好了,此句代码获取的是页面的第10列

  8. （2015多校第6场）HDU5361--In Touch （Dijkstra应用）

    In Touch Time Limit: 8000/4000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)Total ...

  9. codeforces 277.5 div2 F：组合计数类dp

    题目大意: 求一个 n*n的 (0,1)矩阵,每行每列都只有两个1 的方案数 且该矩阵的前m行已知 分析: 这个题跟牡丹江区域赛的D题有些类似,都是有关矩阵的行列的覆盖问题 牡丹江D是求概率,这个题是 ...

  10. [LeetCode] 134. Gas Station 解题思路

    There are N gas stations along a circular route, where the amount of gas at station i is gas[i]. You ...