如何用原生JS實作Ajax的GET POST請求
- 一个新手原創
- 2017-09-27 13:15:093097瀏覽
傳統方法的的缺陷
傳統的web交互是用戶觸發一個http請求伺服器,然後伺服器收到之後,在做出響應到用戶,並且返回一個新的頁面,,每當伺服器處理客戶端提交的請求時,客戶都只能空閒等待,並且哪怕只是一次很小的交互、只需從伺服器端得到很簡單的一個資料,都要返回一個完整的HTML頁,而使用者每次都要浪費時間和頻寬去重新讀取整個頁面。這個做法浪費了許多頻寬，由於每次應用的互動都需要向伺服器發送請求，應用程式的回應時間就依賴伺服器的回應時間。這導致了用戶介面的回應比本地應用慢得多。
Ajax出現
ajax的出現,剛好解決了傳統方法的缺陷。 AJAX 是一種用於建立快速動態網頁的技術。透過在後台與伺服器進行少量資料交換，AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某個部分進行更新。
Get請求
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="showInfo"></p>
<form id="form">
用户名:<input type="text" name="username" id="username"/><br />
密码:<input type="password" name="password" id="passowrd" />
<input type="button" value="提交" id="btn" />
</form>
<script type="text/javascript">
window.onload=function(){
var btn=document.getElementById("btn");
btn.onclick=function(){
var username=document.getElementById("username").value;
var password=document.getElementById("passowrd").value;
var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject('Microsoft.XMLHTTP');
} var url='new_file.php?username='+username+'&password='+password;
xhr.open('get',url,true);
xhr.onreadystatechange=function(){
if(xhr.readyState==4){ if(xhr.status==200){ var data=xhr.responseText; if(data==1){
document.getElementById("showInfo").innerHTML='提交失败';
}else if(data==2){
document.getElementById("showInfo").innerHTML='提交成功后';
}
}
}
}
xhr.send(null);
}
} </script>
</body></html>Post請求
#new_file.php
<?php
//$username = $_GET['username'];
//$password = $_GET['password'];$username=$_POST['username'];
$password=$_POST['password'];
if($username == 'admin' && $password == '123'){
echo 2;
}else{
echo 1;
}
?>注意：
ajax請求是非同步請求，所以open的第三個參數應該設定為ture，可是我試過在get請求的時候，false，也就是設定為同步請求，仍然不會報錯，但還是推薦設定為true：進行非同步請求。
以上是如何用原生JS實作Ajax的GET POST請求的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn