php下的原生ajax請(qǐng)求用法實(shí)例分析
本文實(shí)例講述了php下的原生ajax請(qǐng)求用法。分享給大家供大家參考，具體如下：
瀏覽器中為我們提供了一個(gè)JS對(duì)象XMLHttpRequet，它可以幫助我們發(fā)送HTTP請(qǐng)求，并接受服務(wù)端的響應(yīng)。
意味著我們的瀏覽器不提交，通過JS就可以請(qǐng)求服務(wù)器。
ajax(Asynchronous Javascript And XML)其實(shí)就是通過XHR對(duì)象，執(zhí)行HTTP請(qǐng)求。
1、創(chuàng)建XHR對(duì)象
var xhr = new XMLHttpRequest(); //暫不考慮兼容
2、XHR的對(duì)象屬性和方法
方法：open('get/post', url, true/false);//有參數(shù)則k=v&k1=v1這種形式send(null);屬性：//代表請(qǐng)求狀態(tài)，不斷變化，為4時(shí)，請(qǐng)求結(jié)束readyState//響應(yīng)的內(nèi)容responseText//響應(yīng)的狀態(tài)碼200，403，404status//狀態(tài)文字statusText事件：//當(dāng)readyState變化時(shí)會(huì)觸發(fā)此事件onreadystatechange = function() {};
3、通過XHR對(duì)象發(fā)送get請(qǐng)求
<!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對(duì)象 var xhr = new XMLHttpRequest(); //設(shè)置請(qǐng)求URL var url = './ajax.php?con=' + con; //設(shè)置XHR對(duì)象readyState變化時(shí)響應(yīng)函數(shù) xhr.onreadystatechange = function () {//readyState是請(qǐng)求的狀態(tài)，為4表示請(qǐng)求結(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ā)送請(qǐng)求 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)焦點(diǎn)離開input時(shí)，觸發(fā)請(qǐng)求，彈出響應(yīng)內(nèi)容。
4、通過XHR對(duì)象發(fā)送post請(qǐng)求
(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對(duì)象 var xhr = new XMLHttpRequest(); //設(shè)置請(qǐng)求URL var url = './ajax.php'; //設(shè)置XHR對(duì)象readyState變化時(shí)響應(yīng)函數(shù) xhr.onreadystatechange = function () {//readyState是請(qǐng)求的狀態(tài)，為4表示請(qǐng)求結(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è)置請(qǐng)求頭部 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); //發(fā)送請(qǐng)求 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請(qǐng)求，彈出響應(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對(duì)象 var xhr = new XMLHttpRequest(); //設(shè)置請(qǐng)求URL var url = './ajax.php'; //設(shè)置XHR對(duì)象readyState變化時(shí)響應(yīng)函數(shù) xhr.onreadystatechange = function () {//readyState是請(qǐng)求的狀態(tài)，為4表示請(qǐng)求結(jié)束if (xhr.readyState == 4) { //responseText服務(wù)器響應(yīng)的內(nèi)容 //通過eval把傳來的json字符串轉(zhuǎn)成對(duì)象 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ā)送請(qǐng)求 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對(duì)象。
<!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對(duì)象 var xhr = new XMLHttpRequest(); //設(shè)置請(qǐng)求URL var url = './ajax.php'; //設(shè)置XHR對(duì)象readyState變化時(shí)響應(yīng)函數(shù) xhr.onreadystatechange = function () {//readyState是請(qǐng)求的狀態(tài)，為4表示請(qǐng)求結(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ā)送請(qǐng)求 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()的第三個(gè)參數(shù)true/false，來查看請(qǐng)求的效果。
同步請(qǐng)求：
發(fā)送請(qǐng)求->等待結(jié)果->操作完成->繼續(xù)后面代碼。我們必須等待結(jié)果處理完畢后才能繼續(xù)后面的代碼，嚴(yán)格按照步驟一步一步執(zhí)行。
異步請(qǐng)求：
發(fā)送請(qǐng)求->繼續(xù)后面代碼->響應(yīng)結(jié)果接收完畢->操作結(jié)果。異步請(qǐng)求在發(fā)送請(qǐng)求之后沒有等待結(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ù)庫操作技巧匯總》
希望本文所述對(duì)大家PHP程序設(shè)計(jì)有所幫助。
相關(guān)文章：
1. python基于scrapy爬取京東筆記本電腦數(shù)據(jù)并進(jìn)行簡單處理和分析2. vue實(shí)現(xiàn)移動(dòng)端返回頂部3. asp讀取xml文件和記數(shù)4. xml中的空格之完全解說5. 多個(gè)SpringBoot項(xiàng)目采用redis實(shí)現(xiàn)Session共享功能6. vue 驗(yàn)證兩次輸入的密碼是否一致的方法示例7. python利用opencv實(shí)現(xiàn)顏色檢測8. CSS自定義滾動(dòng)條樣式案例詳解9. Python如何實(shí)現(xiàn)感知器的邏輯電路10. PHP實(shí)現(xiàn)基本留言板功能原理與步驟詳解
網(wǎng)公網(wǎng)安備