初學者必讀原生AJAX-非同步javaScript和XML

標籤：rip   str   條件   first   check   active   element   script   read   

1.前台頁面

<form action="#" method="post">  

　　姓名<input type="text" name="first" id="first" />

　　<span id="show"></span>

</form>

action="#" 是提交到本個頁面內

 

2.在head標籤元素加入AJAX代碼

其實這個AJAX功能即是這個check（str）函數

這個函數的功能即是：傳入一個字串HELLO到後台伺服器中，背景程式經過處理之後(假設這個程式的功能即是大寫轉換成小寫)再把hello傳給這個函數，然後這個函數負責把這個responseTest   hello插入到innerHTML文檔之中

這個實現AJAX的函數功能即是：傳入字串HELLO -------用open或者send方法把這個HELLO傳到背景處理常式

----幕後處理程式把大寫換成小寫hello------然後這個函數用document.getElementById("show").innerHTML=x.responseText;把處理好的hello插入到HTML頁面之中

去訊和面試第一次聽說阿賈克斯，本質就是一個函數，和後台互動的函數

<script type="text/javascript">    function check(str){    if(window.XMLHttpRequest){                 var x=new XMLHttpRequest();   //建立對象x    }else{        var x=new ActiveXObject("Microsoft.XMLHTTP");    }    x.open("GET","test2.php?c="+str+"&q="+new Date(),true);//open方法用戶端準備發送給test2.php處理    x.send();     //用戶端發送。這2步就是請求request    x.onreadystatechange=function ff(){        if(x.readyState==4 && x.status==200){//用戶端判斷條件    //用戶端顯示       document.getElementById("show").innerHTML=x.responseText;  }  }                }     </script>                            

 

3.背景程式

<?phpif($_GET["c"]==""){  //如果$_GET["c"]為空白echo "empty";    //就輸出empty}else{     //否則echo $_GET["c"];     //輸出發送過來的資料}?>

 

初學者必讀原生AJAX-非同步javaScript和XML