php下的原生ajax請求用法實例分析
本文實例講述了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，404status//狀態(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='' /> </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='' /> <input type='password' name='pwd' value='' /> <input type='submit' name='sub' value='提交' /> </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='獲取' /> </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='獲取' /> </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如下：
<?phpheader(’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)文章：
1. Vue elementui字體圖標(biāo)顯示問題解決方案2. springboot用controller跳轉(zhuǎn)html頁面的實現(xiàn)3. VSCode中 Eslint 和 Prettier 沖突問題最新解決方法4. Java 如何解析key為動態(tài)的json操作5. java實現(xiàn)基于TCP協(xié)議網(wǎng)絡(luò)socket編程(C/S通信)6. IIS Express 取代 ASP.NET Development Server的配置方法7. Java ShutdownHook原理詳解8. IIS+PHP添加對webp格式圖像的支持配置方法9. python 日志模塊logging的使用場景及示例10. 使用session upload_progress實現(xiàn)文件包含實例詳解
網(wǎng)公網(wǎng)安備