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里面的回调函数进行处理

看看效果