學(xué)習(xí)Ajax獲得的知識(shí)點(diǎn)

首先PHP頁面和HTML頁面可以長得一模一樣，唯一的區(qū)別就是必須放在服務(wù)器的文件夾底下。

php常用語法介紹

  • php標(biāo)簽
<?php 
這個(gè)一般叫作服務(wù)器端標(biāo)記
?>

正如JS需要放到script標(biāo)簽里面，php代碼也需要放到php標(biāo)記里面。這里面的內(nèi)容都會(huì)被服務(wù)器解析為服務(wù)端代碼。

<?php 
 echo  //這里的echo跟js中的alert有些類似,可以輸出只不過alert會(huì)彈一個(gè)框出來
?>
  • 內(nèi)容輸出
  • Php中的echo會(huì)把內(nèi)容輸出到html代碼里面
<?php 
 echo   ‘a(chǎn)aa’;//就會(huì)在頁面輸出aaa,,并且看不到php標(biāo)記。只能看到結(jié)果中的內(nèi)容。
?>
  • echo 'string';
    單引號(hào)的內(nèi)容會(huì)被解析成字符串
  • echo "$"
    雙引號(hào)中如果是字符串，則與單引號(hào)沒差別；
    如果是變量，則會(huì)輸出變量的值；
  • print_r():函數(shù)輸出復(fù)雜數(shù)據(jù)類型,比如數(shù)組,對(duì)象
  • var_dump():函數(shù)輸出詳細(xì)信息，如對(duì)象、數(shù)組
$arr =array(1,2,'123');
echo'123';
//結(jié)果為123
print_r($arr);
//結(jié)果為Array ( [0] => 1 [1] => 2 [2] => 123 )
var_dump($arr);
/*結(jié)果為
array
0 => int 1
1 => int 2
2 => string '123'
 (length=3)
  • 變量聲明
    與JavaScript不同之處在于它聲明變量之前必須加$符號(hào).
    $是php中變量的標(biāo)志
  • $符號(hào)開頭，其后是變量的名稱
  • 變量名稱必須以字母或下劃線開頭，不能以數(shù)字開頭
  • 變量名稱只能包含字母數(shù)字字符和下劃線（A-z、0-9 以及_）
  • 變量名稱對(duì)大小寫敏感
  • Php中的變量不需要定義就可以直接使用
<?php 
$a= 12;
echo  $a;   //12;
?>

如果變量不帶$直接echo ,會(huì)自動(dòng)解析成字符串。
換句話說，php里面可以不加單引號(hào)直接加字符串。（但是不推薦這么寫）

<?php 
echo abc;  //abc;
?>

  • 字符串拼接
    Php中的字符串拼接：需要用到 “.” 而JS是用 “+”
    當(dāng)時(shí)產(chǎn)生了疑問，那么JS中的 “.”php需要用什么符號(hào)？ 這里就需要用“->”

  • 函數(shù):
    PHP雖然系統(tǒng)內(nèi)建了一些函數(shù),但是這不影響我們定義自己的函數(shù)，函數(shù)的作用就是在代碼中可以重復(fù)使用的語法塊頁面加載的時(shí)候不會(huì)執(zhí)行只有在被調(diào)用的時(shí)候才會(huì)執(zhí)行

  • 基礎(chǔ)語法

function functionName() {
            這里寫代碼
}

function sayhi(){
    echo "Hello World";//無參數(shù) 無返回值的函數(shù)
}

function sayName($name){
    echo $name.'hello';//有參數(shù) 無返回值的函數(shù)
}
//調(diào)用
sayName('fox');     //foxhello

function sayFood($food='
flower'){
    echo $food;  //參數(shù)有默認(rèn)值的函數(shù)
}
sayFood();         //flower
sayFood(‘water’);    //water

function sum($a,$b){
    return $a+$b; //有返回值的函數(shù)
}
sum(1,2);   // 3
  • 定義最基礎(chǔ)的類
class  fox{
        public $name = 'jack';
        public $age = 10;
}
$fox = new $fox;
$name = $fox->name;      //對(duì)象屬性取值，并保存在$name中
$fox->name = '小狐貍';    //對(duì)象屬性賦值，對(duì)象name屬性賦值為‘小狐貍’
  • 帶構(gòu)造函數(shù)的對(duì)象
class fox{
    //屬性,外部無法訪問
    var $name = 'foxes';
    public $age = 18;
    //定義方法 用來獲取屬性
    function Name(){
    return $this->name;
    }
  • 構(gòu)造函數(shù)可以傳入?yún)?shù)
function fox($name){
    $this->name = $name
}
    //定義了構(gòu)造函數(shù) 需要使用構(gòu)造函數(shù)初始化對(duì)象
    $fox = new fox('小狐貍
');
    //調(diào)用對(duì)象方法,獲取對(duì)象名
$foxName = $fox->Name();  //小狐貍
  • header()函數(shù)
//用來向客戶端(瀏覽器)發(fā)送報(bào)頭，如果出現(xiàn)中文無法顯示，可以在PH代碼頂部添加如下代碼
header("content-type:text/html; charset=utf-8");

靜態(tài)頁面和動(dòng)態(tài)頁面

現(xiàn)在有些做產(chǎn)品的或者做設(shè)計(jì)的這些不太懂程序的人會(huì)把靜態(tài)和動(dòng)態(tài)頁面搞混掉，有很多人認(rèn)為，只要是網(wǎng)頁會(huì)動(dòng)它就是動(dòng)態(tài)頁面，比如一個(gè)輪播圖在那邊滑來滑去會(huì)動(dòng)，那就是動(dòng)態(tài)網(wǎng)頁，其他那最多算一個(gè)動(dòng)畫效果。

  • 靜態(tài)頁面
    沒有后臺(tái)。寫完HTML什么樣子。用戶看到就是什么樣子。
  • 動(dòng)態(tài)頁面:
    有后臺(tái) 需要先經(jīng)過服務(wù)器處理,然后發(fā)送給用戶.

PHP表單

為了實(shí)現(xiàn)動(dòng)態(tài)頁面，我們就需要一些表單提交，從后臺(tái)獲得一些數(shù)據(jù)改變我們的頁面。

  • PHP_GET 數(shù)據(jù)獲取
    :在PHP中,如果想要獲取通過get方法提交的數(shù)據(jù),可以通過$_GET對(duì)象來獲取(但是參數(shù)在地址欄中可以查看)
//下面就是一個(gè)簡單的表單代碼,將數(shù)據(jù)提交到01.php,使用get的方式
<form action="01.php" method="get" >

  <label for="">姓名:

      <input type="text" name= "userName"></label>
      <br/>

  <label for="">郵箱:

      <input type="text" name= "userEmail"></label>
      <br/>

      <input type="submit" name="">
</form>

<?php 
    echo 'userName:'.$_GET['userName'];
    echo '<br/>';
    echo 'userEmail:'.$_GET['userEmail'];
    //以上代碼會(huì)返回對(duì)應(yīng)表單name中輸入的內(nèi)容
 ?>
  • PHP_POST數(shù)據(jù)獲取
    :在PHP中,如果想要獲取通過post方法提交的數(shù)據(jù),可以通過$_POST對(duì)象來獲取
//下面就是一個(gè)簡單的表單代碼,將數(shù)據(jù)提交到02.php,使用post的方式
//(注意：代碼中的method改為post)
<form action="02.php" method="post" >

  <label for="">姓名:

      <input type="text" name= "userName"></label>
      <br/>

  <label for="">郵箱:

      <input type="text" name= "userEmail"></label>
      <br/>

      <input type="submit" name=""></form>

<?php 
    echo 'userName:'.$_POST['userName']; 
    echo '<br/>';
    echo 'userEmail:'.$_POST['userEmail'];      
    //以上代碼會(huì)返回對(duì)應(yīng)表單name中輸入的內(nèi)容
 ?>

AJAX

介紹完P(guān)HP的一些內(nèi)容，看起來似乎都很零散，但是結(jié)合接下來學(xué)習(xí)的Ajax就會(huì)有一個(gè)系統(tǒng)的認(rèn)識(shí)了。

單詞解釋:
       Asynchronous Javascript And XML（異步JavaScript和XML）,他并不是憑空出現(xiàn)的新技術(shù),而是對(duì)于現(xiàn)有技術(shù)的結(jié)合:核心是js對(duì)象XMLHttpRequest
XMLHttpRequest

ajax使用的依舊是HTTP請(qǐng)求,那么一個(gè)完整的HTTP請(qǐng)求需要什么

  1. 請(qǐng)求的網(wǎng)址,方法get/post
  2. 提交請(qǐng)求內(nèi)容數(shù)據(jù),請(qǐng)求主體等
  3. 接收響應(yīng)回來的內(nèi)容
  • 五步使用法

    1. 建立XMLHTTPRequest對(duì)象

    2. 注冊(cè)回調(diào)函數(shù)

      • 當(dāng)服務(wù)器回應(yīng)我們了，我們想要執(zhí)行什么邏輯

    3. 使用open方法

      • 設(shè)置和服務(wù)器端交互的基本信息
      • 設(shè)置提交的網(wǎng)址，數(shù)據(jù)，post提交的一些額外內(nèi)容

    4. 設(shè)置發(fā)送的數(shù)據(jù)，開始和服務(wù)器端交互

      • 發(fā)送數(shù)據(jù)

    5. 更新界面

      • 在注冊(cè)的回調(diào)函數(shù)中,獲取返回的數(shù)據(jù),更新界面

示例代碼:GET

<script type="text/javascript"> 
// 創(chuàng)建XMLHttpRequest 對(duì)象 
var xml = new XMLHttpRequest(); 

// 設(shè)置跟服務(wù)端交互的信息 
xml.open('get','01.ajax.php?name=fox'); //get的數(shù)據(jù),直接在請(qǐng)求的url中添加即可
xml.send(null); // get請(qǐng)求這里寫null即可 

// 接收服務(wù)器反饋 
xhr.onreadystatechange = function () {
 // 這步為判斷服務(wù)器是否正確響應(yīng)
 if (xhr.readyState == 4 && xhr.status == 200) {       
       alert(xml.responseText); // 打印響應(yīng)內(nèi)容  }
 };
</script>

示例代碼:POST

<script type="text/javascript"> 
// 異步對(duì)象 
var xhr = new XMLHttpRequest(); 
// 設(shè)置屬性 
xhr.open('post', '02.post.php' ); 
// 如果想要使用post提交數(shù)據(jù),必須添加 

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
// 將數(shù)據(jù)通過send方法傳遞 

xhr.send('name=fox&age=18'); 
// 發(fā)送并接受返回值 

xhr.onreadystatechange = function () { 
// 這步為判斷服務(wù)器是否正確響應(yīng)
if (xhr.readyState == 4 && xhr.status == 200) { 
alert(xhr.responseText); }
 };
</script>

考慮兼容性創(chuàng)建Ajax對(duì)象

var request ; 
if(XMLHttpRequest){ 
// 新式瀏覽器寫法 
request = new XMLHttpRequest(); 
}else{ 
//IE5,IE6寫法 
new ActiveXObject("Microsoft.XMLHTTP");
}

Ajax注意事項(xiàng)

  • POST請(qǐng)求注意點(diǎn)
    如果想要像form表單提交數(shù)據(jù)那樣使用POST請(qǐng)求,需要使用XMLHttpRequest對(duì)象的setRequestHeader()方法 來添加 HTTP 頭。然后在 send() 方法中添加想要發(fā)送的數(shù)據(jù)：
xmlhttp.open("POST","ajax_test.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
  1. onreadystatechange

  • 每當(dāng)readyState改變時(shí)，就會(huì)調(diào)用該函數(shù)。

  • readyState
    存有 XMLHttpRequest 的狀態(tài)
    從 0 到 4 發(fā)生變化。
    0: 請(qǐng)求未初始化
    1: 服務(wù)器連接已建立
    2: 請(qǐng)求已接收
    3: 請(qǐng)求處理中
    4: 請(qǐng)求已完成，且響應(yīng)已就緒

  • status
    200: "OK"
    404: 未找到頁面
    所以得當(dāng)ready為4，status=200時(shí)，才表示找到頁面，并且已經(jīng)讀取完畢時(shí)，調(diào)用onreadystatechange函數(shù)來執(zhí)行我們想要的邏輯。

  • 服務(wù)器響應(yīng)內(nèi)容

    • 如果響應(yīng)的是普通字符串,使用responseText
    • 如果響應(yīng)的是XML,使用responseXML
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容