Ajax基礎與登入教程

2024-09-01 08:27:21

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

Ajax 是 Asynchronous JavaScript and XML的縮寫。

Ajax的優(yōu)點：

優(yōu)點：減輕服務器的負擔,按需取數(shù)據(jù),最大程度的減少冗余請求

局部刷新頁面,減少用戶心理和實際的等待時間,帶來更好的用戶體驗

基于xml標準化,并被廣泛支持,不需安裝插件等

進一步促進頁面和數(shù)據(jù)的分離

Ajax包含下列技術(shù)：

基于web標準（standards-based presentation）XHTML+CSS的表示；

使用 DOM（Document Object Model）進行動態(tài)顯示及交互；

使用 XML 和 XSLT 進行數(shù)據(jù)交換及相關操作；

使用 XMLHttpRequest 進行異步數(shù)據(jù)查詢、檢索；

使用 JavaScript 將所有的東西綁定在一起。　　

也就是說Ajax最大的特點就是可以實現(xiàn)動態(tài)不刷新

使用Ajax：

例子：

在數(shù)據(jù)庫中的一張表：

實現(xiàn)點擊查看用戶名是否可用：

主頁面代碼：

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title></title>    <script src="jquery-1.11.2.min.js"></script>  </head>  <body>    輸入一個用戶名：<input type="text" id="zhang" />    <span id="tishi"></span>  </body></html><script>  //給文本框加上事件  $("#zhang").blur(function(){    //1取內(nèi)容    var zhang = $(this).val();    //val取到表單元素、給變量    //2將取到的內(nèi)容內(nèi)容區(qū)數(shù)據(jù)庫驗證    //調(diào)用Ajax    $.ajax({      type:"POST",      //提交方式      url:"chuli.php",      //請求哪一個php文件（請求地址）      data:{yhm:zhang},      //給zhang取名yhm，傳過去，是一個json      //請求處理頁面需不需要傳數(shù)據(jù)過去，不需要傳不用寫      dataType:"TEXT",      //處理頁面返回的類型:TEXT字符串 JSON,JSON，XML，只有三種類型      success:function(data){        //回調(diào)函數(shù)//        data為返回的值        //成功之后要調(diào)用的函數(shù)        if(data==0)        {          //如果為0          $("#tishi").text("該用戶名為0；可用！");          $("#tishi").css("color","green");        }        else        {          $("#tishi").text("該用戶名已存在；不可用！");          $("#tishi").css("color","brown");        }      }    });    //3給出提示  })</script>

接下來做處理頁面：

<?php$zhang = $_POST["yhm"];//取值include("db.class.php");$db = new db();$sql = "select count(*) from mydb where zhang = '{$zhang}'";$arr = $db->Query($sql);echo $arr[0][0];//直接輸出相當于返回?>

圖：

輸入已存在用戶名：