原生Ajax用法——一個簡單的執行個體

Ajax全名(Asynchronous(異步) JavaScript and XML )是可以實作局部重新整理的

在講AJax之前我們先用簡單的執行個體說一下同步和異步這個概念

/*異步的概念(就是當上司有一個吩咐讓秘書去叫小李，秘書就去叫小李了，而上司接着做自己的事），而不是什麼也不做就等着秘書告訴老闆小李來了

具體的異步概念是這樣的:

就是背景與界面可以進行資料互動，而界面則可以繼續保持一直跟使用者互動而不受影響。
反之就是同步的概念喽*/

          原生Ajax用法——一個簡單的執行個體

/*上司就相當于(用戶端,浏覽器) 而秘書就相當于XHR(XMLHttpRequest這個對象) 小李就是伺服器喽 (員工當然要給老闆服務，要不哪來的錢迎娶白富美？)

就是用戶端在浏覽器會發送一個請求(request)這個請求由XHR幫你去告訴伺服器

然後伺服器傳回你想要讓XHR在告訴你（XHR就相當于不賺差價的中間商

首先寫點代碼吧*/
<div id="show"></div>
<form method="get">
<p>admin:<input type="text" id="username"/></p>
<p>password:<input type="password" id="password" /></p>
<input type="button" id="btn" value="method">
</form>
js代碼
function $(id){return document.getElementById(id);}
var btn=$("btn");
btn.onclick=function(){
var username=$("username").value;
var password=$("password").value;

var xhr=null;//建立一個XML對象
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();//标準浏覽器
}
else{
xhr=new ActiveXObject("Microsoft.XMLHTTP");//IE
}
var url="ajax.php?username="+username+"&password="+password;
//?後面是變量，&連接配接變量
xhr.open("get",url,true);//準備發送請求-配置發送請求的一些行為
//true代表異步，false代表同步  

xhr.onreadystatechange=function(){

/*每當readyState變化時，都會觸發這個事件由浏覽器做
傳回0:XMLHttpRequest建立完成
傳回1:準備好發送的請求了，但是還沒有發送
傳回2:發送請求完成了
傳回3:伺服器傳回資料
傳回4：傳回的資料可以用了
*/

if(xhr.readyState==4)//readyState 等于 4 且status為 200 時，表示響應已就緒

{
   if(xhr.status==200)
  {
     var data=xhr.responseText;//獲得字元串形式的響應資訊 JSON
     if(data==1){
        $("show").innerHTML="登陸成功!";
   }
    else if(data==2){
     $("show").innerHTML="賬号或密碼錯誤";
   }
    }
     }
      }
xhr.send(null);

}

/*到現在位置代碼是不能實作成功的因為php頁面沒有寫 而且要在一台電腦實作用戶端服務端需要
下載下傳軟體 我用的是phpstudy*/

          原生Ajax用法——一個簡單的執行個體

很好用 百度直接可以下載下傳，安裝也簡單，下一步即可。
點選其他選項菜單裡面有一個網站根目錄 把html,php檔案放到一起就好了
通路的時候要在位址欄寫localhost/xxx.html

          原生Ajax用法——一個簡單的執行個體             
預設端口是80我改了而已
讓我們寫php代碼 很簡單
$username=$_GET["username"];//擷取賬号
$password=$_GET["password"];//擷取密碼

從這裡面擷取到的

<?php

if($username=="1234"&&$password=="abcd"){
echo 1;
}
else{
echo 2;
}
?>

OJBK了到這裡已經

  原生Ajax用法——一個簡單的執行個體