PHP開發(fā)基礎(chǔ)教程之向伺服器發(fā)送請求
一、向伺服器發(fā)送請求
1、XMLHttpRequest 物件用於和伺服器交換資料。
2、向伺服器發(fā)送請求
#?如需將請求傳送到伺服器，我們使用XMLHttpRequest 物件的open() 和send() 方法：
????xmlhttp.open("GET","test1.txt",true);
? ? xmlhttp.send();
3、使用GET 或POST
#與POST 相比，GET 更簡單也更快，並且在大部分情況下都能用。
然而，在以下情況中，請使用POST 請求：
#無法使用快取檔案（更新伺服器上的檔案或資料庫）
傳送大量資料（POST 沒有資料量限制）
傳送包含未知字元的使用者輸入時(shí)， POST 比GET 更穩(wěn)定也更可靠
接下來，透過實(shí)際例子來帶大家理解這兩種請求
4、GET請求
一個(gè)簡單的GET請求：
源碼2_1.php ?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","2_2.php",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">請求數(shù)據(jù)</button>
<div id="myDiv"></div>
</body>
</html>源碼2_2.php
<?php
echo "使用GET方法請求得到的<br/>";
echo date("Y-m-d h:i:s",time());
?>如果您希望透過GET 方法傳送訊息，請?jiān)赨RL 中加入訊息：
原始碼2_5.php?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","2_6.php?name=小明",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">請求數(shù)據(jù)</button>
<div id="myDiv"></div>
</body>
</html>來源碼2_6.php
<?php $name=$_GET['name']; echo "使用GET方法請求得到的<br/>"; echo "你好".$name."同學(xué)"; ?>
5、POST請求
原始碼2_3.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","2_4.php?",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">請求數(shù)據(jù)</button>
<div id="myDiv"></div>
</body>
</html>?2_4.php
#<?php
echo "使用POST方法請求得到的<br/>";
echo date("Y-m-d h:i:s",time());
?>如果需要像HTML 表單一樣POST 數(shù)據(jù)，請使用setRequestHeader() 來新增HTTP 頭。然後在send() 方法中規(guī)定您希望傳送的資料：
原始碼2_7.php?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","2_8.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name=小明&age=22");
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">請求數(shù)據(jù)</button>
<div id="myDiv"></div>
</body>
</html>2_8.php
<?php $name=$_POST['name']; $age=$_POST['age']; echo "使用POST方法請求得到的<br/>"; echo "大家好，我叫".$name."今年".$age."歲"; ?>
6、名詞解釋
（1）url-伺服器上的檔案
?open () 方法的url 參數(shù)是伺服器上檔案的位址：
xmlhttp.open("GET","ajax_test.php",true);
該文件可以是任何類型的文件，例如.txt 和.xml，或伺服器腳本文件，例如.asp 和.php （在傳迴響應(yīng)之前，能夠在伺服器上執(zhí)行任務(wù)） 。
（2）非同步-true/false
AJAX 指的是非同步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
XMLHttpRequest 物件如果要用於AJAX 的話，其open() 方法的async 參數(shù)必須設(shè)為true：
xmlhttp.open("GET","ajax_test.php",true) ;
對於web 開發(fā)人員來說，發(fā)送非同步請求是一個(gè)巨大的進(jìn)步。很多在伺服器執(zhí)行的任務(wù)都相當(dāng)費(fèi)時(shí)。 AJAX 出現(xiàn)之前，這可能會導(dǎo)致應(yīng)用程式掛起或停止。
透過AJAX，JavaScript 不需要等待伺服器的回應(yīng)，而是：
在等待伺服器回應(yīng)時(shí)執(zhí)行其他腳本
當(dāng)回應(yīng)就緒後對回應(yīng)進(jìn)行處理
#（3）Async=true
#當(dāng)使用async=true 時(shí)，請規(guī)定在回應(yīng)處於onreadystatechange 事件中的就緒狀態(tài)時(shí)執(zhí)行的函數(shù)：
原始碼：2_9.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","2_10.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">通過AJAX改變內(nèi)容</button>
<div id="myDiv"></div>
</body>
</html>??2_10.txt
這是通過AJAX得到的內(nèi)容！?。?/pre>?
（4）Async=false
#如需使用async=false，請將open() 方法中的第三個(gè)參數(shù)改為false：
xmlhttp.open("GET","test1.txt",false);
我們不建議使用async=false，但是對於一些小型的請求，也是可以的。
請記住，JavaScript 會等到伺服器回應(yīng)就緒才繼續(xù)執(zhí)行。如果伺服器繁忙或緩慢，應(yīng)用程式會掛起或停止。
註解：當(dāng)您使用async=false 時(shí)，請不要寫onreadystatechange 函數(shù)- 把程式碼放到send() 語句後面即可：
#原始碼：2_11. php ?
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET","2_10.txt",false); xmlhttp.send(); document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } </script> </head> <body> <h2>AJAX</h2> <button type="button" onclick="loadXMLDoc()">請求數(shù)據(jù)</button> <div id="myDiv"></div> </body> </html>2_10.txt
這是通過AJAX得到的內(nèi)容?。。?/pre>?
?
?
########
