php下的原生ajax請求用法實例分析
本文實例講述了php下的原生ajax請求用法。分享給大家供大家參考，具體如下：
瀏覽器中為我們提供了一個JS對象XMLHttpRequet，它可以幫助我們發(fā)送HTTP請求，并接受服務端的響應。
意味著我們的瀏覽器不提交，通過JS就可以請求服務器。
ajax(Asynchronous Javascript And XML)其實就是通過XHR對象，執(zhí)行HTTP請求。
1、創(chuàng)建XHR對象
var xhr = new XMLHttpRequest(); //暫不考慮兼容
2、XHR的對象屬性和方法
方法：open('get/post', url, true/false);//有參數則k=v&k1=v1這種形式send(null);屬性：//代表請求狀態(tài)，不斷變化，為4時，請求結束readyState//響應的內容responseText//響應的狀態(tài)碼200，403，404status//狀態(tài)文字statusText事件：//當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(); //設置請求URL var url = './ajax.php?con=' + con; //設置XHR對象readyState變化時響應函數 xhr.onreadystatechange = function () {//readyState是請求的狀態(tài)，為4表示請求結束if (xhr.readyState == 4) { //responseText服務器響應的內容 alert('服務器響應數據：' + this.responseText);} }; //打開鏈接 xhr.open('get', url, true); //發(fā)送請求 xhr.send(null); } </script></html>
ajax.php如下：
<?php$con = !empty($_GET[’con’]) ? trim($_GET[’con’]) : ’沒有數據’;echo $con;
填入數據，當鼠標焦點離開input時，觸發(fā)請求，彈出響應內容。
4、通過XHR對象發(fā)送post請求
(1)、open()第1參數為post
(2)、POST的參數以k=v&k1=v1&k2=v2的形式拼接，并用send()發(fā)送
(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; //創(chuàng)建XHR對象 var xhr = new XMLHttpRequest(); //設置請求URL var url = './ajax.php'; //設置XHR對象readyState變化時響應函數 xhr.onreadystatechange = function () {//readyState是請求的狀態(tài)，為4表示請求結束if (xhr.readyState == 4) { //responseText服務器響應的內容 alert('服務器響應數據：' + this.responseText);} }; //打開鏈接 xhr.open('post', url, true); //設置請求頭部 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’]) : ’沒有數據’;$pwd = !empty($_POST[’pwd’]) ? trim($_POST[’pwd’]) : ’沒有數據’;echo ’用戶名：’, $name, ’密碼：’, $pwd;
單擊submit后發(fā)送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 () { //創(chuàng)建XHR對象 var xhr = new XMLHttpRequest(); //設置請求URL var url = './ajax.php'; //設置XHR對象readyState變化時響應函數 xhr.onreadystatechange = function () {//readyState是請求的狀態(tài)，為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); //發(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(); //設置請求URL var url = './ajax.php'; //設置XHR對象readyState變化時響應函數 xhr.onreadystatechange = function () {//readyState是請求的狀態(tài)，為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); //發(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的同步與異步
通過設置open()的第三個參數true/false，來查看請求的效果。
同步請求：
發(fā)送請求->等待結果->操作完成->繼續(xù)后面代碼。我們必須等待結果處理完畢后才能繼續(xù)后面的代碼，嚴格按照步驟一步一步執(zhí)行。
異步請求：
發(fā)送請求->繼續(xù)后面代碼->響應結果接收完畢->操作結果。異步請求在發(fā)送請求之后沒有等待結果的返回而是繼續(xù)執(zhí)行后面的代碼，也就是說在結果返回之前用戶可以操作其他東西。
更多關于PHP相關內容可查看本站專題：《PHP+ajax技巧與應用小結》、《PHP網絡編程技巧總結》、《php字符串(string)用法總結》、《php+mysql數據庫操作入門教程》及《php常見數據庫操作技巧匯總》
希望本文所述對大家PHP程序設計有所幫助。
相關文章：
網公網安備