PHP與AJAX的相愛相殺

時間  2019-12-14
標籤 php ajax 相愛 欄目 PHP 简体版
原文   原文鏈接

學習目錄：javascript

  • AJAX基礎
  • PHP與AJAX
  • JSON格式
  • jQuery中的AJAX
我的網站原創連接地址：不足之處歡迎留言...逃...

圖片描述

1.AJAX基礎

(1)AJAX(Asynchronous JavaScript and XML):異步的javascript和xml的縮寫。php

(2)AJAX不是某種編程語言,而是一種在無需加載整個頁面的狀況下可以更新部分網頁的技術。html

(3)傳統網頁的缺點：須要更新內容或者提交一個表單,須要從新加載整個頁面;使用AJAX優勢：經過在後臺跟服務器進行少許的數據交換，網頁就能夠實現異步局部更新。對於填寫複雜表單來講，有很是好的用戶體驗。前端

(4)AJAX同步與異步：同步說白了就是加載整個頁面;異步可以加載部分頁面。具體的話,客戶端與服務器端的聯繫。Ajax技術出現以前，都是同步的交換數據，若是填寫的比較複雜的表單將很是麻煩。有了XMLHttpRequest對象後，同步世界變爲了異步世界。經過XMLHttpRequest這個對象後臺能夠和服務器進行數據交換。java

(5)XMLHttpRequest對象建立：var requerst=new XMLHttpRequest();直接實例化對象便可!注意：IE5和IE6不支持這種定義，若是要實現瀏覽器頁面兼容，以下代碼所示：mysql

var request;
if(window.XMLHttpRequest){
    request  = new XMLHttpRequest();  // IE7+,Firefox,Chrome,Opera,Safari...
}else{
    request = new ActiveObject("Microsoft.XMLHTTP"); // IE6,IE5
}

(6)HTTP請求：http是一種無狀態的協議：說白了就是不能創建持久鏈接且無記憶的協議。進一步：經過頁面請求和響應的過程，實現網頁的調試。jquery

(6.1)一個完整的HTTP請求過程，一般有下面7個步驟：web

  • 創建TCP鏈接
  • Web瀏覽器向Web服務器發送請求命令
  • Web瀏覽器發送請求頭信息
  • Web服務器應答
  • Web服務器發送應答頭信息
  • Web服務器向瀏覽器發送數據
  • Web服務器關閉TCP鏈接

(6.2)http請求通常由四部分組成：ajax

  • HTTP請求的方法或動做，好比是GET仍是POST請求
  • 正在請求的URL，總得知道請求的地址是什麼吧
  • 請求頭，包含一些客戶端的環境信息，身份驗證信息等
  • 請求體，也就是請求正文，請求正文中能夠包含客戶提交的查詢支付穿信息，表單信息等等

(6.3)GET與POST[收集來自method="post/get"的表單中的name值]sql

說白了,都是收集從表單裏面傳過來的值。傳過去的值,一種以url的形式顯示(不安全),一種以值的形式顯示(安全);GET通常用於信息的獲取，使用url傳遞參數，限制在2000個字符，對全部人可見，不安全。POST通常用於從表單發送數據，參數在http請求體中，不限制信息發送數量。

(6.4)Http響應通常由三個部分組成:

  • 由一個數字和文字組成的狀態碼，用來顯示請求是成功仍是失敗；
  • 響應頭，包含服務器類型，日期時間，內容類型和長度等；
  • 響應體，也就是響應正文。

(6.5)Http狀態碼由三位數字組成，其中首位數字定義了狀態碼的類型：

  • 1XX:信息類，表示收到web瀏覽器請求，正在進一步的處理中；
  • 2XX:成功，表示用戶請求被正確接收、理解和處理，例如：200 OK
  • 3XX:重定向，表示請求沒有成功，客戶必須採起進一步的動做
  • 4XX:客戶端錯誤，表示客戶端提交的請求有錯誤，如404 NOT FOUND，意味着請求中引用的文檔不存在。
  • 5XX:服務器錯誤，表示服務器不能完成對請求的處理。

(7)XMLHttpRequest發送請求:(對象的方法)

  • open(method請求方法,url請求地址,async請求同步或者異步(異步是true,同步是false,其實默認就是true));///調用異步請求
  • send(string);(使用get方法時，參數能夠不填寫或者null，由於信息都包含在地址欄url中；使用post則必定要填寫);//把請求發送到服務器

舉個栗子:

request.open("POST","create.php",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");//設置http的頭信息,告訴web服務器要發送一個表單;注意：setRequest請求必定要放在open和send之間，不然會拋出異常
request.send("name=王大錘&sex=男");

(8)XMLHttpRequest取得響應:(對象的方法和屬性)

  • responseText:簡單來講:就是接收服務器響應回送的數據。得到字符串形式的相應數據。
  • responsXML:得到XML形式的相應數據。如今通常轉換爲JSON形式的數據。
  • status和statusText：以數字和文本形式返回http狀態碼。
  • getAllResponseHeader()：獲取全部的響應報頭。
  • getResponseHeader()：查詢響應中的某個字段的值。

readyState屬性：響應返回成功的時候獲得通知。

  • 0：請求未初始化，open尚未調用。
  • 1：服務器鏈接已創建，open已經調用了。
  • 2：請求已經接收，也就是接收到頭信息了。
  • 3：請求處理中，也就是接收到響應主體了。
  • 4：請求已完成，且響應已就緒，也就是響應完成了。

舉個栗子:涵蓋了ajax的大部份內容(典型的xhr創建ajax的過程)

var request = new XMLHttpRequest();//建立XHR對象
request.open("GET","get.php",true);//調用異步請求
request.send();//發送異步請求
//對事件進行監聽,判斷服務器是否正確得作出了響應
request.onreadystatechange = function(){
  if(request.readyState===4 && request.status === 200){
    request.reponseText;//接收服務器響應回送的數據
   }
}

2.PHP與AJAX

實戰:[服務器端與客戶端]實現查詢員工和新建員工的後臺接口

(1)客戶端部分代碼:

//新建員工客戶端代碼
document.getElementById("save").onclick=function(){
    var request=new XMLHttpRequest();//建立XHR對象
    request.open("POST","action.php");//調用異步請求
    //data拼接的URL
    //document.getElementById("staffName").value獲取表單中用戶寫入的值
    var data = "username=" + document.getElementById("staffName").value 
                  + "&num=" + document.getElementById("staffNumber").value 
                  + "&workname=" + document.getElementById("staffJob").value;
    request.setRequestHeader("Content-type","application/x-www-form-urlencoded");//設置http的頭信息
    request.send(data);//發送異步請求
    //對事件進行監聽,判斷服務器是否能正確作出響應
    request.onreadystatechange=function(){
        if(request.readyState===4){
            if(request.status===200){
                //innerHTML不只能夠讀取元素內容,還能夠將內容寫入元素
                //ajax引擎對象經過responseText屬性或者responseXML屬性接收服務器回送的數據，而後在靜態頁面中對其進行處理，使頁面達到局部刷新的效果
                document.getElementById("createResult").innerHTML=request.responseText;
            }else{
                alter("發生錯誤:"+request.status);
            }
        }
    }
}

(2)服務器端部分代碼:

//查詢員工服務器端代碼
<?php 
header('Content-type:text/html;charset=utf8');
$con=mysqli_connect("127.0.0.1","","");
mysqli_select_db($con,"function");
$sql="SELECT * FROM `ajax`";
$query=mysqli_query($con,$sql);
//數據庫數據的總條數$number
$number=mysqli_num_rows($query);
for($i=0;$i<$number;$i++){
    //將每條數據轉換成關聯數組打印出來
    $arr=mysqli_fetch_row($query);
    //print_r($arr);
    //echo $arr[2];die;
    if($_GET['num']==$arr[2]){
        echo "找到員工:編號$arr[2],姓名:$arr[1],職位:$arr[3]";
        break;
    }
}
 ?>

3.JSON格式

(1)json:javascript對象表示法。

(2)json是存儲和交換文本信息的語法，相似xml。採用鍵值對的方式組織，易於人們閱讀與機器解析。

(3)json是獨立於語言的，無論什麼語言均可以解析json，只要按json的規則來就行。

(4)json的長度比xml小;json讀寫的速度更快;json可使用js內建方法直接解析，轉化成js對象，很是方便。

(5)json語法規則：json數據的書寫格式是：名稱/值對。

名稱/值對組合中的名稱寫在前面（在雙引號中），值對寫在後面（一樣在雙引號中），中間用冒號隔開，好比"name":"王大錘"。注意：json與javaScript對象表示法不一樣，javaScript對象表示法的鍵值不須要用引號，可是json的鍵值要用引號。

注意：json能夠是整型、浮點型、字符串(在雙引號中)、布爾值(true或false)、數組(在方括號中)、對象(在花括號中)、null等數據類型。

舉個栗子：

{//定義了一個json對象
  "staff":[//定義了一個數組
    {"name":"王大錘","age":21},//定義了一個name對象
    {"name":"叫獸","age":35}
  ]
}

(6)json解析：eval()和JSON.parse()兩種方式解析成JSON形式

兩種方法比較：建議使用JSON.parse()方法解析成JSON形式

eval();不安全，若是json中有函數或js程序代碼（alert或一個window.location.href()跳轉連接病毒網站等），會優先執行代碼，危險操做。JSON.parse();對json文件具備校驗功能，若是json文件裏面有程序腳本，會解析報錯。

舉個栗子：

var jsondata='{
    "staff":[{
            "name":"王大錘",
            "age":22
        },
        {
            "name":"叫獸",
            "age":23
        },
        {
            "name":"王尼瑪",
            "age":24
        }
    ]
}';

var jsonobj=JSON.parse(jsondata);//JSON.parse解析JSON
var jsonobj=eval('(' + jsondata + ')');//eval解析JSON

alert(jsonobj.staff[0].name);

注意：上面書寫是錯誤的，只爲了看清楚。逗號不是分隔符，逗號是文本內容，全部的都應該緊湊寫，不能本身爲了看清楚，人爲用空格分開。(這裏找了一個小時錯誤...)

(7)json驗證工具：JSONLint

(8)舉個栗子:

使用json,首先須要服務器端的約定,
用此種方法可以減小更多的判斷,以更加優雅的形式顯示
{
    //前端規則驗證、後端數據驗證
    "success":true,//是否正確執行(表單等規則驗證)
    "msg":"×××"//請求的響應值是否成功(http響應返回的信息)
}
服務器端部分代碼: 
//echo "參數錯誤，員工信息填寫不全";
echo '{"success":false,"msg":"參數錯誤，員工信息填寫不全"}';

if($query){
    //echo "員工：" . $_POST["username"] . " 信息保存成功！";
    echo '{"success":true,"msg":"員工保存成功"}';
}else{
    //echo "員工：" . $_POST["username"] . " 信息保存失敗！";
    echo '{"success":false,"msg":"員工保存失敗"}';
}
客戶端json代碼:其它不變,將服務器端響應傳過來的responseText(文本形式)轉換爲(JSON形式),將json字符串轉化爲了一個json對象data,而後就可以以對象的形式處理數據 
request.onreadystatechange=function(){
        if(request.readyState===4){
            if(request.status===200){
                //將服務器端響應傳過來的responseText(文本形式)轉換爲(JSON形式)
                //將json字符串轉化爲了一個json對象data
                var data=JSON.parse(request.responseText);
                if(data.success){
                    document.getElementById("createResult").innerHTML=data.msg;
                }else{
                    document.getElementById("createResult").innerHTML="出現錯誤"+data.msg;
                }
            }
        }
    }

4.jQuery中的AJAX

(1)使用jquery實現ajax請求：做用：避免兼容問題，代碼簡潔，操做快捷方便。

(2)語法:jQuery.ajax([settings])

  • type：類型，「POST」或「GET」，默認爲「GET」。
  • url：發送請求的地址。
  • data：是一個對象，連同請求發送到服務器的數據。
  • dataType：預期服務器返回的數據類型。若是不指定，jQuery將自動根據HTTP包MIME信息來智能判斷，通常咱們採用json格式，能夠設置爲「json」。
  • success：是一個方法，請求成功後的毀掉函數。傳入返回後的數據，以及包含成功代碼的字符串。
  • error：是一個方法，請求失敗時調用此函數。傳入XMLHttpRequest對象。
更新時間:2018/2/13 23:36:53
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程