日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 >

Ajax完整资料加代码

發布時間：2023/12/9 42 豆豆
生活随笔 收集整理的這篇文章主要介紹了 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; ?>








總結

以上是生活随笔為你收集整理的Ajax完整资料加代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。