Json,Ajax（0516）
一、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）的更多相关文章
- AJAX（一）
AJAX(一) Ajax是Asynchronous Javascript和XML的简写,这一技术能够向服务器请求额外的数据而无需卸载页面,会带来更好的用户体验. [前面的基础知识][关于同步和异步的了 ...
- 又是一周-AJAX（三）
hi 我又食言了,但我还是厚颜无耻的回来了... 1.AJAX(三) 三.AJAX的简单的例子 3.1 简介 完成:查询员工信息,通过输入员工编号查询员工的基本信息+新建员工的信息,包含员工姓名,编号 ...
- Python开发【前端】:Ajax（二）
原生Ajax.JQuery.伪Ajax三种方式使用优先级 如果发送的是[普通数据] jQuery XMLHttpRequest iframe 如果发送的是[文件] iframe jQuery(Form ...
- jQuery学习笔记之jQuery的Ajax（3）
jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件 源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...
- 【前端】JSON.stringfy 和 JSON.parse（待续）
JSON.stringfy 和 JSON.parse(待续) 支持全局对象JSON的浏览器有:IE8+, FireFox3.5+, Safari4+, Chrome, Opera10.5+ JSON. ...
- AJAX（二）AJAX框架
上文(AJAX(一)AJAX的简介和基础)对ajax异步请求服务器做了详细的介绍和基础应用,可以看出,ajax的一些过程是相对不变的.不必要每次发送请求都写一遍发送代码,一些ajax开发人员已经把他们 ...
- AJAX（XMLHttpRequest）进行跨域请求方法详解
AJAX(XMLHttpRequest)进行跨域请求方法详解(三) 2010年01月11日 08:48:00 阅读数:24213 注意:以下代码请在Firefox 3.5.Chrome 3.0.Saf ...
- IOS 解析Json数据（NSJSONSerialization）
● 什么是JSON ● JSON是一种轻量级的数据格式,一般用于数据交互 ● 服务器返回给客户端的数据,一般都是JSON格式或者XML格式(文件下载除 外) ● JSON的格式很像OC中的字典和数组 ...
- 分享基于.NET动态编译&Newtonsoft.Json封装实现JSON转换器（JsonConverter）原理及JSON操作技巧
看文章标题就知道,本文的主题就是关于JSON,JSON转换器(JsonConverter)具有将C#定义的类源代码直接转换成对应的JSON字符串,以及将JSON字符串转换成对应的C#定义的类源代码,而 ...
随机推荐
- 开发H5小游戏
Egret白鹭H5小游戏开发入门(一) 前言: 好久没更新博客了,以前很多都不会,所以常常写博客总结,倒是现在有点点经验了就懒了.在过去的几个月里,在canvas游戏框架方面,撸过了CreateJ ...
- android 模拟微信消息框 BaseAdapter()方法 [2]
在昨天的微信布局的基础上加内容 http://www.cnblogs.com/Seven-cjy/p/6098024.html 项目下/res/layout下创建一个 listview_layout. ...
- Python web.py 实例和源码分析：
示例: http://jyd.me/python/cookie-and-session/ simple to do:http://simple-is-better.com/news/309 http: ...
- 【HDOJ】1520 Anniversary party
第二道树形DP,先是MLE.后来仅需改小邻接矩阵的第二个维度到30就过了. #include <cstdio> #include <cstring> #include < ...
- DP #1 Singleton Pattern线程安全问题
单例模式确保一个类只有一个实例,自行提供这个实例并向整个系统提供这个实例. 其中涉及到最主要的问题就是在多线程并发时线程安全问题. 单例模式的实现也有一个循序渐进的过程:1.最基本要求:每次从getI ...
- HDU3473--Minimum Sum（静态区间第k大）
Minimum Sum Time Limit: 16000/8000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tota ...
- java笔记5之逻辑运算符以及&&与&的区别
1 &逻辑与:有false则false. |逻辑或:有true则true. ^逻辑异或:相同为false,不同为true. 举例:情侣关系 ...
- Linux网络配置相关
路由相关 #添加到主机的路由 route add -host 192.168.1.2 dev eth0 route add -host 192.168.1.2 gw 192.168.1.1 注1:添加 ...
- 继承PictureBox显示GIF的自定义控件实现
处理GIF部分 using System; using System.Collections.Generic; using System.Linq; using System.Text; using ...
- INSTALL_PARSE_FAILED_INCONSISTENT_CERTIFICATES错误解决方法
在安装APK文件时出现类似INSTALL_PARSE_FAILED_INCONSISTENT_CERTIFICATES的提示,同时类似的提示如下: Android Launch! adb is run ...