Ajax完整資料加代碼

什么是Ajax？

答：Ajax是一種無需加載整個網頁，就能夠更新部分網頁，與后臺交互的技術。

Ajax的優點？

答：能夠在不更新整個頁面的前提下，維護數據。這使得Web程序可以更快速的回應用戶的動作，而無需加載不必要的數據。

Ajax的缺點？

答：可能會破壞瀏覽器的后退和加入收藏書簽等功能。

Ajax實現原理？

答：在瀏覽器中，提供了一個javascript的核心類--XMLHttpRequest，該類提供的方法可以幫我們發送HTTP請求，并接收Server的響應。

Ajax學習對象？

答：學習XMLHttpRequest核心類的屬性和方法。

案例一：Ajax之GET

demo1.html

<!DOCTYPE html>
<html lang="zh" dir="ltr"><head><meta charset="utf-8"><title></title></head><body><p>用戶名:<input type="text" name="name" value=""><span id='rep'></span></p></body><script>//獲取DOM對象var ipt = document.getElementsByName('name')[0];ipt.onblur = function(){var xhr = new XMLHttpRequest();xhr.open('get','demo1.php?name='+ipt.value,true);console.log(ipt.value);xhr.send(null);var sp = document.getElementById('rep');xhr.onreadystatechange = function(){//判斷請求狀態if(this.readyState == 4){if(this.responseText == 1) {sp.innerHTML = 'Yes';} else {sp.innerHTML = 'No';}}}}</script>
</html>

demo1.php

<?phpif($_GET['name'] == 'jack') {echo 1;} else {echo 0;}?>

案例二：Ajax之POST

demo2.html

<!DOCTYPE html>
<html lang="zh" dir="ltr"><head><meta charset="utf-8"><title></title></head><body><p>用戶名:<input type="text" name="name" value=""><span id='rep'></span></p></body><script>//獲取DOM對象var ipt = document.getElementsByName('name')[0];ipt.onblur = function(){var xhr = new XMLHttpRequest();xhr.open('post','demo4.php',true);xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');var data = 'name='+this.value;xhr.send(data);var sp = document.getElementById('rep');xhr.onreadystatechange = function(){//判斷請求狀態if(this.readyState == 4){if(this.responseText == 1) {sp.innerHTML = 'Yes';} else {sp.innerHTML = 'No';}}}}</script>
</html>

demo2.php

<?phpif($_POST['name'] == 'jack') {echo 1;} else {echo 0;}?>

案例三? jQuery之Ajax實現方法

demo3.html

<!DOCTYPE html>
<html lang="zh_CN"><head><meta charset="utf-8"><title></title><script type="text/javascript" src="./jq.js"></script></head><body><input type="text" name="name" value="" /></body>
</html>
<script type="text/javascript">$('input:text').mouseout(function(){var data ={'name':this.value}console.log(data);$.POST/GET('demo3.php',data,function(res){if(res == 1) {console.log('Yes');} else {console.log('No');}});});
</script>?>

demo3.php

<?phpecho $_GET/POST['name'] =='jack'?1:0;
?>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/275994.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/275994.shtml
英文地址，請注明出處：http://en.pswp.cn/news/275994.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！