Ajax完整资料加代码
生活随笔
收集整理的這篇文章主要介紹了
Ajax完整资料加代码
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
- 什么是Ajax？
- Ajax的優(yōu)點？
- Ajax的缺點？
- Ajax實現(xiàn)原理？
- Ajax學(xué)習(xí)對象？
案例一：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(){//判斷請求狀態(tài)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(){//判斷請求狀態(tài)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實現(xiàn)方法 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; ?>
總結(jié)
以上是生活随笔為你收集整理的Ajax完整资料加代码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux tuxedo查看服务进程数,
- 下一篇： 图解TCPIP协议