Ajax
什么是ajax
AJAX即“Asynchronous JavaScript and XML”（異步的JavaScript與XML技術(shù)）针姿，指的是一套綜合了多項(xiàng)技術(shù)的瀏覽器端網(wǎng)頁開發(fā)技術(shù)自点。
以前崎淳，幾乎所有的網(wǎng)站都由HTML頁面實(shí)現(xiàn)囤捻，服務(wù)器處理每一個(gè)用戶請求都需要重新加載網(wǎng)頁。這樣的處理方式效率不高寇损。用戶的體驗(yàn)是所有頁面都會消失州疾，再重新載入剂习，即使只是一部分頁面元素改變也要重新載入整個(gè)頁面胧奔，不僅要刷新改變的部分逊移，連沒有變化的部分也要刷新。這會加重服務(wù)器的負(fù)擔(dān)龙填。
這可以用異步加載來解決胳泉。ajax實(shí)現(xiàn)了局部刷新頁面。
在了解ajax怎么使用之前岩遗，應(yīng)該先了解XMLHttpRequest對象扇商。
XMLHttpRequest對象
聲明一個(gè)XMLHttpRequest對象：
var request =new XMLHttpRequest();(IE5和IE6不支持這種聲明)
兼容IE5和IE6的聲明：
var request;
if(window.XMLHttpRequest){
Request=new XMLHttpRequest();//IE7+,和chrome，F(xiàn)irefox等瀏覽器;}
else{
request=new ActiveXObject(“Microsoft.XMLHTTP”);//IE5,IE6
}
Http
◎Http：
◆一套計(jì)算機(jī)通過網(wǎng)絡(luò)進(jìn)行通信的規(guī)則喘先；
◆一種無狀態(tài)協(xié)議（無狀態(tài)協(xié)議：不保留持久的連接）钳吟；
◆使客戶（瀏覽器）能夠向web服務(wù)器請求信息和服務(wù)。
◎HTTP請求：
●步驟：1.建立TCP連接嗤放；
2.Web瀏覽器向Web服務(wù)器發(fā)送請求命令；
3.Web瀏覽器發(fā)送請求頭信息；
4.Web服務(wù)器應(yīng)答这吻；
5.Web服務(wù)器發(fā)送應(yīng)答頭信息吩愧；
6.Web服務(wù)器向?yàn)g覽器發(fā)送數(shù)據(jù)炸站；
7.Web服務(wù)器關(guān)閉TCP連接。
●HTTP請求一般由四部分組成：
1.HTTP請求的方法或動作忌堂，比如是get還是post請求盒至；
2.正在請求的URL（請求的地址）；
3.請求頭士修，包含一些客戶端環(huán)境信息枷遂、身份驗(yàn)證信息等；
4.請求體（請求正文）棋嘲，可以包含客戶提交的查詢字符串信息酒唉、表單信息等。
●GET：一般用于信息獲确庾帧（常用于查詢）黔州；使用URL傳遞參數(shù)（變量顯示在URL中，所有人可見）阔籽；對所發(fā)送信息的數(shù)量有限制（一般在2000個(gè)字符）流妻。
POST：一般用于修改服務(wù)器上的資源；對所發(fā)送的信息數(shù)量無限制笆制。（不在URL中顯示绅这，對其他人不可見，信息在請求體中）（常用于發(fā)送表單數(shù)據(jù)在辆，新建证薇、修改等）度苔。
◎HTTP響應(yīng)：
一般由三部分組成：
1.一個(gè)數(shù)字和文字組成的狀態(tài)碼，用來顯示請求是成功還是失敾攵取寇窑；
2.響應(yīng)頭，響應(yīng)頭也和請求頭一樣包含許多有用的信息箩张，例如服務(wù)器類型甩骏、日期時(shí)間先慷、內(nèi)容類型和長度等饮笛；
3.響應(yīng)體（響應(yīng)正文）。
XMLHttpRequest發(fā)送請求
open(method,url,asyn) //(請求方法GET/POST踊跟，請求地址鸥诽，同步（false）/異步（true商玫，默認(rèn)為true，可不寫）)牡借；
send(string) //（將請求發(fā)送到服務(wù)器拳昌，GET請求參數(shù)在URL中，所以參數(shù)string可寫none钠龙，也可不寫炬藤；POST時(shí)參數(shù)string要寫）
XMLHTTPRequest取得響應(yīng)：
responseText：獲得字符串形式的響應(yīng)數(shù)據(jù)；
responseXML：獲得XML形式的響應(yīng)數(shù)據(jù)碴里；
status和statusTest：以數(shù)字和文本的形式返回HTTP狀態(tài)碼沈矿；
getAllResponseHeader（）：獲取所有的響應(yīng)報(bào)頭；
getResponseHeader（）：查詢響應(yīng)中的某個(gè)字段的值咬腋；
readyState屬性：這個(gè)屬性的變化代表了服務(wù)器的響應(yīng)的變化羹膳。
0：請求未初始化，open還沒有調(diào)用根竿；
1：服務(wù)器連接已建立陵像，open已經(jīng)調(diào)用就珠；
2：請求已接受，也就是接收到頭信息了醒颖；
3：請求處理中妻怎，也就是接收到響應(yīng)主體了；
4: 請求已完成泞歉，且響應(yīng)已就緒蹂季，也就是響應(yīng)完成了。
eg：var request=new XMLHttpRequest();
request.open(“GET”,“get.php”,true);
request.send();
request.onreadystatechange=function(){
if(request.readyState===4&&request.status===200){
//做一些事情 request.responseText
}
}
php
◎php:是一種創(chuàng)建動態(tài)交互性站點(diǎn)的服務(wù)器端腳本語言疏日；
（服務(wù)器端腳本語言偿洁？HTML和js是客戶端語言，用于實(shí)現(xiàn)頁面呈現(xiàn)沟优、特效涕滋；服務(wù)器端腳本語言：用于從服務(wù)器端的存取）
◎PHP：（兼容幾乎所有web服務(wù)器挠阁，支持幾乎所有數(shù)據(jù)庫）
◆能夠生成動態(tài)頁面內(nèi)容宾肺；
◆能夠創(chuàng)建、打開侵俗、讀取锨用、寫入、刪除以及關(guān)閉服務(wù)器上的文件隘谣；
◆能夠接收表單數(shù)據(jù)增拥；
◆能夠發(fā)送并取回cookies；
◆能夠添加寻歧、刪除掌栅、修改數(shù)據(jù)庫中的數(shù)據(jù)；
◆能夠限制用戶訪問網(wǎng)站中的某些頁面等码泛。
PHP測試頁面
● Php腳本以<?Php開頭,以?>結(jié)尾
● Php文件的默認(rèn)文件擴(kuò)展名是.php
● Php語句以分號結(jié)尾(;)
例子(員工查詢和添加)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
//查詢表單
<h1>員工查詢</h1>
<label>請輸入員工編號:</label>
<input type="text" id="keyword"/>
<button id="search">查詢</button>
<p id="searchResult"></p>
//添加員工的表單
<h1>員工添加</h1>
<label>請輸入員工編號:</label>
<input type="text" id="staffnumber"/>
<label>請輸入員工姓名:</label>
<input type="text" id="staffname" />
<label>請選擇員工性別:</label>
<select id="staffsex">
<option>男</option>
<option>女</option>
</select>
<label>請輸入員工職位:</label>
<input type="text" id="staffjob" />
<button id="save">保存</button>
<p id="createResult"></p>
<script type="text/javascript">
//為“查詢”按鈕添加點(diǎn)擊事件：點(diǎn)擊時(shí)查詢相關(guān)員工：
document.getElementById("search").onclick=function(){
var request=new XMLHttpRequest();//生成XHR對象猾封；
request.open("GET","server.php?number="+document.getElementById("keyword").value);//XHR對象的open方法：請求方法：get；請求地址：server.php噪珊，參數(shù)為輸入的編號晌缘；
request.send();//發(fā)送請求
//監(jiān)聽request的狀態(tài)的改變：readyState的改變：
request.onreadystatechange=function () {
if(request.readyState==4){//如果readyState為4即服務(wù)器響應(yīng)已完成；
if(request.status===200){
//如果request的狀態(tài)碼為200痢站；
document.getElementById("searchResult").innerHTML=request.responseText;//將查詢結(jié)果顯示磷箕；
}
else{
alert("發(fā)生錯(cuò)誤"+request.status);
}
}
}
}
//為“保存”按鈕添加點(diǎn)擊事件：點(diǎn)擊時(shí)添加相關(guān)員工：
document.getElementById("save").onclick=function(){
var add_staff=new XMLHttpRequest();//生成XHR對象；
add_staff.open("POST","server.php");//XHR對象的open方法：請求方法：post瑟押；請求地址：server.php搀捷；
var data="number="+document.getElementById("staffnumber").value+"&name="+document.getElementById("staffname").value+"&sex="+document.getElementById("staffsex").value+"&job="+document.getElementById("staffjob").value;//將填寫的數(shù)據(jù)保存到data； add_staff.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//設(shè)置請求頭的content-type為獲取表單信息；
add_staff.send(data);//發(fā)送請求嫩舟，post的參數(shù)為data氢烘；
//監(jiān)聽add_staff的狀態(tài)的改變：readyState的改變：
add_staff.onreadystatechange=function () {
if(add_staff.readyState==4){/如果readyState為4即服務(wù)器響應(yīng)已完成；
if(add_staff.status===200){如果request的狀態(tài)碼為200家厌；
//將響應(yīng)內(nèi)容顯示出來： document.getElementById("createResult").innerHTML=add_staff.responseText;
}
else{
alert("發(fā)生錯(cuò)誤"+add_staff.status);
}
}
}
}
</script>
</body>
</html>
Server.php文件：
<?php
//設(shè)置頁面內(nèi)容是html編碼格式是utf-8
header("Content-Type: text/plain;charset=utf-8");
//header("Content-Type: application/json;charset=utf-8");
//header("Content-Type: text/xml;charset=utf-8");
//header("Content-Type: text/html;charset=utf-8");
//header("Content-Type: application/javascript;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請求饭于，則進(jìn)行搜索蜀踏；如果是POST請求，則進(jìn)行新建
//$_SERVER是一個(gè)超全局變量掰吕，在一個(gè)腳本的全部作用域中都可用果覆，不用使用global關(guān)鍵字
//$_SERVER["REQUEST_METHOD"]返回訪問頁面使用的請求方法
if ($_SERVER["REQUEST_METHOD"] == "GET") {
search();
} elseif ($_SERVER["REQUEST_METHOD"] == "POST"){
create();
}
//通過員工編號搜索員工
function search(){
//檢查是否有員工編號的參數(shù)
//isset檢測變量是否設(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é)果
foreach ($staff as $value) {
if ($value["number"] == $number) {
$result = "找到員工：員工編號：" . $value["number"] . "纽门，員工姓名：" . $value["name"] .
"薛耻，員工性別：" . $value["sex"] . "，員工職位：" . $value["job"];
break;
}
}
echo $result;
}
//創(chuàng)建員工
function create(){
parse_str(file_get_contents('php://input'), $_POST);//解決post拿不到內(nèi)容;
//判斷信息是否填寫完全
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;
}
//TODO: 獲取POST表單數(shù)據(jù)并保存到數(shù)據(jù)庫
//提示保存成功
echo "員工：" . $_POST["name"] . " 信息保存成功饼齿！";
}
json
◎JSON：javascript對象表示法；
◎JSON是存儲和交換文本信息的語法瘟滨，類似XML候醒。它采用鍵值對的方式來組織，易于人們閱讀和編寫杂瘸，同時(shí)也易于機(jī)器解析和生成。
◎JSON是獨(dú)立于語言的伙菊，也就是說不管什么語言败玉，都可以解析JSON，只需要按照J(rèn)SON的規(guī)則來就行镜硕。
●JSON的長度和xml格式比起來很短性艘怼；
●JSON的讀寫速度更快兴枯；
●JSON可以使用javascript內(nèi)建的方法直接進(jìn)行解析血淌，轉(zhuǎn)換成javascript對象，非常方便。
Json語法規(guī)則
Json數(shù)據(jù)的書寫格式是：名稱/值對悠夯，eg：“name”：“大豬”癌淮。
●Json的值可以是下面這些類型：
◆數(shù)字（整數(shù)或浮點(diǎn)數(shù)），eg：123,1.23沦补；
◆字符串（在雙引號中）乳蓄；
◆邏輯值（true或false）；
◆數(shù)組（在方括號中）夕膀；
◆對象（在花括號中）虚倒；
◆Null；
Eg：
{//大括號括起來表示一個(gè)json對象;
“staff”：[
{“name”: “洪七”, “age”:70},
{“name”: “郭靖”, “age”:35},
{“name”: “黃蓉”, “age”:30}
]
}
Json解析
◎Eval和JSON.parse:
Tip:在代碼中使用eval是很危險(xiǎn)的!特別是用它執(zhí)行第三方的json數(shù)據(jù)(其中可能包含惡意代碼)時(shí),盡可能使用JSON.parse()方法解析字符串本身方法還可以捕捉j(luò)son中的語法錯(cuò)誤.
Eg:
●使用eval:
var jsondata='{"staff":[{"name":"洪七","age":70},{"name":"郭靖","age":35},{"name":"黃蓉","age":30}]}';
var jsonobj=eval('('+jsondata+')');
alert(jsonobj.staff[0].name);
結(jié)果:彈出 “洪七”;
●使用JSON.parse():
var jsondata='{"staff":[{"name":"洪七","age":70},{"name":"郭靖","age":35},{"name":"黃蓉","age":30}]}';
var jsonobj=JSON.parse(jsondata);
alert(jsonobj.staff[0].name);
結(jié)果:彈出 “洪七”;
■如果代碼中出現(xiàn)錯(cuò)誤:
●使用eval時(shí),無法檢驗(yàn)代碼中的錯(cuò)誤,例如例子中的alert,eval方法不會檢查出這個(gè)錯(cuò)誤,于是彈出 “123”,再彈出 “洪七”.
var jsondata='{"staff":[{"name":"洪七","age":alert(123)},{"name":"郭靖","age":35},{"name":"黃蓉","age":30}]}';
var jsonobj=eval('('+jsondata+')');
alert(jsonobj.staff[0].name);
●使用JSON.parse()方法時(shí)會檢查出alert這個(gè)錯(cuò)誤,出現(xiàn)VM530:1 Uncaught SyntaxError: Unexpected token a in JSON at position 29(…),不會彈出任何信息.
Var jsondata='{"staff":[{"name":"洪七","age":alert(2)},{"name":"郭靖","age":35},{"name":"黃蓉","age":30}]}';
var jsonobj=JSON.parse(jsondata);
alert(jsonobj.staff[0].name);
tip:☆Json格式化和校驗(yàn):
在線校驗(yàn)工具:jsonlint.com
對上面的例子 “員工查詢和添加”用json改寫:
首先約定:
{
“success”:true;//表示請求是否成功;
“msg”: “xxx”;//表示請求的返回信息;
}
例子代碼修改:
客戶端代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>員工查詢</h1>
<label>請輸入員工編號:</label>
<input type="text" id="keyword"/>
<button id="search">查詢</button>
<p id="searchResult"></p>
<h1>員工添加</h1>
<label>請輸入員工編號:</label>
<input type="text" id="staffnumber"/>
<label>請輸入員工姓名:</label>
<input type="text" id="staffname" />
<label>請選擇員工性別:</label>
<select id="staffsex">
<option>男</option>
<option>女</option>
</select>
<label>請輸入員工職位:</label>
<input type="text" id="staffjob" />
<button id="save">保存</button>
<p id="createResult"></p>
<script type="text/javascript">
document.getElementById("search").onclick=function(){
var request=new XMLHttpRequest();
request.open("GET","server.php?number="+document.getElementById("keyword").value);
request.send();
request.onreadystatechange=function () {
if(request.readyState==4){
if(request.status===200){
var data=JSON.parse(request.responseText);//解析服務(wù)器返回的信息;
if(data.success){
document.getElementById("searchResult").innerHTML=data.msg;
}
else {
document.getElementById("searchResult").innerHTML="出現(xiàn)錯(cuò)誤:"+data.msg;
}
}
else{
alert("發(fā)生錯(cuò)誤"+request.status);
}
}
}
}
document.getElementById("save").onclick=function(){
console.log('haha');
var add_staff=new XMLHttpRequest();
add_staff.open("POST","server.php");
var data="number="+document.getElementById("staffnumber").value+"&name="+document.getElementById("staffname").value+"&sex="+document.getElementById("staffsex").value+"&job="+document.getElementById("staffjob").value;
add_staff.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
add_staff.send(data);
add_staff.onreadystatechange=function () {
if(add_staff.readyState==4){
if(add_staff.status===200){
var data=JSON.parse(add_staff.responseText);
if(data.success){
document.getElementById("createResult").innerHTML=data.msg;
}
else {
document.getElementById("createResult").innerHTML = "出現(xiàn)錯(cuò)誤" + data.msg;
}
}
else{
alert("發(fā)生錯(cuò)誤"+add_staff.status);
}
}
}
}
</script>
</body>
</html>
服務(wù)器端server.php修改:
<?php
//設(shè)置頁面內(nèi)容是html編碼格式是utf-8
//header("Content-Type: text/plain;charset=utf-8");
header("Content-Type: application/json;charset=utf-8");
//header("Content-Type: text/xml;charset=utf-8");
//header("Content-Type: text/html;charset=utf-8");
//header("Content-Type: application/javascript;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請求，則進(jìn)行搜索易猫；如果是POST請求捧弃，則進(jìn)行新建
//$_SERVER是一個(gè)超全局變量，在一個(gè)腳本的全部作用域中都可用擦囊，不用使用global關(guān)鍵字
//$_SERVER["REQUEST_METHOD"]返回訪問頁面使用的請求方法
if ($_SERVER["REQUEST_METHOD"] == "GET") {
search();
} elseif ($_SERVER["REQUEST_METHOD"] == "POST"){
create();
}
//通過員工編號搜索員工
function search(){
//檢查是否有員工編號的參數(shù)
//isset檢測變量是否設(shè)置违霞；empty判斷值為否為空
//超全局變量 $_GET 和 $_POST 用于收集表單數(shù)據(jù)
if (!isset($_GET["number"]) || empty($_GET["number"])) {
echo '{"success":false,"msg":"參數(shù)錯(cuò)誤"}';
return;
}
//函數(shù)之外聲明的變量擁有 Global 作用域，只能在函數(shù)以外進(jìn)行訪問瞬场。
//global 關(guān)鍵詞用于訪問函數(shù)內(nèi)的全局變量
global $staff;
//獲取number參數(shù)
$number = $_GET["number"];
$result = '{"success":false,"msg":"沒有找到員工买鸽。"}';
//遍歷$staff多維數(shù)組，查找key值為number的員工是否存在贯被，如果存在眼五，則修改返回結(jié)果
foreach ($staff as $value) {
if ($value["number"] == $number) {
$result = '{"success":true,"msg":"找到員工：員工編號：' . $value["number"] . '，員工姓名：' . $value["name"] .'彤灶，員工性別：' . $value["sex"] . '看幼，員工職位：' . $value["job"].'"}';
break;
}
}
echo $result;
}
//創(chuàng)建員工
function create(){
parse_str(file_get_contents('php://input'), $_POST);
//判斷信息是否填寫完全
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 '{"success":false,"msg":"參數(shù)錯(cuò)誤，員工信息填寫不全"}';
return;
}
//TODO: 獲取POST表單數(shù)據(jù)并保存到數(shù)據(jù)庫
//提示保存成功
echo '{"success":true,"msg":"員工：' . $_POST["name"] . ' 信息保存成功幌陕！"}';
}
用jquery實(shí)現(xiàn)ajax
Jquery.ajax([settings])
●Type:類型, “POST”或者 “GET”,默認(rèn)為 “GET”
●Url:發(fā)送請求地址;
●Data:是一個(gè)對象,連同請求發(fā)送到服務(wù)器的數(shù)據(jù);
●dataType:預(yù)期服務(wù)器返回的數(shù)據(jù)類型.如果不指定,jquery將自動根據(jù)HTTP包MIME信息來智能判斷,一般我們采用json格式,可以設(shè)置為 “json”.
●Success:是一個(gè)方法,請求成功后的回調(diào)函數(shù).傳入返回后的數(shù)據(jù),以及包含成功代碼的字符串.
●Error:是一個(gè)方法,請求失敗時(shí)調(diào)用此函數(shù),傳入XMLHttpResult對象.
用jquery實(shí)現(xiàn)ajax改寫例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>員工查詢</h1>
<label>請輸入員工編號:</label>
<input type="text" id="keyword"/>
<button id="search">查詢</button>
<p id="searchResult"></p>
<h1>員工添加</h1>
<label>請輸入員工編號:</label>
<input type="text" id="staffnumber"/>
<label>請輸入員工姓名:</label>
<input type="text" id="staffname" />
<label>請選擇員工性別:</label>
<select id="staffsex">
<option>男</option>
<option>女</option>
</select>
<label>請輸入員工職位:</label>
<input type="text" id="staffjob" />
<button id="save">保存</button>
<p id="createResult"></p>
<script src="jquery-3.1.0.min.js"></script>
<script>
$(document).ready(function () {
$("#search").click(function () {
$.ajax({
type:"GET",
url:"server.php?number="+$("#keyword").val(),
dataType:"json",
success:function (data) {
if(data.success){
$("#searchResult").html(data.msg);
}
else {
$("#searchResult").html("出現(xiàn)錯(cuò)誤:"+data.msg);
}
},
error:function (jqXHR) {
alert("發(fā)生錯(cuò)誤"+jqXHR.status);
}
});
});
$("#save").click(function () {
$.ajax({
type:"POST",
url:"server.php",
dataType:"json",
data:{
name:$("#staffname").val(),
number:$("#staffnumber").val(),
sex:$("#staffsex").val(),
job:$("#staffjob").val()
},
success:function (data) {
if(data.success){
$("#createResult").html(data.msg);
}
else {
$("#createResult").html("出現(xiàn)錯(cuò)誤:"+data.msg);
}
},
error:function (jqXHR) {
alert("發(fā)生錯(cuò)誤"+jqXHR.status);
}
});
});
});
/*document.getElementById("search").onclick=function(){
var request=new XMLHttpRequest();
request.open("GET","server.php?number="+document.getElementById("keyword").value);
request.send();
request.onreadystatechange=function () {
if(request.readyState==4){
if(request.status===200){
var data=JSON.parse(request.responseText);
if(data.success){
document.getElementById("searchResult").innerHTML=data.msg;
}
else {
document.getElementById("searchResult").innerHTML="出現(xiàn)錯(cuò)誤:"+data.msg;
}
}
else{
alert("發(fā)生錯(cuò)誤"+request.status);
}
}
}
}
document.getElementById("save").onclick=function(){
console.log('haha');
var add_staff=new XMLHttpRequest();
add_staff.open("POST","server.php");
var data="number="+document.getElementById("staffnumber").value+"&name="+document.getElementById("staffname").value+"&sex="+document.getElementById("staffsex").value+"&job="+document.getElementById("staffjob").value;
add_staff.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
add_staff.send(data);
add_staff.onreadystatechange=function () {
if(add_staff.readyState==4){
if(add_staff.status===200){
var data=JSON.parse(add_staff.responseText);
if(data.success){
document.getElementById("createResult").innerHTML=data.msg;
}
else {
document.getElementById("createResult").innerHTML = "出現(xiàn)錯(cuò)誤" + data.msg;
}
}
else{
alert("發(fā)生錯(cuò)誤"+add_staff.status);
}
}
}
}*/
</script>
</body>
</html>
跨域
◎一個(gè)域名地址的組成:
當(dāng)協(xié)議诵姜、子域名、主域名搏熄、端口號中的任意一個(gè)不相同時(shí)棚唆，都算作不同域。
◎不同域之間相互請求資源心例，就算做跨域宵凌，比如：http://www.abc.com/index/html請求http://www.efg.com/service.php
◎Javascript出于安全方面的考慮，不允許跨域調(diào)用其他頁面的對象止后。
◎跨域就是因?yàn)閖avascript同源策略的限制瞎惫，a.com域名下的js無法操作b.com或是c.a.com域名下的對象。
◎Javascript出于安全方面的考慮，不允許跨域調(diào)用其他頁面的對象瓜喇。
●www.abc.com/index.html調(diào)用www.abc.com/service.php（沒有寫協(xié)議默認(rèn)是http挺益，所以協(xié)議、主域名欠橘、子域名和端口號都相同矩肩，非跨域）
●www.abc.com/index.html調(diào)用www.efg.com/service.php(子域名不同，跨域）
●www.abc.com/index.html調(diào)用bbs.abc.com/service.php（子域名不同肃续，跨域）
●www.abc.com/index.html調(diào)用https://www.abc.com/service.php(協(xié)議不同黍檩，一個(gè)是http，一個(gè)是https始锚，跨域）
●www.abc.com/index/html調(diào)用www.abc.com:81/service.php(端口號不同刽酱，跨域）
處理跨域的方法：
用jsonp處理跨域:
jsonp可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題(即可以處理get不可以處理post)
修改例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>員工查詢</h1>
<label>請輸入員工編號:</label>
<input type="text" id="keyword"/>
<button id="search">查詢</button>
<p id="searchResult"></p>
<h1>員工添加</h1>
<label>請輸入員工編號:</label>
<input type="text" id="staffnumber"/>
<label>請輸入員工姓名:</label>
<input type="text" id="staffname" />
<label>請選擇員工性別:</label>
<select id="staffsex">
<option>男</option>
<option>女</option>
</select>
<label>請輸入員工職位:</label>
<input type="text" id="staffjob" />
<button id="save">保存</button>
<p id="createResult"></p>
<script src="jquery-3.1.0.min.js"></script>
<script>
$(document).ready(function () {
$("#search").click(function () {
$.ajax({
type:"GET",
url:"http://localhost:8080/try2/server.php?number="+$("#keyword").val(),//客戶端請求的url地址屬于跨域,端口號不同.
dataType:"jsonp",//修改dataType為jsonp;
jsonp:"callback",//添加jsonp屬性為自定義的callback;
success:function (data) {
if(data.success){
$("#searchResult").html(data.msg);
}
else {
$("#searchResult").html("出現(xiàn)錯(cuò)誤:"+data.msg);
}
},
error:function (jqXHR) {
alert("發(fā)生錯(cuò)誤"+jqXHR.status);
}
});
});
$("#save").click(function () {
$.ajax({
type:"POST",
url:"server.php",
dataType:"json",
data:{
name:$("#staffname").val(),
number:$("#staffnumber").val(),
sex:$("#staffsex").val(),
job:$("#staffjob").val()
},
success:function (data) {
if(data.success){
$("#createResult").html(data.msg);
}
else {
$("#createResult").html("出現(xiàn)錯(cuò)誤:"+data.msg);
}
},
error:function (jqXHR) {
alert("發(fā)生錯(cuò)誤"+jqXHR.status);
}
});
});
});
</script>
</body>
</html>
服務(wù)器端代碼server.php:
<?php
//設(shè)置頁面內(nèi)容是html編碼格式是utf-8
//header("Content-Type: text/plain;charset=utf-8");
header("Content-Type: application/json;charset=utf-8");
//header("Content-Type: text/xml;charset=utf-8");
//header("Content-Type: text/html;charset=utf-8");
//header("Content-Type: application/javascript;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請求棵里，則進(jìn)行搜索；如果是POST請求姐呐，則進(jìn)行新建
//$_SERVER是一個(gè)超全局變量殿怜，在一個(gè)腳本的全部作用域中都可用，不用使用global關(guān)鍵字
//$_SERVER["REQUEST_METHOD"]返回訪問頁面使用的請求方法
if ($_SERVER["REQUEST_METHOD"] == "GET") {
search();
} elseif ($_SERVER["REQUEST_METHOD"] == "POST"){
create();
}
//通過員工編號搜索員工
function search(){
$jsonp=$_GET["callback"];
//檢查是否有員工編號的參數(shù)
//isset檢測變量是否設(shè)置曙砂；empty判斷值為否為空
//超全局變量 $_GET 和 $_POST 用于收集表單數(shù)據(jù)
if (!isset($_GET["number"]) || empty($_GET["number"])) {
echo '{"success":false,"msg":"參數(shù)錯(cuò)誤"}';
return;
}
//函數(shù)之外聲明的變量擁有 Global 作用域头谜，只能在函數(shù)以外進(jìn)行訪問。
//global 關(guān)鍵詞用于訪問函數(shù)內(nèi)的全局變量
global $staff;
//獲取number參數(shù)
$number = $_GET["number"];
$result = $jsonp.'({"success":false,"msg":"沒有找到員工鸠澈。"})';
//遍歷$staff多維數(shù)組柱告，查找key值為number的員工是否存在，如果存在笑陈，則修改返回結(jié)果
foreach ($staff as $value) {
if ($value["number"] == $number) {
$result = $jsonp.'({"success":true,"msg":"找到員工：員工編號：' . $value["number"] . '际度，員工姓名：' . $value["name"] .'，員工性別：' . $value["sex"] . '涵妥，員工職位：' . $value["job"].'"})';
break;
}
}
echo $result;
}
//創(chuàng)建員工
function create(){
parse_str(file_get_contents('php://input'), $_POST);
//判斷信息是否填寫完全
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 '{"success":false,"msg":"參數(shù)錯(cuò)誤乖菱，員工信息填寫不全"}';
return;
}
//TODO: 獲取POST表單數(shù)據(jù)并保存到數(shù)據(jù)庫
//提示保存成功
echo '{"success":true,"msg":"員工：' . $_POST["name"] . ' 信息保存成功！"}';
}
用XHR2處理跨域:
Html5提供的XMLHttpRequest Level2已經(jīng)實(shí)現(xiàn)了跨域訪問以及其他的一些新功能.
IE10以下的版本都不支持.
在服務(wù)器端做一些小的修改即可:
Header(‘Access-Control-Allow-Origin:’);
Header(‘Access-Control-Allow-Methods:POST,GET’);
Eg:
<?php
//設(shè)置頁面內(nèi)容是html編碼格式是utf-8
//header("Content-Type: text/plain;charset=utf-8");
header("Content-Type: application/json;charset=utf-8");
header("Access-Control-Allow-Origin:");//*代表所有域都可以訪問,也可以設(shè)置一個(gè)特定的域名;
header("Access-Control-Allow-Methods:POST,GET");
——以上是我在慕課網(wǎng)上學(xué)習(xí)ajax的學(xué)習(xí)筆記妹笆。
