php下的原生ajax請求用法例項分析
阿新 • • 發佈：2020-03-01
本文例項講述了php下的原生ajax請求用法。分享給大家供大家參考，具體如下：
瀏覽器中為我們提供了一個JS物件XMLHttpRequet，它可以幫助我們傳送HTTP請求，並接受服務端的響應。
意味著我們的瀏覽器不提交，通過JS就可以請求伺服器。
ajax(Asynchronous Javascript And XML)其實就是通過XHR物件，執行HTTP請求。
1、建立XHR物件
var xhr = new XMLHttpRequest(); //暫不考慮相容
2、XHR的物件屬性和方法
方法：
open("get/post",url,true/false);
//有引數則k=v&k1=v1這種形式
send(null);
屬性：
//代表請求狀態，不斷變化，為4時，請求結束
readyState
//響應的內容
responseText
//響應的狀態碼200，403，404
status
//狀態文字
statusText
事件：
//當readyState變化時會觸發此事件
onreadystatechange = function() {};
3、通過XHR物件傳送get請求
<!DOCTYPE html>
<html>
<head>
<title>ajax</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<div id="box">
<input type="text" name="con" value="" id="con" />
</div>
</body>
<script type="text/javascript">
var ipt = document.getElementById("con");
ipt.onblur = function () {
var con = this.value;
//建立XHR物件
var xhr = new XMLHttpRequest();
//設定請求URL
var url = "./ajax.php?con=" + con;
//設定XHR物件readyState變化時響應函式
xhr.onreadystatechange = function () {
//readyState是請求的狀態，為4表示請求結束
if (xhr.readyState == 4) {
//responseText伺服器響應的內容
alert("伺服器響應資料：" + this.responseText);
}
};
//開啟連結
xhr.open("get",true);
//傳送請求
xhr.send(null);
}
</script>
</html>
ajax.php如下：
<?php $con = !empty($_GET['con']) ? trim($_GET['con']) : '沒有資料'; echo $con;
填入資料，當滑鼠焦點離開input時，觸發請求，彈出響應內容。
4、通過XHR物件傳送post請求
(1)、open()第1引數為post
(2)、POST的引數以k=v&k1=v1&k2=v2的形式拼接，並用send()傳送
(3)、必須要設定Content-Type為application/x-www-form-urlencoded
<!DOCTYPE html>
<html>
<head>
<title>ajax</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<div id="box">
<input type="text" name="name" value="" id="name" />
<input type="password" name="pwd" value="" id="pwd" />
<input type="submit" name="sub" value="提交" id="sub" />
</div>
</body>
<script type="text/javascript">
var sub = document.getElementById("sub");
sub.onclick = function () {
var name = document.getElementById("name").value;
var pwd = document.getElementById("pwd").value;
//建立XHR物件
var xhr = new XMLHttpRequest();
//設定請求URL
var url = "./ajax.php";
//設定XHR物件readyState變化時響應函式
xhr.onreadystatechange = function () {
//readyState是請求的狀態，為4表示請求結束
if (xhr.readyState == 4) {
//responseText伺服器響應的內容
alert("伺服器響應資料：" + this.responseText);
}
};
//開啟連結
xhr.open("post",true);
//設定請求頭部
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//傳送請求
xhr.send("name=" + name + "&pwd=" + pwd);
}
</script>
</html>
ajax.php如下：
<?php $name = !empty($_POST['name']) ? trim($_POST['name']) : '沒有資料'; $pwd = !empty($_POST['pwd']) ? trim($_POST['pwd']) : '沒有資料'; echo '使用者名稱：',$name,'密碼：',$pwd;
單擊submit後傳送post請求，彈出響應資訊。
5、返回值json，html，text，xml
返回值只有兩種text，和xml。不過text內容中可以是一段html或json結構的字串。
(1)、返回json格式
<!DOCTYPE html>
<html>
<head>
<title>ajax</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<div id="box">
<select id="city"></select>
<input type="button" value="獲取" id="get" />
</div>
</body>
<script type="text/javascript">
var get = document.getElementById("get");
var city = document.getElementById("city");
get.onclick = function () {
//建立XHR物件
var xhr = new XMLHttpRequest();
//設定請求URL
var url = "./ajax.php";
//設定XHR物件readyState變化時響應函式
xhr.onreadystatechange = function () {
//readyState是請求的狀態，為4表示請求結束
if (xhr.readyState == 4) {
//responseText伺服器響應的內容
//通過eval把傳來的json字串轉成物件
var data = eval(this.responseText);
var str = "";
for(var ix in data) {
str += "<option value='" + data[ix].id + "'>" + data[ix].name + "</option>";
}
city.innerHTML = str;
}
};
//開啟連結
xhr.open("get",true);
//傳送請求
xhr.send(null);
}
</script>
</html>
ajax.php如下：
<?php
$data = array(
array('id' => 1,'name' => '上海'),array('id' => 2,'name' => '北京'),array('id' => 3,'name' => '深圳'),);
echo json_encode($data);
(2)、返回xml格式
xml通過responseXML來讀取，responseXML不是字串，是DOM物件。
<!DOCTYPE html>
<html>
<head>
<title>ajax</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<div id="box">
<div id="news"></div>
<input type="button" value="獲取" id="get" />
</div>
</body>
<script type="text/javascript">
var get = document.getElementById("get");
var news = document.getElementById("news");
get.onclick = function () {
//建立XHR物件
var xhr = new XMLHttpRequest();
//設定請求URL
var url = "./ajax.php";
//設定XHR物件readyState變化時響應函式
xhr.onreadystatechange = function () {
//readyState是請求的狀態，為4表示請求結束
if (xhr.readyState == 4) {
//responseXML伺服器響應的內容
var data = this.responseXML;
var str = "";
var title = data.getElementsByTagName("title");
str += "<p>" + title[0].childNodes[0].nodeValue + "</p>";
str += "<p>" + title[1].childNodes[0].nodeValue + "</p>";
str += "<p>" + title[2].childNodes[0].nodeValue + "</p>";
news.innerHTML = str;
}
};
//開啟連結
xhr.open("get",true);
//傳送請求
xhr.send(null);
}
</script>
</html>
ajax.php如下：
<?php
header('Content-Type: text/xml;charset=utf-8');
$xml = <<<EOD
<?xml version="1.0" encoding="utf-8"?>
<news>
<title>111</title>
<title>222</title>
<title>333</title>
</news>
EOD;
echo $xml;
6、ajax的同步與非同步
通過設定open()的第三個引數true/false，來檢視請求的效果。
同步請求：
傳送請求->等待結果->操作完成->繼續後面程式碼。我們必須等待結果處理完畢後才能繼續後面的程式碼，嚴格按照步驟一步一步執行。
非同步請求：
傳送請求->繼續後面程式碼->響應結果接收完畢->操作結果。非同步請求在傳送請求之後沒有等待結果的返回而是繼續執行後面的程式碼，也就是說在結果返回之前使用者可以操作其他東西。
更多關於PHP相關內容可檢視本站專題：《PHP+ajax技巧與應用小結》、《PHP網路程式設計技巧總結》、《php字串(string)用法總結》、《php+mysql資料庫操作入門教程》及《php常見資料庫操作技巧彙總》
希望本文所述對大家PHP程式設計有所幫助。