标题：用jquery实现异步ajax技术
///////////////////////////////////////////////////////////////////////////////////////////////////////////////
1.载入整个文档
文件1：
 jquery_ajax.php
//顶部需要空1行
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script>
function Ajax(){
       $("#target").load("xx01.php");
}
</script>
<input type="button" value="ajax提交" onclick="Ajax();">
<div id="target"></div>

文件2：
xx01.php
<?php
echo "<b>通过ajax技术载入整个文档</b>".date('H:i:s');
?>

///////////////////////////////////////////////////////////////////////////////////////////////////////////////
2.客户端每秒自动刷新1次
文件1：
 jquery_ajax.php
//顶部需要空1行
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script>
var processID = self.setInterval("Ajax()",1000); //每1秒刷新一次
function Ajax(){
       $("#target").load("xx01.php");
}
</script>
<div id="target"></div>

文件2：
xx01.php
<?php
echo "<b>通过ajax技术客户端每秒刷新1次</b>".date('H:i:s');
?>

///////////////////////////////////////////////////////////////////////////////////////////////////////////////
3.客户端发送数据给服务器【重点1:获取表单数据提交给服务器】
文件1：
 jquery_ajax.php
//顶部需要空1行
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script>
function Ajax(){	
     $.get("xx01.php",
              {user:$("#user").val(),
               pwd:$("#pwd").val()	
               },
               function(data){
	     $("#target").append(data);
               }
      )
}
</script>
<input type="text" id="user">
<input type="password" id="pwd">
<input type="button" value="ajax提交" onclick="Ajax();">
<div id="target"></div>

文件2：
xx01.php
<?php
header("Content-type:text/html;charset=UTF-8");
$user = $_GET['user'];
$pwd = $_GET['pwd'];
echo "<b>通过ajax技术从客户提交给服务器的数据是：</b><br>user:".$user.' pwd:'.$pwd.' 时间:'.date('H:i:s');
?>

解析：
3.1 获取表单数据$("#user").val()，表单<input type="text" id="user">
3.2 $.get()函数中3个参数的写法
3.3 返回的数据加载在容器中的写法$("#target").append(data)，容器<div id="target"></div>
3.4 HTML中input标签的常用事件有8种，常用oninput频繁提交,onchange失去焦点且内容改变再提交。
onfocus焦点,onblur失焦,onchange失焦且内容变,oninput输入过程内容变,onkeydown,nokeyup,onselect,onclick共8种
修改一下<input type="text" id="user" oninput="Ajax();">则每次内容改变且失去焦点后提交数据给服务器1次,常用于验证数据。

///////////////////////////////////////////////////////////////////////////////////////////////////////////////
4.客户端发送数据给服务器,要求服务返回json对象【重点2:服务器返回必须是标准json字符串格式】
文件1：
 jquery_ajax.php
//顶部需要空1行
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script>
function Ajax(){	
    $.ajax({
	type:"get",
	url:"xx01.php",
	cache:false,
	dataType:"text", //服务器返回的数据格式json
	data:{ //客户端提交的数据
	   "user":$("#user").val(), 
	   "pwd":$("#pwd").val()
	}, 
	success:function(data){ //成功服务器返回数据
                    //console.log(data);//console.log(data.user); //alert(data.user);			 
	    //若dataType为text用如下解码;如果dataType为json则直接使用console.log(data.user);即json对象
	    var obj = JSON.parse(data); 
	    //console.log(obj.user);
	    var html = "<b>用户名："+obj.user+" 密码："+obj.pwd+"</b>";
	    $("#target").append(html);
	}
    });
}
</script>

<input type="text" id="user" onchange="Ajax();">
<input type="password" id="pwd">
<input type="button" value="ajax提交" onclick="Ajax();">

<div id="target"></div>

文件2：
xx01.php
<?php
header("Content-type:text/html;charset=UTF-8");
$user = $_GET['user'];
$pwd = $_GET['pwd'];
$jsonStr = '{"user":"'.$user.'","pwd":"'.$pwd.'"}'; //必须是这种标准json字符串
echo $jsonStr;
?>
解析：
4.1 $.ajax();函数,参数就是{}标准对象形式
4.2 服务器返回dataType类型与返回成功解码函数function(data){}严格对应写法
4.3 $.ajax()函数更通用，$.get(),$.post()及$.getJSON()是它的简化版

【1客户端数据提交；2服务器返回数据；3客户端加载返回的数据】
///////////////////////////////////////////////////////////////////////////////////////////////////////////////