一直知道

ajax 但是尚未真正了解， 這次看了慕課網(wǎng)的《Ajax全接觸》，算是有所收獲，入了個(gè)門。
需要用到php，因?yàn)?Ajax也是向服務(wù)器請(qǐng)求（不知道這么解釋對(duì)不對(duì)）， 所以還需要配置環(huán)境， 我用的是 phpstudy ，很簡(jiǎn)單好用
請(qǐng)先了解過 http
（沒創(chuàng)建數(shù)據(jù)庫(kù)， 所以并沒有真正的保存）

---

隨便寫個(gè)靜態(tài)頁面

<h1>員工查詢</h1><label>請(qǐng)輸入員工編號(hào)：</label> <input type="text" id="keyword" /> <button id="search">查詢</button> <p id="searchResult"></p><h1>員工新建</h1><label>請(qǐng)輸入員工姓名：</label> <input type="text" id="staffName" /><br> <label>請(qǐng)輸入員工編號(hào)：</label> <input type="text" id="staffNumber" /><br> <label>請(qǐng)選擇員工性別：</label> <select id="staffSex"> <option>女</option> <option>男</option> </select><br> <label>請(qǐng)輸入員工職位：</label> <input type="text" id="staffJob" /><br> <button id="save">保存</button> <p id="createResult"></p>

寫一個(gè)叫 server.php 的頁面，作用是響應(yīng)前端發(fā)送的請(qǐng)求

<?php//設(shè)置頁面內(nèi)容是html編碼格式是utf-8 header("Content-Type: text/plain;charset=utf-8"); //定義一個(gè)多維數(shù)組，包含員工的信息，每條員工信息為一個(gè)數(shù)組 $staff = array(array("name" => "洪七", "number" => "101", "sex" => "男", "job" => "總經(jīng)理"),array("name" => "郭靖", "number" => "102", "sex" => "男", "job" => "開發(fā)工程師"),array("name" => "黃蓉", "number" => "103", "sex" => "女", "job" => "產(chǎn)品經(jīng)理"));//判斷如果是get請(qǐng)求，則進(jìn)行搜索；如果是POST請(qǐng)求，則進(jìn)行新建 //$_SERVER是一個(gè)超全局變量，在一個(gè)腳本的全部作用域中都可用，不用使用global關(guān)鍵字 //$_SERVER["REQUEST_METHOD"]返回訪問頁面使用的請(qǐng)求方法 if ($_SERVER["REQUEST_METHOD"] == "GET") {search(); } elseif ($_SERVER["REQUEST_METHOD"] == "POST"){create(); }//通過員工編號(hào)搜索員工 function search(){//檢查是否有員工編號(hào)的參數(shù)//isset檢測(cè)變量是否設(shè)置；empty判斷值為否為空//超全局變量 $_GET 和 $_POST 用于收集表單數(shù)據(jù)if (!isset($_GET["number"]) || empty($_GET["number"])) {echo "參數(shù)錯(cuò)誤";return;}//函數(shù)之外聲明的變量擁有 Global 作用域，只能在函數(shù)以外進(jìn)行訪問。//global 關(guān)鍵詞用于訪問函數(shù)內(nèi)的全局變量global $staff;//獲取number參數(shù)$number = $_GET["number"];$result = "沒有找到員工。";//遍歷$staff多維數(shù)組，查找key值為number的員工是否存在，如果存在，則修改返回結(jié)果// 把 $staff 循環(huán)給新的變量 $value， 然后可以做一些操作foreach ($staff as $value) {if ($value["number"] == $number) {$result = "找到員工：員工編號(hào)：" . $value["number"] . "，員工姓名：" . $value["name"] . "，員工性別：" . $value["sex"] . "，員工職位：" . $value["job"];break;}}echo $result; }//創(chuàng)建員工 function create(){//判斷信息是否填寫完全if (!isset($_POST["name"]) || empty($_POST["name"])|| !isset($_POST["number"]) || empty($_POST["number"])|| !isset($_POST["sex"]) || empty($_POST["sex"])|| !isset($_POST["job"]) || empty($_POST["job"])) {echo "參數(shù)錯(cuò)誤，員工信息填寫不全";return;}// 沒做數(shù)據(jù)庫(kù): 獲取POST表單數(shù)據(jù)并保存到數(shù)據(jù)庫(kù)//提示保存成功echo "員工：" . $_POST["name"] . " 信息保存成功！"; }

現(xiàn)在開始是js部分

// GET 請(qǐng)求的查詢 document.getElementById("search").onclick = function() { // 創(chuàng)建一個(gè) XMLHttpRequest對(duì)象（老版本 ie5\6 是 ActiveXObject)var request = new XMLHttpRequest();// 開始一個(gè)GET 請(qǐng)求， server.php就是上面的那個(gè)php 文件， true表示異步 默認(rèn)就是true。// GET 請(qǐng)求都是用 url來傳輸，所以就獲取輸入在 #keyword 中的數(shù)字， 來和php 中的 $number 對(duì)應(yīng)查找request.open("GET", "server.php?number=" document.getElementById("keyword").value, true);/*** open() 和 send() 是一起使用的* 用來向 open() 中的請(qǐng)求體（server.php) 發(fā)送請(qǐng)求* 具體請(qǐng)自行搜索 send()的語法，比較長(zhǎng)*/request.send();/*** send() 后會(huì)觸發(fā) onreadystatechange * 結(jié)束時(shí)會(huì)把 readyState 變成4* 而頁面正確時(shí)的 status 是200* 所以，依此做一個(gè)判斷*/request.onreadystatechange = function() {if (request.readyState===4) {if (request.status===200) { // responseText 是 server.php 的返回值document.getElementById("searchResult").innerHTML = request.responseText;} else {alert("發(fā)生錯(cuò)誤：" request.status);}} }}// POST 請(qǐng)求的保存 document.getElementById("save").onclick = function() { var request = new XMLHttpRequest();request.open("POST", "server.php");// 是保存， 所以獲取各值， & 是連接數(shù)據(jù)的格式？var data = "name=" document.getElementById("staffName").value "&number=" document.getElementById("staffNumber").value "&sex=" document.getElementById("staffSex").value "&job=" document.getElementById("staffJob").value;// POST 請(qǐng)求時(shí)，在 open() send() 中間要設(shè)立一個(gè)頭信息request.setRequestHeader("Content-type","application/x-www-form-urlencoded");// 將 data 傳送過去request.send(data);request.onreadystatechange = function() {if (request.readyState===4) {if (request.status===200) { document.getElementById("createResult").innerHTML = request.responseText;} else {alert("發(fā)生錯(cuò)誤：" request.status);}} }}

一個(gè)簡(jiǎn)單的Ajax 差不多就是這樣了

數(shù)據(jù)還可以用JSON 的方式， 僅需要改動(dòng)幾個(gè)地方

// php 中 將 echo 的值改成 JSON格式，例如：if (!isset($_GET["number"]) || empty($_GET["number"])) {echo $jsonp . '({"success":false,"msg":"參數(shù)錯(cuò)誤"})';return;}// js 中// 觸發(fā) onreadystatechange 后， 它的回調(diào)函數(shù)里創(chuàng)建一個(gè)調(diào)用了 JSON.parse 方法的變量來保存 server.php的返回值，例如：var data = JSON.parse(request.responseText);// data.success 的 success 也是 php 里設(shè)定的// alert 一下alert(data); // 出了兩個(gè) object...// 那試試 console.log 吧console.log(data); // Object {success: true, msg: "找到員工：員工編號(hào):101, 員工姓名：洪七，員工性別：男, 員工職位：總經(jīng)理"}if (data.success) {document.getElementById('searchResult').innerHTML = data.msg;} else {document.getElementById('searchResult').innerHTML = '出現(xiàn)錯(cuò)誤：' data.msg;}// 這樣就可以調(diào)用 php 文件里返回的值了

視頻中還有講到 jQuery中的Ajax寫法 和 jQuery中跨域時(shí)怎么請(qǐng)求

jQuery 的寫法很簡(jiǎn)單， 比原生的簡(jiǎn)便太多了。 我也就不總結(jié)啦，

若有不合適之處， 還望指點(diǎn)一二

(:з」∠)

更多專業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的初学 Ajax（涉及 php)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。