Ajax相關知識總結

時間 2019-12-13

標籤 ajax 相關知識總結欄目 Ajax 简体版

原文原文鏈接

爲了前端與後臺進行交互，咱們使用ajax來完成這些功能。javascript

咱們首先了解，什麼是ajax？php

Asynchronous JavaScript and XMLcss

經過在後臺與服務器進行少許數據交換，Ajax 可使網頁實現異步更新，能夠局部刷新而沒必要整個頁面總體刷新。html

如何與服務器進行數據交換？前端

首先，須要本身搭建服務器，在服務端的環境中可運行PHP語言html5

ajax的優缺點：java

　　優勢：使用Ajax的最大優勢，就是能在不更新整個頁面的前提下維護數據。這使得Web應用程序更爲迅捷地迴應用戶動做，並避免了在網絡上發送那些沒有改變的信息。jquery

　　　　　Ajax不須要任何瀏覽器插件，但須要用戶容許javascript在瀏覽器上執行。Ajax應用程序必須在衆多不一樣的瀏覽器和平臺上通過嚴格的測試。web

　　缺點：它可能破壞瀏覽器的後退與加入收藏書籤功能。在動態更新頁面的狀況下，用戶沒法回到前一個頁面狀態，這是由於瀏覽器僅能記下歷史記錄中的靜態頁面。一個被完整讀入的頁面與一個已經被動態修改過的頁面之間的可能差異很是微妙；ajax

　　　　　用戶一般都但願單擊後退按鈕，就可以取消他們的前一次操做，可是在Ajax應用程序中，卻沒法這樣作。不過目前已有相關技術能夠解決該弊端。方法有兩個：（1）html5以前的方法大可能是在用戶單擊後退按鈕訪問歷史記錄時，經過建立或

　　　　　使用一個隱藏的IFRAME來重現頁面上的變動。（2）html5之後能夠直接操做瀏覽歷史，並以字符串形式存儲網頁狀態，將網頁加入網頁收藏夾或書籤時狀態會被隱形地保留。

補充php簡單介紹：

　　　　PHP（外文名:PHP: Hypertext Preprocessor，中文名：「超文本預編譯語言」）是一種通用開元腳本語言。語法吸取了C語言、Java和perl的特色，利於學習，使用普遍，主要適用於web開發領域。PHP還能夠執行編譯後代碼，

　　　　編譯能夠達到加密和優化代碼運行，使代碼運行更快。

　　　　PHP 文件可包含文本、HTML、JavaScript代碼和 PHP 代碼

　　　　PHP 代碼在服務器上執行，結果以純 HTML 形式返回給瀏覽器

　　　　PHP 文件的默認文件擴展名是 ".php"

php基礎語法：

　　　　PHP 腳本以 <?php 開始，以 ?> 結束：

　　　　PHP 中的每一個代碼行都必須以分號結束。分號是一種分隔符，用於把指令集區分開來。

　　　　經過 PHP，有兩種在瀏覽器輸出文本的基礎指令：echo 和 print。

PHP 變量規則：

　　　　變量以 $ 符號開始，後面跟着變量的名稱

　　　　變量名必須以字母或者下劃線字符開始

　　　　變量名只能包含字母數字字符以及下劃線（A-z、0-9 和 _ ）

　　　　變量名不能包含空格

　　　　變量名是區分大小寫的（$y 和 $Y 是兩個不一樣的變量）

　　　　PHP 會根據變量的值，自動把變量轉換爲正確的數據類型。

　　　　　　字符串之間使用 " . " 鏈接

從網頁進入服務器有三種基本方式：

1. localhost:+端口號
2. 127.0.0.1+端口號
3. ip+端口號

而後，和服務器端的php頁面創建聯繫

其請求方式有GET和POST

get和post的區別：
get參數是在地址欄中，大小2000個字符左右
post參數是在請求體中，網速良好，理論上是無限大的

ajax實例：：在html頁面中的form表單中，與 05.php 創建聯繫，數據傳遞方式爲GET

    <h1>經過get方式提交表單</h1>
    <form action="05.php" method="GET">
        <input type="text" placeholder="請輸入用戶名" name="userName">
        <br>
        <input type="text" placeholder="請輸入技能" name="userSkill">
        <br>
        <input type="submit">
        <button>提交</button>
        <!-- <input type="image" src=""> -->
    </form>

下面是05.php頁面的內容：

<?php
    echo "這個爲get提交的頁面";


    // $_GET[]   get提交方式從前臺傳遞過來的數據

    echo "<br>";
    echo $_GET['userName'];
    echo "<br>";
    echo $_GET['userSkill'];
    echo "<br>";
    echo '<h1>'.$_GET['userName'].'歡迎你</h1>';   //在php中字符串拼接使用的是.
?>

效果如圖所示：

form表單中post方法數據傳遞方式爲只改變

html頁面中<form action="06.php" method="POST">

PHP頁面中echo $_POST['userName'];

例如：

<h1>經過post方式提交表單</h1>
    <form action="06.php" method="POST">
        <input type="text" placeholder="請輸入用戶名" name="userName">
        <br>
        <input type="text" placeholder="請輸入技能" name="userSkill">
        <br>
        <input type="submit">
        <button>提交</button>
        <!-- <input type="image" src=""> -->
    </form>

<?php
    echo "這個爲get提交的頁面";



    echo "<br>";
    echo $_POST['userName'];
    echo "<br>";
    echo $_POST['userSkill'];
    echo "<br>";
    echo '<h1>'.$_POST['userName'].'歡迎你</h1>';   //在php中字符串拼接使用的是.
?>

Ajax-GET請求基本使用其步驟可分爲：

1建立一個異步對象

2.設置請求方式和請求地址

3.發送請求

4.監聽狀態變化

5.處理返回結果

以下例子：

首先建立01.html和01.php

在body中製做一個按鈕

<button id="btn">驗證</button>

在<script>中獲取

var btn = document.getElementById("btn");

建立點擊事件，點擊btn發送ajax請求

第一步：建立ajax對象（混用兼容IE）

 btn.onclick = function(){
        // 第一步：建立ajax對象
        var xhr;
        if(window.XMLHttpRequest){    
            //  IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼
            xhr = new XMLHttpRequest();
        }else{   
             // IE6, IE5 瀏覽器執行代碼
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }

第二步：設置請求方式和請求地址

      /* method：請求的類型；GET 或 POST
         url：文件在服務器上的位置
         async：true（異步）或 false（同步）*/
        xhr.open('GET','01.php',true);
        // 第一個是請求方式，第二個是請求地址，第三個是選擇異步（及ajax永遠都選true）

第三步：發送請求

      xhr.send(null);
      //若是是post請求，就放post參數，若是是get請求，發送null就好了

第四步：監聽狀態變化

     •0: 請求未初始化
   •1: 服務器鏈接已創建
   •2: 請求已接收
   •3: 請求處理中
   •4: 請求已完成，且響應已就緒

http狀態響應碼：參考 https://blog.csdn.net/ddhsea/article/details/79405996
　　1xx 信息類

　　　　100 （繼續）請求者應當繼續提出請求。服務器返回此代碼表示已收到請求的第一部分，正在等待其他部分

　　2xx 成功

　　　　200 （成功）服務器已成功處理了請求。一般，這表示服務器提供了請求的網頁。

　　3xx 重定向

　　　　304 （未修改）自從上次請求後，請求的網頁未修改過。服務器返回此響應時，不會返回網頁內容。

　　4xx 客戶端錯誤

　　　　404 （未找到）服務器找不到請求的網頁。

　　5xx 服務端錯誤

　　　　503 （服務不可用）服務器目前沒法使用（因爲超載或停機維護）。一般，這只是暫時狀態。

         
         xhr.onreadystatechange=function() {
                  //已經響應
             if(xhr.readyState==4){
                 //判斷是否響應成功
              if(xhr.status>=200&&xhr.status<300||xhr.status===304){
                 console.log("接受到服務器返回的數據")
              }else {
                  console.log("沒有接受到服務器返回的數據")
                    }
               }
            }

圖例：

成功

失敗例子：

請求失敗，緣由請求地址xhr.open('GET','0.php',true);沒有鏈接正確的地址

ajax發送post請求其步驟與GET請求一致（需改變請求方式）

xhr.open('POST','01.php',true);

補：同時在發送post請求的時候，你得告訴服務器你發送的是一個什麼（可在手冊請求中查找到相關內容）

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

完整代碼GET請求代碼：

    <button id="btn">驗證</button>
    <script>
    var btn = document.getElementById("btn");

     btn.onclick = function(){

        var xhr;
        if(window.XMLHttpRequest){    

            xhr = new XMLHttpRequest();
        }else{   

            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }


        xhr.open('GET','01.php',true);

        xhr.send();

         xhr.onreadystatechange=function() {
             if(xhr.readyState==4){
              if(xhr.status>=200&&xhr.status<300||xhr.status===304){
                 console.log("接受到服務器返回的數據")
              }else {
                  console.log("沒有接受到服務器返回的數據")
                    }
                 }
            }
        }

    </script>

</body>

方法二使用jquery-ajax發送get請求

$("#btn").click(function(){
            $.ajax({
                type : "POST",
                url : "http://192.168.9.154:8888/0221ajax/01.php",
                data : {
                    uname : $("#username").val()
                },
                success : function(data){   //就是原生的xhr.responseText
                    console.log(data);
                    if(data == 0){
                        $("#ts").html("該用戶名可使用").css("color","green");
                    }else if(data == 1){
                        $("#ts").html("該用戶名已被佔用").css("color","red");
                    }
                },
                error : function(err){    //錯誤的
                    console.log(err)
                }
            })
        })

HTMl代碼

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入jquery -->
    <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
    <h1>使用jquery-ajax發送get請求</h1>
    用戶名：<input type="text" id="username">
    <span id="ts"></span>
    <br>
    密碼：<input type="text">

    <button id="btn">驗證用戶名</button>

php代碼

<?php
    header("ACCESS-CONTROL-ALLOW-ORIGIN:*");
    header("ACCESS-CONTROL-ALLOW-Methods","DELETE,PUT,POST,GET,OPTIONS");

    $db = ['jack','mack','mary'];   //模擬數據庫
    $username = $_REQUEST['uname'];  //表示能夠接收post參數或者get參數

    $flag = false;
    foreach($db as $n){
        if($n === $username){
            $flag = true;
            break;
        }
    }

    if($flag){
        echo "1";
    }else{
        echo "0";
    }

?>

跨域：

什麼是跨域？
由於ajax受同源策略的影響，地址不一樣，不能相互的去訪問資源，如例：

  //                           域名
        // //    http://  www.bailiban.com :  8888  /img/01.jpg?name=jack
        //       https:
        //       協議   子域名   主域名   端口號   請求的資源路徑
        //       協議，子域名，主域名，端口號，只要有一個不一樣就是跨域，資源就不能經過ajax進行訪問

// No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8888' is therefore not allowed access.

        // 控制檯出現相似這樣的錯誤就是跨域報錯

如何解決？

1.代理服務器

2.設置請求頭在服務端語言增長兩行代碼

header("ACCESS-CONTROL-ALLOW-ORIGIN:*")
header("ACCESS-CONTROL-ALLOW-Methods","DELETE,PUT,POST,GET,OPTIONS");

3.JSONP

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。