生活随笔
收集整理的這篇文章主要介紹了
php下的原生ajax请求
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
瀏覽器中為我們提供了一個JS對象XMLHttpRequet，它可以幫助我們發送HTTP請求，并接受服務端的響應。
意味著我們的瀏覽器不提交，通過JS就可以請求服務器。
?
ajax(Asynchronous Javascript And XML)其實就是通過XHR對象，執行HTTP請求。
?
1、創建XHR對象
| 1 | var?xhr =?new?XMLHttpRequest();?//暫不考慮兼容 |
2、XHR的對象屬性和方法
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | 方法： open("get/post", url, true/false); //有參數則k=v&k1=v1這種形式 send(null); ? 屬性： //代表請求狀態，不斷變化，為4時，請求結束 readyState //響應的內容 responseText //響應的狀態碼200，403，404 status //狀態文字 statusText ? 事件： //當readyState變化時會觸發此事件 onreadystatechange =?function() {}; |
3、通過XHR對象發送get請求
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <!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; ????????????//創建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如下：
| 1 2 3 | <?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
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <!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; ????????????//創建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如下：
| 1 2 3 4 | <?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格式
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!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?() { ????????????//創建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如下：
| 1 2 3 4 5 6 7 | <?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對象。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!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?() { ????????????//創建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如下：
| 1 2 3 4 5 6 7 8 9 10 11 | <?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的同步與異步
通過設置open()的第三個參數true/false，來查看請求的效果。
?
同步請求：
發送請求->等待結果->操作完成->繼續后面代碼。我們必須等待結果處理完畢后才能繼續后面的代碼，嚴格按照步驟一步一步執行。
?
異步請求：
發送請求->繼續后面代碼->響應結果接收完畢->操作結果。異步請求在發送請求之后沒有等待結果的返回而是繼續執行后面的代碼，也就是說在結果返回之前用戶可以操作其他東西。
總結
以上是生活随笔為你收集整理的php下的原生ajax请求的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
