標籤：set 函數 status type json格式 不提交 結束 cal sync
瀏覽器中為我們提供了一個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="" 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如下：
<?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="" 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如下：
<?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="擷取" 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如下：
<?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="擷取" 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如下：
<?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下的原生ajax請求
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
