ajax基础及简单实例
ajax（ asynchronous JavaScript xml ，异步JS和xml）技术是通过在后台与服务器进行少量数据交换，使网页实现异步更新。这样就可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
先来看个简单的例子，就是当我们在注册时，如果用户名已存在，我们如何通过ajax技术来进行数据的处理
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <script src="../jquery-1.11.2.min.js"></script> 7 </head> 8 9 <body> 10 11 <input type="text" id="uid" /><span id="ts"></span> 12 13 </body> 14 <script type="text/javascript"> 15 16 $("#uid").blur(function(){ 17 //取出用户名 18 var uid = $(this).val(); 19 20 //去数据库进行匹配 21 $.ajax({ 22 url:"chuli.php", //处理页面的路径 23 data:{u:uid}, //要提交的数据是一个JSON 24 type:"POST", //提交方式 25 dataType:"TEXT", //返回数据的类型 26 //TEXT字符串 JSON返回JSON XML返回XML 27 success:function(data){ //回调函数 ,成功时返回的数据存在形参data里 28 if(data.trim()=="OK") //trim()方法会去掉页面中的冗余空格 29 { 30 $("#ts").html("该用户名可用"); 31 $("#ts").css("color","green"); 32 } 33 else 34 { 35 $("#ts").html("该用户名不可用"); 36 $("#ts").css("color","red"); 37 } 38 } 39 }); 40 }) 41 42 </script> 43 </html>
下面是ajax发生数据到相应php处理页面
1 <?php 2 $uid = $_POST["u"]; //通过ajax发送的data：json的key数据来接收相应的value 3 require "DataBse.class.php"; 4 $db = new DataBase(); 5 6 $sql = "select count(*) from users where uid='{$uid}'"; 7 8 $arr = $db->query($sql); 9 10 if($arr[0][0]) 11 { 12 echo "NO"; //处理页面的所有输出内容都将返回给success里面的回调data 13 } 14 else 15 { 16 echo "OK"; 17 }
看看效果
登陆的逻辑和做法和注册类似。
2.利用ajax完成调用数据页面的加载
以前了解的方法就是在页面中嵌入php代码去调数据，然后刷新页面完成加载，这里我们说下如何用ajax完成数据加载（感觉比嵌入php要繁琐一些，因为还没接触数据库内容转成son数据传输） 先来看看吧
第一个例子 加载个基础select下拉选择
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <script src="../jquery-1.11.2.min.js"></script> 7 </head> 8 9 <body> 10 <h1>显示数据</h1> 11 12 <select id="sel"> //先写个下拉的外标签 ，内容先空着，等着加载过来数据 13 14 </select> 15 16 </body> 17 <script type="text/javascript"> 18 $(document).ready(function(e) { //页面加载完开始执行 19 20 21 $.ajax({ //调用ajax方法 22 async:false, //async表示异步，有两个值，false表示同步（页面加载顺序是一步步来的，下面的内容加载要等ajax执行结束才开始），true表示同步（加载过程不影响ajax下面的数据继续执行） 23 url:"chuli.php", 24 dataType:"TEXT", 25 success: function(data){ 26 var hang = data.split("|"); //将返回的数据调用split方法进行拆分，返回的hang数组就是每一行的数据 27 var str = ""; //定义一个空字符串，来存最后数据 28 for(var i=0;i<hang.length;i++) //将每行的数据循环遍历， 29 { 30 var lie = hang[i].split("^"); //行的每个数据就代表列，然后调用split方法继续将列数据拆开 31 str = str +"<option value='"+lie[0]+"'>"+lie[1]+"</option>"; //定义所有的数据都放在option标签里，然后存入str 32 } 33 $("#sel").html(str); //将str内容放入下拉列表中 34 35 } 36 }); 37 38 39 }); 40 </script> 41 </html>
看一下处理页面，不看处理页面可能看不懂返回数据的处理
1 <?php 2 require "DataBase.class.php"; 3 $db = new DataBase(); 4 5 $sql = "select * from login"; 6 7 //var_dump($arr); 8 9 $arr=$db->query($sql); 10 11 $str=""; 12 foreach ($arr as $v){ 13 $str.=implode("^",$v)."|"; //将每个$v之间用 |分开 然后$v里面的每个数据中间用^分开 14 15 16 } 17 $str=substr($str,0,strlen($str)-1); //最后末尾会多余一个|,用字符串截取一下，去掉最后一个 18 echo $str;
处理页面返回的字符串是一个长字符串 类似于 k001^zhangsan^123 | k002^lisi^123 |k003^wangwu^123
然后交给ajax里面的回调函数进行处理
看看效果
