php下的原生ajax請求用法實例分析
本文實例講述了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，404status//狀態文字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='' /> </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', url, 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='' /> <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; //創建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', url, 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='獲取' /> </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', url, 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='獲取' /> </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', url, true); //發送請求 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的同步與異步
通過設置open()的第三個參數true/false，來查看請求的效果。
同步請求：
發送請求->等待結果->操作完成->繼續后面代碼。我們必須等待結果處理完畢后才能繼續后面的代碼，嚴格按照步驟一步一步執行。
異步請求：
發送請求->繼續后面代碼->響應結果接收完畢->操作結果。異步請求在發送請求之后沒有等待結果的返回而是繼續執行后面的代碼，也就是說在結果返回之前用戶可以操作其他東西。
更多關于PHP相關內容可查看本站專題：《PHP+ajax技巧與應用小結》、《PHP網絡編程技巧總結》、《php字符串(string)用法總結》、《php+mysql數據庫操作入門教程》及《php常見數據庫操作技巧匯總》
希望本文所述對大家PHP程序設計有所幫助。
相關文章：
網公網安備