php下的原生ajax請求用法實例分析
更新時間：2020年02月28日 08:47:09 作者：懷素真
這篇文章主要介紹了php下的原生ajax請求用法,結(jié)合實例形式分析了前臺原生ajax請求與后臺PHP響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了php下的原生ajax請求用法。分享給大家供大家參考，具體如下：
瀏覽器中為我們提供了一個JS對象XMLHttpRequet，它可以幫助我們發(fā)送HTTP請求，并接受服務(wù)端的響應(yīng)。
意味著我們的瀏覽器不提交，通過JS就可以請求服務(wù)器。
ajax(Asynchronous Javascript And XML)其實就是通過XHR對象，執(zhí)行HTTP請求。
1、創(chuàng)建XHR對象
var xhr = new XMLHttpRequest(); //暫不考慮兼容
2、XHR的對象屬性和方法
方法：
open("get/post", url, true/false);
//有參數(shù)則k=v&k1=v1這種形式
send(null);
屬性：
//代表請求狀態(tài)，不斷變化，為4時，請求結(jié)束
readyState
//響應(yīng)的內(nèi)容
responseText
//響應(yīng)的狀態(tài)碼200，403，404
status
//狀態(tài)文字
statusText
事件：
//當(dāng)readyState變化時會觸發(fā)此事件
onreadystatechange = function() {};
3、通過XHR對象發(fā)送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;
//創(chuàng)建XHR對象
var xhr = new XMLHttpRequest();
//設(shè)置請求URL
var url = "./ajax.php?con=" + con;
//設(shè)置XHR對象readyState變化時響應(yīng)函數(shù)
xhr.onreadystatechange = function () {
//readyState是請求的狀態(tài)，為4表示請求結(jié)束
if (xhr.readyState == 4) {
//responseText服務(wù)器響應(yīng)的內(nèi)容
alert("服務(wù)器響應(yīng)數(shù)據(jù)：" + this.responseText);
}
};
//打開鏈接
xhr.open("get", url, true);
//發(fā)送請求
xhr.send(null);
}
</script>
</html>
ajax.php如下：
<?php $con = !empty($_GET['con']) ? trim($_GET['con']) : '沒有數(shù)據(jù)'; echo $con;
填入數(shù)據(jù)，當(dāng)鼠標(biāo)焦點離開input時，觸發(fā)請求，彈出響應(yīng)內(nèi)容。
4、通過XHR對象發(fā)送post請求
(1)、open()第1參數(shù)為post
(2)、POST的參數(shù)以k=v&k1=v1&k2=v2的形式拼接，并用send()發(fā)送
(3)、必須要設(shè)置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;
//創(chuàng)建XHR對象
var xhr = new XMLHttpRequest();
//設(shè)置請求URL
var url = "./ajax.php";
//設(shè)置XHR對象readyState變化時響應(yīng)函數(shù)
xhr.onreadystatechange = function () {
//readyState是請求的狀態(tài)，為4表示請求結(jié)束
if (xhr.readyState == 4) {
//responseText服務(wù)器響應(yīng)的內(nèi)容
alert("服務(wù)器響應(yīng)數(shù)據(jù)：" + this.responseText);
}
};
//打開鏈接
xhr.open("post", url, true);
//設(shè)置請求頭部
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//發(fā)送請求
xhr.send("name=" + name + "&pwd=" + pwd);
}
</script>
</html>
ajax.php如下：
<?php $name = !empty($_POST['name']) ? trim($_POST['name']) : '沒有數(shù)據(jù)'; $pwd = !empty($_POST['pwd']) ? trim($_POST['pwd']) : '沒有數(shù)據(jù)'; echo '用戶名：', $name, '密碼：', $pwd;
單擊submit后發(fā)送post請求，彈出響應(yīng)信息。
5、返回值json，html，text，xml
返回值只有兩種text，和xml。不過text內(nèi)容中可以是一段html或json結(jié)構(gòu)的字符串。
(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 () {
//創(chuàng)建XHR對象
var xhr = new XMLHttpRequest();
//設(shè)置請求URL
var url = "./ajax.php";
//設(shè)置XHR對象readyState變化時響應(yīng)函數(shù)
xhr.onreadystatechange = function () {
//readyState是請求的狀態(tài)，為4表示請求結(jié)束
if (xhr.readyState == 4) {
//responseText服務(wù)器響應(yīng)的內(nèi)容
//通過eval把傳來的json字符串轉(zhuǎn)成對象
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", url, true);
//發(fā)送請求
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 () {
//創(chuàng)建XHR對象
var xhr = new XMLHttpRequest();
//設(shè)置請求URL
var url = "./ajax.php";
//設(shè)置XHR對象readyState變化時響應(yīng)函數(shù)
xhr.onreadystatechange = function () {
//readyState是請求的狀態(tài)，為4表示請求結(jié)束
if (xhr.readyState == 4) {
//responseXML服務(wù)器響應(yīng)的內(nèi)容
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", url, true);
//發(fā)送請求
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的同步與異步
通過設(shè)置open()的第三個參數(shù)true/false，來查看請求的效果。
同步請求：
發(fā)送請求->等待結(jié)果->操作完成->繼續(xù)后面代碼。我們必須等待結(jié)果處理完畢后才能繼續(xù)后面的代碼，嚴(yán)格按照步驟一步一步執(zhí)行。
異步請求：
發(fā)送請求->繼續(xù)后面代碼->響應(yīng)結(jié)果接收完畢->操作結(jié)果。異步請求在發(fā)送請求之后沒有等待結(jié)果的返回而是繼續(xù)執(zhí)行后面的代碼，也就是說在結(jié)果返回之前用戶可以操作其他東西。
更多關(guān)于PHP相關(guān)內(nèi)容可查看本站專題：《PHP+ajax技巧與應(yīng)用小結(jié)》、《PHP網(wǎng)絡(luò)編程技巧總結(jié)》、《php字符串(string)用法總結(jié)》、《php+mysql數(shù)據(jù)庫操作入門教程》及《php常見數(shù)據(jù)庫操作技巧匯總》
希望本文所述對大家PHP程序設(shè)計有所幫助。
相關(guān)文章
php實現(xiàn)統(tǒng)計二進(jìn)制中1的個數(shù)算法示例
這篇文章主要介紹了php實現(xiàn)統(tǒng)計二進(jìn)制中1的個數(shù)算法,結(jié)合實例形式分析了php字符串遍歷、判斷、統(tǒng)計等相關(guān)操作技巧,需要的朋友可以參考下2018-01-01
這篇文章主要介紹了PHP實現(xiàn)的猴王算法(猴子選大王),對比分析了兩種PHP猴王算法,涉及PHP數(shù)組遍歷、判斷、遞歸等相關(guān)操作技巧,需要的朋友可以參考下2018-04-04
PHP 讀取文件的多種方法，讓我們算一算有多少種方法2009-04-04
本篇文章是對PHP數(shù)據(jù)類型進(jìn)行了詳細(xì)的總結(jié)與分析，需要的朋友參考下2013-06-06
大家都知道array_rand是數(shù)組隨機(jī)函數(shù)了，今天看到一個站長簡單的介紹array_rand性能了，于是把許久沒寫的php再來簡單的看看，我們一起來看看array_rand函數(shù)用法吧。有需要的朋友們可以參考學(xué)習(xí)。2016-09-09
PHP 截取字符串函數(shù)整理(支持gb2312和utf-8)
常見的 PHP 截取字符串函數(shù)整理,支持gb2312和utf-8編碼，方法php開發(fā)中需要用到截取字符串的問題。2010-02-02
PHP-FPM 設(shè)置多pool及配置文件重寫操作示例
這篇文章主要介紹了PHP-FPM 設(shè)置多pool及配置文件重寫操作,涉及PHP使用PHP-FPM實現(xiàn)進(jìn)程管理的相關(guān)操作技巧,需要的朋友可以參考下2019-10-10
php遞歸創(chuàng)建和刪除文件夾的代碼小結(jié)
有時候需要遞歸創(chuàng)建和刪除文件夾，那么就可以參考下面的代碼2012-04-04
本篇文章是對PHP中Socket的配置以及實例進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-06-06
這篇文章主要介紹了PHP變量傳值賦值和引用賦值變量銷毀，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03