說說前端那些事之ajax

時間 2019-12-07

標籤說說前端那些 ajax 欄目 Ajax 简体版

原文原文鏈接

原生ajax請求

前些日子，忙着考駕照，沒有時間對知識進行總結，感到十分慚愧啊，恰好趁如今有時間，作個知識總結，但願對各位有所幫助。
不少人都知道ajax是用來進行數據請求的，可是具體的請求方法會有些疑惑，也有不少人問我什麼是數據交互是什麼？在這裏我將經過四個三個方面進行講解，算是給前端新手的吧大神能夠忽略。javascript

什麼是ajax

ajax原理是什麼

ajax的優勢與缺點

如何利用ajax進行數據交互

在這裏引用一張網圖來做爲開頭部分php

1.什麼是 ajax

百度百科上是這樣解釋的：
AJAX即「Asynchronous Javascript And XML」（異步JavaScript和XML），是指一種建立交互式網頁應用的網頁開發技術。
AJAX = 異步 JavaScript和XML（標準通用標記語言的子集）。
AJAX 是一種用於建立快速動態網頁的技術。
經過在後臺與服務器進行少許數據交換，AJAX 可使網頁實現異步更新。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。
傳統的網頁（不使用 AJAX）若是須要更新內容，必須重載整個網頁頁面。html

2. ajax原理

Ajax的原理簡單來講經過XmlHttpRequest對象來向服務器發異步請求，從服務器得到數據，而後用javascript來操做DOM而更新頁面。這其中最關鍵的一步就是從服務器得到請求數據。要清楚這個過程和原理，咱們必須對 XMLHttpRequest有所瞭解。
　XMLHttpRequest是ajax的核心機制，它是在IE5中首先引入的，是一種支持異步請求的技術。簡單的說，也就是javascript能夠及時向服務器提出請求和處理響應，而不阻塞用戶。達到無刷新的效果。
　因此咱們先從XMLHttpRequest講起，來看看它的工做原理。
　首先，咱們先來看看XMLHttpRequest這個對象的屬性。
　　它的屬性有：
　　onreadystatechange 每次狀態改變所觸發事件的事件處理程序。
　　responseText 從服務器進程返回數據的字符串形式。
　　responseXML 從服務器進程返回的DOM兼容的文檔數據對象。
　　status 從服務器返回的數字代碼，好比常見的404（未找到）和200（已就緒）
　　status Text 伴隨狀態碼的字符串信息
　　readyState 對象狀態值
　　　　0 (未初始化) 對象已創建，可是還沒有初始化（還沒有調用open方法）
　　　　1 (初始化) 對象已創建，還沒有調用send方法
　　　　2 (發送數據) send方法已調用，可是當前的狀態及http頭未知
　　　　3 (數據傳送中) 已接收部分數據，由於響應及http頭不全，這時經過responseBody和responseText獲取部分數據會出現錯誤，
　　　　4 (完成) 數據接收完畢,此時能夠經過經過responseXml和responseText獲取完整的迴應數據前端

　　可是，因爲各瀏覽器之間存在差別，因此建立一個XMLHttpRequest對象可能須要不一樣的方法。這個差別主要體如今IE和其它瀏覽器之間java

3. ajax優勢與缺點

優勢：Ajax的給咱們帶來的好處你們基本上都深有體會，在這裏我只簡單的講幾點：
一、最大的一點是頁面無刷新，在頁面內與服務器通訊，給用戶的體驗很是好。
　二、使用異步方式與服務器通訊，不須要打斷用戶的操做，具備更加迅速的響應能力。
　三、能夠把之前一些服務器負擔的工做轉嫁到客戶端，利用客戶端閒置的能力來處理，減輕服務器和帶寬的負擔，節約空間和寬帶租用成本。而且減輕服務器的負擔，ajax的原則是「按需取數據」，能夠最大程度的減小冗餘請求，和響應對服務器形成的負擔。
四、基於標準化的並被普遍支持的技術，不須要下載插件或者小程序。
缺點：一、ajax幹掉了back按鈕，即對瀏覽器後退機制的破壞。後退按鈕是一個標準的web站點的重要功能，可是它無法和js進行很好的合做。這是ajax所帶來的一個比較嚴重的問題，由於用戶每每是但願可以經過後退來取消前一次操做的。那麼對於這個問題有沒有辦法？答案是確定的，用過Gmail的知道，Gmail下面採用的ajax技術解決了這個問題，在Gmail下面是能夠後退的，可是，它也並不能改變ajax的機制，它只是採用的一個比較笨可是有效的辦法，即用戶單擊後退按鈕訪問歷史記錄時，經過建立或使用一個隱藏的IFRAME來重現頁面上的變動。（例如，當用戶在Google Maps中單擊後退時，它在一個隱藏的IFRAME中進行搜索，而後將搜索結果反映到Ajax元素上，以便將應用程序狀態恢復到當時的狀態。）
可是，雖說這個問題是能夠解決的，可是它所帶來的開發成本是很是高的，和ajax框架所要求的快速開發是相背離的。這是ajax所帶來的一個很是嚴重的問題。
二、安全問題
技術同時也對IT企業帶來了新的安全威脅，ajax技術就如同對企業數據創建了一個直接通道。這使得開發者在不經意間會暴露比之前更多的數據和服務器邏輯。ajax的邏輯能夠對客戶端的安全掃描技術隱藏起來，容許黑客從遠端服務器上創建新的攻擊。還有ajax也難以免一些已知的安全弱點，諸如跨站點腳步攻擊、SQL注入攻擊和基於credentials的安全漏洞等。
三、對搜索引擎的支持比較弱。
四、破壞了程序的異常機制。至少從目前看來，像ajax.dll，ajaxpro.dll這些ajax框架是會破壞程序的異常機制的。關於這個問題，我曾經在開發過程當中遇到過，可是查了一下網上幾乎沒有相關的介紹。後來我本身作了一次試驗，分別採用ajax和傳統的form提交的模式來刪除一條數據……給咱們的調試帶來了很大的困難。
五、另外，像其餘方面的一些問題，好比說違背了url和資源定位的初衷。例如，我給你一個url地址，若是採用了ajax技術，也許你在該url地址下面看到的和我在這個url地址下看到的內容是不一樣的。這個和資源定位的初衷是相背離的。
六、一些手持設備（如手機、PDA等）如今還不能很好的支持ajax，好比說咱們在手機的瀏覽器上打開採用ajax技術的網站時，它目前是不支持的，固然，這個問題和咱們沒太多關係。python

4.如何進行數據交互

好比下面一個簡單的例子，點擊獲取按鈕獲取數據並把數據渲染到頁面
htmlweb

<!DOCTYPE html>
<html>
<head>
    <title>ajax</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>123</p>
<div id="box">
    <select id="city"></select>
    <input type="button" value="獲取" id="get" />
</div>
</body>
</html>

相應的原生js代碼ajax

<script type="text/javascript">
    var get = document.getElementById("get");
    var city = document.getElementById("city");
    get.onclick = function () {
        //建立XHR對象,主要是瀏覽器兼容性差別，處理兼容問題通常都是經過判斷去解決。下面是一個三目運算符。
        var xhr = window.XMLHttpRequest ? new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");
        //設置請求URL
        var url = "./login.php";
        //設置XHR對象readyState變化時響應函數
        xhr.onreadystatechange = function () {
            //readyState是請求的狀態，爲4表示請求結束
            if (xhr.readyState == 4 && xhr.status == 200) {
                //responseText服務器響應的內容
                //經過eval把傳來的json字符串轉成對象
                var data = eval(this.responseText);
                console.log(this.responseText)
                var str = "";
                for(var i in data) {
                    str += "<option value='" + data[i].id + "'>" + data[i].name + "</option>";
                }
                city.innerHTML = str;
            }
        };
        //打開連接，注意請求的方式是get仍是post請求
        xhr.open("get", url, true);
        //發送請求
        xhr.send();

    }
</script>

我相信不少人都想知道後端是如何返回數據的，這個問題我請教了個人朋友，因此我用簡單的php代碼寫一寫json

<?php
    $data = array(
        array("id" => 1,"name" => "上海"),
        array("id" => 2,"name" => "北京"),
        array("id" => 3,"name" => "廣州"),
        array("id" => 4,"name" => "深圳"),
    );
echo  json_encode($data);
這裏的$data就是後端返回給你的數據

到此一個完整的原生get請求就結束了小夥伴能夠試着去運轉一下。遍歷循環後端返回數據的過程其實就是前端渲染過程。
下面在寫一個簡單的post請求小夥伴注意請求的區別小程序

<!DOCTYPE html>
<html>
<head>
    <title>ajax</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="box">
    <input type="text" name="name" value="" id="name" />
    <input type="password" name="pwd" value="" id="pwd" />
    <input type="submit" name="sub" value="註冊" id="sub" />
</div>
<p></p>
</body>
</html>

相應的原生js代碼

<script type="text/javascript">
  window.onload=function(){
      var sub = document.getElementById("sub");
      sub.onclick = function () {
          var name = document.getElementById("name").value;
          var pwd = document.getElementById("pwd").value;
          var p = document.getElementsByTagName("p")[0];
          console.log(p)
          //建立XHR對象
          var xhr = new XMLHttpRequest();
          //設置請求URL
          var url = "./post.php";
          //設置XHR對象readyState變化時響應函數

          //打開連接
          xhr.open("POST", url, true);
          //設置請求頭部,(這裏就是post請求和get請求的區別)
          xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
          //發送請求 主要是前端傳遞的參數
          xhr.send("name="+name+" &pwd="+pwd);
          xhr.onreadystatechange = function () {
              //readyState是請求的狀態，爲4表示請求結束
              if (xhr.readyState == 4 && xhr.status == 200) {
                  //responseText服務器響應的內容
                  console.log(xhr.responseText)
                  p.innerHTML=this.responseText

              }
          };
      }
  }

</script>

那麼後端一樣的php代碼就要這樣寫，其實我以爲前端會一點簡單的後端語言頗有必要，我也就只學習了一點點php，學習的主要目的是知道先後端是如何進行數據交互的，我傳給後端的參數後端是如何接收處理並返回我想要的數據的。php大神能夠忽略

<?php
$name = !empty($_POST['name']) ? trim($_POST['name']) : '沒有名字';
$pwd = !empty($_POST['pwd']) ? trim($_POST['pwd']) : '沒有密碼';
echo "歡迎來到".$name."博客";

建議能夠把ajax函數封裝成方法，方便調用。至此，個人講解結束有啥問題能夠在羣裏找我歡迎各位假如羣主很熱心羣裏也有不少大神。web前端開發 474471759

相關標籤/搜索

每日一句

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