AJAX的应用场景
1.异步搜索过滤内容数据
2.表单异步验证
3.异步加载页面“更多”数据
4.异步处理登录
5.异步处理用户名是否注册
AJAX的主要特点
1.在不刷新页面的情况下，与服务器进行异步交互
2.优化浏览器与服务器的数据传输，减少了不必要的数据往返
3.把部分数据处理转移到客户端，减少服务器压力
实现AJAX的基本思路
1.选择一个js类库
2.js部分向服务器传递数据
3.php接收传递的数据，处理数据，返回js
4.js接收php的数据，并做相应的处理
AJAX基础代码
$.ajax({ url:"loginchuli.php", //是连接到的页面 data:{uu:uid,pp:pwd}, //前边的uu是名字后边的uid是取到的值，前边的pp是名字后边的pwd是取到的值 type:"POST", //传递方式 dataType:"TEXT", //接受返回来的数据类型，有text/json/xml success:function(data){ //成功后，返回的数据，用这回调函数接受一下，data是自己定义的名称，接收回来的数据就存到data里 alert(data); }
})
例子1：ajax异步验证登录
1.登陆界面
<body> <div>用户名：<input type="text" id="uid"/></div> <div>密码：<input type="password" id="pwd"/></div> <div><input type="button" id="btn" value="登录"/></div> </body> </html> <script type="text/javascript"> $(document).ready(function(e) { $("#btn").click(function(){ //取用户名和密码 var uid=$("#uid").val(); var pwd=$("#pwd").val(); //调用ajax,里边是json数据，所以要加上{}括号 $.ajax({ url:"loginchuli.php", //是连接到的页面 data:{uu:uid,pp:pwd}, //前边的uu是名字后边的uid是取到的值，前边的pp是名字后边的pwd是取到的值 type:"POST", //传递方式 dataType:"TEXT", //接受返回来的数据类型，有text/json/xml success:function(data){ //成功后，返回的数据，用这回调函数接受一下，data是自己定义的名称，接收回来的数据就存到data里 alert(data); if(data.trim()=="1") //判断返回来的数据是不是1，如果是1，让其跳转到主页面,data.trim()方法是把返回的数据去掉空格 { window.location.href="main.php"; } else { alert("用户名或密码错误"); } } }); }) });
2.登录处理界面
<?php $uid=$_POST["uu"]; $pwd=$_POST["pp"]; include("DBDA.class.php"); $db=new DBDA(); $sql="select pwd from users where name='{$uid}'"; //根据用户名查询密码 $mm =$db->Query($sql); if(!empty($pwd) && !empty($mm) && $mm[0][0]==$pwd) { echo "1"; } else { echo "0"; }
例子2：ajax判断用户名是否已经注册
1.输入页面
<input type="text" id="uid" /> <span id="jia"></span> </body> <script type="text/javascript"> $("#uid").blur(function(){ //blur()失去焦点时间 //取用户名 var uid = $("#uid").val(); //调AJAX $.ajax({ url:"uidchuli.php", data:{u:uid}, //传递给处理界面数据 type:"POST", dataType:"TEXT", success: function(data){ if(data>0) { $("#jia").html("该用户名已存在"); $("#jia").css("color","red"); } else { $("#jia").html("该用户名可用"); $("#jia").css("color","green"); } } }); }) </script>
2.处理页面
<?php $uid = $_POST["u"]; include("DBDA.class.php"); $db = new DBDA(); $sql = "select count(*) from users where uid='{$uid}'"; echo $db->StrQuery($sql);
例子3：异步搜索过滤内容数据
1.显示页面
<style type="text/css">
*{ margin:0px auto; padding:0px}
.l{ 200px; height:30px; text-align:center; line-height:30px; vertical-align:middle; border-bottom:1px solid #C00}
</style>
</head>
<body>
<br />
<div style="200px; height:35px;border:2px solid #C00"><input style="196px; height:31px;" type="text" id="name" /></div>
<div id="list" style="200px;">
</div>
<script type="text/javascript">
$("#name").keyup(function(){ //特别注意keyup()方法 是当输入内容的变化时的事件
//取名称
var n = $(this).val();
if(n!="")
{
//调AJAX
$.ajax({
url:"listchuli.php",
data:{n:n},
type:"POST",
dataType:"TEXT",
success: function(data){
var sz = data.split("|"); //split()是把字符串分割成数组，是个二维数组
var str = "";
for(var i=0;i<sz.length;i++)
{
str = str+"<div class='l'>"+sz[i]+"</div>"; //拼接div，然后扔给上面的框内
}
$("#list").html(str);
}
});
}
else
{
$("#list").html("");
}
})
</script>
2.处理页面
<?php $name = $_POST["n"]; include("DBDA.class.php"); $db = new DBDA(); $sql = "select areaname from chinastates where areaname like '%{$name}%' "; echo $db->StrQuery($sql);