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 指异步JavaScriptXML(Asynchronous JavaScript And XML(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。 国内通常的读音为“阿贾克斯”和阿贾克斯足球队读音一样。是一种基于 JavaScriptHTTP请求(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.运行结果:

Json,Ajax(0516)

Json,Ajax(0516)

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.运行结果显示:

Json,Ajax(0516)

例子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)

上一篇:.net 4 安装未成功,无意中的解决办法!


下一篇:.net FrameWork4.0安装未成功