ajax應用篇

時間 2019-11-17

標籤 ajax 應用欄目 Ajax 简体版

原文原文鏈接

ajax簡介

AJAX即「Asynchronous Javascript And XML」（異步JavaScript和XML），是指一種建立交互式網頁應用的網頁開發技術。Ajax不是一種新的編程語言，而是使用現有標準的新方法。AJAX能夠在不從新加載整個頁面的狀況下，與服務器交換數據。這種異步交互的方式，使用戶單擊後，沒必要刷新頁面也能獲取新數據。使用Ajax，用戶能夠建立接近本地桌面應用的直接、高可用、更豐富、更動態的Web用戶界面。javascript

Ajax包括：html

XHTML和CSS
使用文檔對象模型(Document Object Model)做動態顯示和交互
使用XML和XSLT作數據交互和操做
使用XMLHttpRequest進行異步數據接收

利用AJAX能夠作：java

註冊時，輸入用戶名自動檢測用戶是否已經存在。
登錄時，提示用戶名密碼錯誤
刪除數據行時，將行ID發送到後臺，後臺在數據庫中刪除，數據庫刪除成功後，在頁面DOM中將數據行也刪除。（博客園）

ajax僞造

iframe就是咱們經常使用的iframe標籤：<iframe>。iframe標籤是框架的一種形式，也比較經常使用到，iframe通常用來包含別的頁面，例如咱們能夠在咱們本身的網站頁面加載別人網站或者本站其餘頁面的內容。iframe標籤的最大做用就是讓頁面變得美觀。iframe標籤的用法有不少，主要區別在於對iframe標籤訂義的形式不一樣，例如定義iframe的長寬高。python

所以，iframe標籤具備局部加載內容的特性，因此可使用其來僞造Ajax請求。jquery

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>僞造AJAX</title>
    </head>
    <body>
        <div>
            <p>請輸入要加載的地址：<span id="currentTime"></span></p>
            <p>
                <input id="url" type="text" />
                <input type="button" value="提交" onclick="LoadPage();">
            </p>
        </div>
        <div>
            <h3>加載頁面位置：</h3>
            <iframe id="iframePosition" style="width: 100%;height: 500px;"></iframe>
        </div>
        <script type="text/javascript">
            window.onload= function(){
                var myDate = new Date();
                document.getElementById('currentTime').innerText = myDate.getTime();
 
            };
            function LoadPage(){
                var targetUrl =  document.getElementById('url').value;
                document.getElementById("iframePosition").src = targetUrl;
            }
        </script>
    </body>
</html>

原理是這樣的，設置一個提交按鈕，再設置一個輸入框，當咱們輸入一個網址的時候，在當前的頁面加載輸入網址的頁面信息，呈如今iframe框裏，這樣就能作到不刷新URL來提交不一樣的信息。web

原生ajax

Ajax的核心是XMLHttpRequest對象(XHR)。XHR爲向服務器發送請求和解析服務器響應提供了接口。可以以異步方式從服務器獲取新數據。ajax

1、XMLHttpRequest對象數據庫

Ajax的核心是XMLHttpRequest對象(XHR)。XHR爲向服務器發送請求和解析服務器響應提供了接口。可以以異步方式從服務器獲取新數據。編程

XHR的主要方法有：json

1. void open(String method,String url,Boolen async)   
   用於建立請求    
   參數：
       method： 請求方式（字符串類型），如：POST、GET、DELETE...
       url：    要請求的地址（字符串類型）
       async：  是否異步（布爾類型）
 
2. void send(String body)
    用於發送請求
    參數：
        body： 要發送的數據（字符串類型） 

3. void setRequestHeader(String header,String value)
    用於設置請求頭
    參數：
        header： 請求頭的key（字符串類型）
        vlaue：  請求頭的value（字符串類型）
 
4. String getAllResponseHeaders()
    獲取全部響應頭
    返回值：
        響應頭數據（字符串類型）
 
5. String getResponseHeader(String header)
    獲取響應頭中指定header的值
    參數：
        header： 響應頭的key（字符串類型）
    返回值：
        響應頭中指定的header對應的值
 
6. void abort()
    終止請求

XHR的主要屬性有：

1. Number readyState
   狀態值（整數），能夠肯定請求/響應過程的當前活動階段

0：未初始化。未調用open()方法
1：啓動。已經調用open()方法，未調用send()方法
2：發送。已經調用send()方法，未接收到響應
3：接收。已經接收到部分數據
4：完成。已經接收到所有數據，能夠在客戶端使用


2. Function onreadystatechange                當readyState的值改變時自動觸發執行其對應的函數（回調函數）

3. String responseText                        做爲響應主體被返回的文本（字符串類型）

4. XmlDocument responseXML                    服務器返回的數據（Xml對象） 

5. Number states                              狀態碼（整數），如：200、404... 

6. String statesText                          狀態文本（字符串），如：OK、NotFound...

2、get請求

GET用於向服務器查詢某些信息：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <h1>XMLHttpRequest - Ajax請求</h1>
    <input type="button" onclick="XmlGetRequest();" value="Get發送請求" />

    <script src="/statics/jquery-1.12.4.js"></script>
    <script type="text/javascript">

        function GetXHR(){
            var xhr = null;
            if(XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xhr;
        }
        function XmlGetRequest(){
            var xhr = GetXHR();
            // 定義回調函數
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    // 已經接收到所有響應數據，執行如下操做
                    var data = xhr.responseText;
                    console.log(data);
                }
            };
            // 指定鏈接方式和地址----文件方式
            xhr.open('get', "/test/", true);
            // 發送請求
            xhr.send();
        }
    </script>
</body>
</html>

get

3、post請求

POST請求用於向服務器發送應該被保存的數據。POST請求的主體能夠包含很是多的數據，並且格式不限。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>POST</title>
</head>
<body>

    <h1>XMLHttpRequest - Ajax請求</h1>
    <input type="button" onclick="XmlPostRequest();" value="Post發送請求" />

    <script src="/statics/jquery-1.12.4.js"></script>
    <script type="text/javascript">

        function GetXHR(){
            var xhr = null;
            if(XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xhr;
        }
        function XmlPostRequest(){
            var xhr = GetXHR();
            // 定義回調函數
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    // 已經接收到所有響應數據，執行如下操做
                    var data = xhr.responseText;
                    console.log(data);
                }
            };
            // 指定鏈接方式和地址----文件方式
            xhr.open('POST', "/test/", true);
            // 設置請求頭
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
            // 發送請求
            xhr.send('n1=1;n2=2;');
        }
    </script>
</body>
</html>

post

jquery ajax

jQuery 提供多個與 AJAX 有關的方法。

經過 jQuery AJAX 方法，您可以使用 HTTP Get 和 HTTP Post 從遠程服務器上請求文本、HTML、XML 或 JSON - 同時您可以把這些外部數據直接載入網頁的被選元素中。

jQuery 不是生產者，而是大天然搬運工。
jQuery Ajax本質 XMLHttpRequest 或 ActiveXObject

注：2.+版本再也不支持IE9如下的瀏覽器

1. jQuery.get(...)
       全部參數：
              url: 待載入頁面的URL地址
             data: 待發送 Key/value 參數。
          success: 載入成功時回調函數。
         dataType: 返回內容格式，xml, json,  script, text, html

2.jQuery.post(...)
       全部參數：
              url: 待載入頁面的URL地址
             data: 待發送 Key/value 參數
          success: 載入成功時回調函數
         dataType: 返回內容格式，xml, json,  script, text, html

3.jQuery.getJSON(...)
       全部參數：
              url: 待載入頁面的URL地址
             data: 待發送 Key/value 參數。
          success: 載入成功時回調函數。

4.jQuery.getScript(...)
       全部參數：
              url: 待載入頁面的URL地址
             data: 待發送 Key/value 參數。
          success: 載入成功時回調函數。

5.jQuery.ajax(...)
       部分參數：
              url：請求地址
             type：請求方式，GET、POST（1.9.0以後用method）
          headers：請求頭
             data：要發送的數據
      contentType：即將發送信息至服務器的內容編碼類型(默認: "application/x-www-form-urlencoded; charset=UTF-8")
            async：是否異步
          timeout：設置請求超時時間（毫秒）
       beforeSend：發送請求前執行的函數(全局)
         complete：完成以後執行的回調函數(全局)
          success：成功以後執行的回調函數(全局)
            error：失敗以後執行的回調函數(全局)
          accepts：經過請求頭髮送給服務器，告訴服務器當前客戶端課接受的數據類型
         dataType：將服務器端返回的數據轉換成指定類型
            "xml": 將服務器端返回的內容轉換成xml格式
           "text": 將服務器端返回的內容轉換成普通文本格式
           "html": 將服務器端返回的內容轉換成普通文本格式，在插入DOM中時，若是包含JavaScript標籤，則會嘗試去執行。
         "script": 嘗試將返回值看成JavaScript去執行，而後再將服務器端返回的內容轉換成普通文本格式
           "json": 將服務器端返回的內容轉換成相應的JavaScript對象
          "jsonp": JSONP 格式使用 JSONP 形式調用函數時，如 "myurl?callback=?" jQuery 將自動替換 ? 爲正確的函數名，以執行回調函數

方法列表

寫一個最簡單的例子：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <p>
        <input type="button" onclick="XmlSendRequest();" value='Ajax請求' />
    </p>
    <script type="text/javascript" src="jquery-1.12.4.js"></script>
    <script>
        function JXmlSendRequest(){
            $.ajax({
                url: "http://c2.com:8000/test/",    // 訪問url地址
                type: 'GET',                        // get方式提交
                dataType: 'text',　　　　　　　　　　  // 數據類型
                success: function(data, statusText, xmlHttpRequest){  // 成功後返回的結果
                    console.log(data);
                }
            })
        }
    </script>
</body>
</html>

跨域ajax

因爲瀏覽器存在同源策略機制，同源策略阻止從一個源加載的文檔或腳本獲取或設置另外一個源加載的文檔的屬性。因此ajax自己是不能夠跨域的，經過產生一個script標籤來實現跨域。由於script標籤的src屬性是沒有跨域的限制的。

瀏覽器同源策略並非對全部的請求均制約：

制約： XmlHttpRequest
不制約： img、iframe、script等具備src屬性的標籤

注：本身模擬跨域，須要如今本身電腦的host文件裏面添加兩條域名，我這裏添加的是zhangyanlin.com和aylin.com這兩個域名

1、JSONP實現跨域請求

JSONP是一個非官方的協議，它容許在服務器端集成Script tags返回至客戶端，經過javascript callback的形式實現跨域訪問。jsonp只能經過get方式進行跨域請求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input  type="button" value="Ajax" onclick="DoAjax();"/>
    <input  type="button" value="JsonpAjax" onclick="JsonpAjax();"/>

    <script src="/statics/jquery-1.12.4.js"></script>
    <script src="http://aylin.com:8002/statics/jquery.cookie.js"></script>
    <script>
        function func(arg) {
            console.log(arg);  // 輸出結果就是python代碼給傳過來的列表[11,22,33,]
        }
        function DoAjax() {
            $.ajax({
                url: 'http://alex.com:8002/index',
                type: 'POST',
                data: {'k1': 'v1'},
                success: function (arg) {
                    console.log(arg);
                }               
            });
        }
        function JsonpAjax() {
//            var tag = document.createElement('script');
//            tag.src = "http://alex.com:8002/index";
//            document.head.appendChild(tag);
//            document.head.removeChild(tag);
            $.ajax({
                url: "http://aylin.com:8002/index",
                dataType: 'jsonp',
                jsonpCallBack: 'func'   // 對端給返回函數名，函數接收的參數是內容
            })
        }
    </script>
</body>
</html>

aylin.com域名這邊能夠給定義函數

# 採用pythontornado框架來進行的
class IndexHandler(tornado.web.RequestHandler):
    def get(self):
        self.write('func([11,22,33]);')
    def post(self, *args, **kwargs):
        self.write('t2.post')

在這裏jsonp就採用script標籤的src來進行跨域請求的

2、CORS

上面那種方法說到瀏覽器的同源策略致使ajax沒法進行跨域傳輸，那麼這種方法就能夠突破瀏覽器限制來進行傳輸。當數據發送給對方域名的時候，對方已經收到，可是在返回的時候被瀏覽器給阻擋，咱們能夠寫一串相似於身份證的字符串，經過瀏覽器的預檢，從而達到數據的傳輸。

這方面分爲簡單請求和非簡單請求

條件：
    一、請求方式：HEAD、GET、POST
    二、請求頭信息：
        Accept
        Accept-Language
        Content-Language
        Last-Event-ID
        Content-Type 對應的值是如下三個中的任意一個
                                application/x-www-form-urlencoded
                                multipart/form-data
                                text/plain
 
注意：同時知足以上兩個條件時，則是簡單請求，不然爲複雜請求

簡單請求只一次請求，而複雜請求是兩次請求，在發送數據以前會先發一次請求用於作「預檢」，只有「預檢」經過後纔再發送一次請求用於數據傳輸。

基於cors實現AJAX請求:

一、支持跨域，簡單請求

服務器設置響應頭：Access-Control-Allow-Origin = '域名' 或 '*'

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <p>
        <input type="submit" onclick="XmlSendRequest();" />
    </p>

    <p>
        <input type="submit" onclick="JqSendRequest();" />
    </p>

    <script type="text/javascript" src="jquery-1.12.4.js"></script>
    <script>
        function XmlSendRequest(){
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4) {
                    var result = xhr.responseText;
                    console.log(result);
                }
            };
            xhr.open('GET', "http://c2.com:8000/test/", true);
            xhr.send();
        }

        function JqSendRequest(){
            $.ajax({
                url: "http://c2.com:8000/test/",
                type: 'GET',
                dataType: 'text',
                success: function(data, statusText, xmlHttpRequest){
                    console.log(data);
                }
            })
        }


    </script>
</body>
</html>

HTML

class MainHandler(tornado.web.RequestHandler):
    def get(self):
        self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")
        self.write('{"status": true, "data": "seven"}')

tornado

二、支持跨域，複雜請求

因爲複雜請求時，首先會發送「預檢」請求，若是「預檢」成功，則發送真實數據。

「預檢」請求時，容許請求方式則需服務器設置響應頭：Access-Control-Request-Method
「預檢」請求時，容許請求頭則需服務器設置響應頭：Access-Control-Request-Headers
「預檢」緩存時間，服務器設置響應頭：Access-Control-Max-Age

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <p>
        <input type="submit" onclick="XmlSendRequest();" />
    </p>

    <p>
        <input type="submit" onclick="JqSendRequest();" />
    </p>

    <script type="text/javascript" src="jquery-1.12.4.js"></script>
    <script>
        function XmlSendRequest(){
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4) {
                    var result = xhr.responseText;
                    console.log(result);
                }
            };
            xhr.open('PUT', "http://aylin.com:8000/test/", true);
            xhr.setRequestHeader('k1', 'v1');
            xhr.send();
        }

        function JqSendRequest(){
            $.ajax({
                url: "http://aylin.com:8000/test/",
                type: 'PUT',
                dataType: 'text',
                headers: {'k1': 'v1'},
                success: function(data, statusText, xmlHttpRequest){
                    console.log(data);
                }
            })
        }
    </script>
</body>
</html>

HTML

class MainHandler(tornado.web.RequestHandler):
    
    def put(self):
        self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")
        self.write('{"status": true, "data": "seven"}')

    def options(self, *args, **kwargs):
        self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")
        self.set_header('Access-Control-Allow-Headers', "k1,k2")
        self.set_header('Access-Control-Allow-Methods', "PUT,DELETE")
        self.set_header('Access-Control-Max-Age', 10)

tornado

三、跨域傳輸cookie

在跨域請求中，默認狀況下，HTTP Authentication信息，Cookie頭以及用戶的SSL證書不管在預檢請求中或是在實際請求都是不會被髮送。

若是想要發送：

瀏覽器端：XMLHttpRequest的withCredentials爲true
服務器端：Access-Control-Allow-Credentials爲true
注意：服務器端響應的 Access-Control-Allow-Origin 不能是通配符 *

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <p>
        <input type="submit" onclick="XmlSendRequest();" />
    </p>

    <p>
        <input type="submit" onclick="JqSendRequest();" />
    </p>

    <script type="text/javascript" src="jquery-1.12.4.js"></script>
    <script>
        function XmlSendRequest(){
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4) {
                    var result = xhr.responseText;
                    console.log(result);
                }
            };

            xhr.withCredentials = true;

            xhr.open('PUT', "http://aylin.com:8000/test/", true);
            xhr.setRequestHeader('k1', 'v1');
            xhr.send();
        }

        function JqSendRequest(){
            $.ajax({
                url: "http://aylin.com:8000/test/",
                type: 'PUT',
                dataType: 'text',
                headers: {'k1': 'v1'},
                xhrFields:{withCredentials: true},
                success: function(data, statusText, xmlHttpRequest){
                    console.log(data);
                }
            })
        }
    </script>
</body>
</html>

HTML

class MainHandler(tornado.web.RequestHandler):
    
    def put(self):
        self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")
        self.set_header('Access-Control-Allow-Credentials', "true")
        
        self.set_header('xxoo', "seven")
        self.set_header('zhangyanlinhenshuai', "feichangshuai")
        self.set_header('Access-Control-Expose-Headers', "shuai,shuaishuai")

        self.set_cookie('kkkkk', 'vvvvv');

        self.write('{"status": true, "data": "seven"}')

    def options(self, *args, **kwargs):
        self.set_header('Access-Control-Allow-Origin', "http://www.xxx.com")
        self.set_header('Access-Control-Allow-Headers', "k1,k2")
        self.set_header('Access-Control-Allow-Methods', "PUT,DELETE")
        self.set_header('Access-Control-Max-Age', 10)

View Code