Ajax_簡介： 異步的 JS 和 XML_原生寫 ajax 分析其原理_jquery_ajax_art-template

時間  2019-11-08
標籤 ajax 簡介 異步 xml 原生 分析 原理 jquery art template 欄目 Ajax 简体版
原文   原文鏈接

AJAXjavascript

Asynchronous JavaScript And XMLcss

經過 AJAX 能夠在 瀏覽器中向 服務器 發送異步請求html

一種 使用現有標準的 新方法，而非新語言前端

  • XML 

可擴展標記語言java

被設計用來傳輸和存儲數據node

被 JSON 替代，JSON 內容更少，解析更方便jquery

和 HTML 相似，不一樣的是git

  • HTML 都是預約義標籤
  • XML 所有是自定義標籤，用來表示一些數據
  • AJAX 工做原理

至關於在 用戶 和 服務器 之間加了一箇中間層（AJAX 引擎）github

使得 用戶操做 和 服務器響應 異步化web

1. 原生 AJAX（不要經過 webstorm 啓動頁面，不然會發生 跨域 錯誤）

// 1. 建立 xhr 對象

const xhr = new XMLHttpRequest();

// 2. 設置事件監聽

xhr.onreadystatechange = function(){    // 會監聽 readyState 值的變化

if (xhr.readyState === 2) {

console.log(xhr.status);
console.log(xhr.getResponseHeader('Content-Type'));

}
if (xhr.readyState === 3) {

console.log(xhr.responseText);

}

if(xhr.readyState === 4 && xhr.status === 200){    // 響應成功

console.log(xhr.responseText);    // 響應數據

};

};

/****

前端面試題：

readyState

0        xhr 對象建立成功，可是 xhr.open() 還未調用

1        open() 已經調用了，可是還未調用 send() （意味着尚未發送請求，還能夠設置請求頭信息）

2        send() 已經調用了，接收到部分響應數據（響應首行、響應頭，沒接到響應體）

3        接收到了響應體數據（若是響應體較小，或者純文體，在此階段就所有接收完了）

4        接收徹底部的響應體數據（數據較大，或者音視頻資源）

****/

// 3. 設置請求信息    設置請求方式、地址、參數

xhr.open("GET", "http://localhost:3000/ajax?username=jack&age=18");

// 還能設置請求頭 xhr.setRequestHeader();

xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');

/****

必需要設置 請求頭 標準規範（有三種常見規範），不然不會解析請求參數

chrome 和 FireFox    第二次及之後默認走協商緩存，狀態碼 304，且還會向服務器發送請求

ie    第二次及之後 get 請求 默認走強制緩存，狀態碼 200，且不會向服務器發送請求

需求： 股票 須要實時更新信息，此時就不能從緩存裏找

解決 ie 的緩存問題：

讓每一次的請求不同

只要請求不同，就不會走緩存

xhr.open("GET", "http://localhost:3000/ajax?username=jack&age=18&date="+Date.now());

****/

// 4. 發送請求

xhr.send();

// post 發送數據 必須以 urlencode 格式，即查詢字符串去掉？，即 key=value的方式，多個鍵值對之間以 & 鏈接

  • 源碼實例
  • node.js 服務器

index.js

  • const express = require('express'); const app = express(); app.use(express.static("public")); app.use(express.urlencoded({extended: true})); app.get("/", (request, response)=>{ response.sendFile("./public/idnex.html"); }); // 原生 ajax 的 get 路由
app.get("/ajax", (request, response)=>{ console.log('----get 接收的 瀏覽器數據： '); console.log(request.query); // {} console.log(request.body); // get 請求體 始終爲空 console.log('----'); response.send({name: '服務器 get 響應', line: 15}); }); // 原生 ajax 的 post 路由
app.post("/ajax", (request, response)=>{ console.log('----post 接收的 瀏覽器數據： '); console.log(request.query); // {} 能夠有 請求字符串 console.log(request.body); // post請求體 數據{ username: 'jack', age: '18' } console.log('----'); response.send({name: '服務器 post 響應', line: 21}); }); /**************** 端口號 3000, 啓動服務器 ***************/ app.listen(3000, err=>console.log(err?err:'\n\n服務器已啓動: http://localhost:3000\n\t\tHunting Happy!'));
  • 瀏覽器前端代碼

index.html

  • <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>原生 ajax</title> </head> <body> <button id="get_btn">get</button> <button id="post_btn">post</button>

     <script type="text/javascript" src="js/index.js"></script> </body> </html>

js/index.js

  • window.addEventListener('DOMContentLoaded', function () { const getBtn = document.getElementById("get_btn"); const postBtn = document.getElementById("post_btn"); getBtn.onclick = function () { // 1. 建立 xhr 對象 const xhr = new XMLHttpRequest(); // 2. 設置事件監聽 xhr.onreadystatechange = function () { if (xhr.readyState === 2) { console.log(xhr.status); // 狀態碼 console.log(xhr.getResponseHeader('Content-Type')); // 請求頭 信息  }; if (xhr.readyState === 3) { console.log(xhr.responseText); // 服務器響應 數據  }; if(xhr.readyState === 4 && xhr.status === 200){ console.log(xhr.responseText); // 服務器響應 數據  }; }; // 3. 設置請求方式、請求地址、請求參數 xhr.open("GET", "http://localhost:3000/ajax?username=get&get=get"); // 4. 設置請求頭 xhr.setRequestHeader('get-x', 'get'); // 5. 發送請求 xhr.send('request=get&get=get'); // get 請求體爲空，因此這裏傳的參數，無效 }; postBtn.onclick = function () { // 1. 建立 xhr 對象 const xhr = new XMLHttpRequest(); // 2. 設置事件監聽 xhr.onreadystatechange = function () { if (xhr.readyState === 2) { console.log(xhr.status); console.log(xhr.getResponseHeader('Content-Type')); } if (xhr.readyState === 3) { console.log(xhr.responseText); } if(xhr.readyState === 4 && xhr.status === 200){ console.log(xhr.responseText); }; }; // 3. 設置請求方式、請求地址、請求參數 xhr.open("POST", "http://localhost:3000/ajax?username=post&post=post"); // 4. 設置請求頭 xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); // 5. 發送請求 xhr.send('request=post&post=post'); }; }, false);

2. jQuery 中的 AJAX 請求

  • node.js 服務器

index.js

  • const express = require('express'); const app = express(); app.use(express.static("public")); app.use(express.urlencoded({extended: true})); app.get("/", (request, response)=>{ response.sendFile("./public/idnex.html"); }); // 原生 ajax 的 get 路由 app.get("/jquery_ajax", (request, response)=>{ console.log('----get 接收的 瀏覽器數據： '); console.log(request.query); // {} console.log(request.body); // get 請求體 始終爲空 console.log('----'); response.send({name: '服務器 get 響應', line: 15}); }); // 原生 ajax 的 post 路由 app.post("/jquery_ajax", (request, response)=>{ console.log('----post 接收的 瀏覽器數據： '); console.log(request.query); // {} 能夠有 請求字符串 console.log(request.body); // post請求體 數據{ username: 'jack', age: '18' } console.log('----'); response.send({name: '服務器 post 響應', line: 21}); }); /**************** 端口號 3000, 啓動服務器 ***************/ app.listen(3000, err=>console.log(err?err:'\n\n服務器已啓動: http://localhost:3000\n\t\tHunting Happy!'));
  • 瀏覽器前端代碼

index.html

  • <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>jQuery 中的 ajax</title> </head> <body> <button id="get_btn">get</button> <button id="post_btn">post</button>  <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript" src="js/jquery_ajax.js"></script> </body> </html>

index.js

  • window.addEventListener('DOMContentLoaded', function () { const getBtn = document.getElementById("get_btn"); const postBtn = document.getElementById("post_btn"); getBtn.onclick = function () { $.ajax('http://localhost:3000/jquery_ajax', { method: 'GET', // 能夠直接換成 POST，庫解決好了請求頭和兼容等一系列問題  data: { getrequest:'Browser', age:10 }, headers: { 'get-xxx': 'xxxx' }, success: function (server_info) { console.log('請求成功的回調函數'); console.log(server_info); // 自動將 json 字符串 轉換成 JSON 對象  }, error: function (err) { console.log('請求失敗的回調函數'); console.log(err); } }); }; postBtn.onclick = function () { $.get( // 能夠直接換成 post，庫解決好了請求頭和兼容等一系列問題 'http://localhost:3000/jquery_ajax', {postrequest:'Browser', age:26}, function (server_info) { console.log(server_info); }); }; }, false);

三級聯動 選擇（省-市-縣）

  • 服務器 index.js
  • const express = require('express');
const promiseConnect = require('./db/connectDB.js');
const citiesModel = require('./models/userModel.js');
const app = express();

(async ()=>{
    const ret = await promiseConnect;
    console.log(ret);
    
    app.use(express.static("public"));
    app.use(express.urlencoded({extended: true}));
    
    app.get("/", (request, response)=>{
        response.sendFile("./public/index.html");
    });

    // 省 的 get 路由
    app.get("/province", async (request, response)=>{
        try{
            const province = await citiesModel.find({"level": 1}, {"province": 1, "name": 1, "_id": 0});
            response.json({code: 200, data: province});
        }catch(err){
            console.log(err);
            response.json({code: 404, data: '網絡不穩定，請刷新重試'});
        };
    });
    
    // 市 的 get 路由
    app.get("/city", async (request, response)=>{
        try{
            const {province} = request.query;
            const city = await citiesModel.find({province, "level": 2}, {"city": 1, "name": 1, "_id": 0});
            response.json({code: 200, data: city});
        }catch(err){
            console.log(err);
            response.json({code: 404, data: '網絡不穩定，請刷新重試'});
        };
    });
    
    // 縣 的 get 路由
    app.get("/county", async (request, response)=>{
        try{
            const {province, city} = request.query;
            const county = await citiesModel.find({province, city, "level": 3}, {"county": 1, "name": 1, "_id": 0});
            response.json({code: 200, data: county});
        }catch(err){
            console.log(err);
            response.json({code: 404, data: '網絡不穩定，請刷新重試'});
        };
    });
})().catch(err=>console.log(err));

/**************** 端口號 3000, 啓動服務器 ***************/
app.listen(3000, err=>console.log(err?err:'\n\n服務器已啓動: http://localhost:3000\n\t\tHunting Happy!'));
  • 瀏覽器前端 index.html
  • <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>三級聯動-省-市-縣</title>
        <link rel="stylesheet" href="./css/index.css">
    </head>
    
    <body>
        <div id="outer_box">
            <select id="province">
                <option>請選擇省份</option>
            </select>省
        
            <select id="city">
                <option>請選擇市</option>
            </select>市
        
            <select id="county">
                <option>請選擇區(縣)</option>
            </select>區(縣)
        </div>
        
        
        
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
        <script type="text/javascript" src="./js/jquery_ajax.js"></script>
    </body>
</html>

index.css

  • html, body {
    width: 100%;
    height: 100%;
    
    color: #000;
    background: #b9c2a4;
    background-size: cover; /* 指定背景圖片大小 */
}

/*************************************************/
#outer_box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#outer_box select {
    width: 152px;
    font-size: 16px;
    background-color: #aec57e;
    cursor: pointer;
}
  • 選擇省份

爲了不重排 重繪，使用拼串，最後一次追加

  • 選擇市

監聽 表單的 change 事件

  • 選擇縣
  • jquery_ajax.js
  • $(function () {
    const $province = $("#province");
    const $city = $("#city");
    const $county = $("#county");
    
    // 進入頁面 首先渲染省份
    $.get("http://localhost:3000/province", function({code, data}){
        if(code === 200){
            let htmlStr = '<option>請選擇省份</option>';
            data.forEach(each=>{
                /* <option value="44">廣東省</option> */
                htmlStr += `<option value="${each.province}">${each.name}</option>`;
            });
            $province.html(htmlStr);
        }else{
            alert(data);    // 網絡不穩定，請刷新重試
        };
    });
    
    // 省 改變出現 市
    $province.on("change", function(){
        const province = this.value;    /* <option value="11">北京</option> */
        $.get('/city', {province}, function({code, data}){
            if(code === 200){
                let htmlStr = '<option>請選擇市</option>';
                data.forEach(each=>{
                    /* <option value="03">深圳市</option> */
                    htmlStr += `<option value="${each.city}">${each.name}</option>`;
                });
                $city.html(htmlStr);
            }else{
                alert(data);    // 網絡不穩定，請刷新重試
            };
        });
    });
    
    // 市 改變出現 縣
    $city.on("change", function(){
        const province = $province.val();    /* <option value="11">北京</option> */
        const city = $city.val();    /* <option value="undefined">鞍山市</option> */
        console.log({province, city});
        $.get('/county', {province, city}, function({code, data}){
            if(code === 200){
                let htmlStr = '<option>請選擇市</option>';
                data.forEach(each=>{
                    /* <option value="06">寶安區</option> */
                    htmlStr += `<option value="${each.county}">${each.name}</option>`;
                });
                $county.html(htmlStr);
            }else{
                alert(data);    // 網絡不穩定，請刷新重試
            };
        });
    });
});

在 jQuery 中 $.get("http://localhost:3000/city", function({code, data}){}); 對於同一域名，能夠簡寫爲

  • $.get("/city", function({code, data}){});

1. 引入 第三方 js庫 art-template

<script type="text/javascript" src="./js/template-web.js"></script>

2. 新建 <script> 標籤，並設置 id 以供渲染

3. 

源碼由上方代碼改變

  • index.html
  • <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>jQuery 中的 ajax</title>
        <link rel="stylesheet" href="./css/index.css">
    </head>
    
    <body>
        <div id="outer_box">
            <select id="province">
                <option>請選擇省份</option>
            </select>省
        
            <select id="city">
                <option>請選擇市</option>
            </select>市
        
            <select id="county">
                <option>請選擇區(縣)</option>
            </select>區(縣)
        </div>
    
        <script type="text/html" id="templateScript"> <option>{{firstOption}}</option> {{each data}} <option value="{{$value[name]}}">{{$value.name}}</option> {{/each}} </script>
        
        
        
        
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
        <script type="text/javascript" src="./js/template-web.js"></script>
        <script type="text/javascript" src="./js/jquery_ajax.js"></script> <!-- 注意編寫順序 -->
    </body>
</html>
  • jquery_ajax.js
  • $(function () {
    const $province = $("#province");
    const $city = $("#city");
    const $county = $("#county");
    
    // 進入頁面 首先渲染省份
    $.get("http://localhost:3000/province", function({code, data}){
        if(code === 200){
            const htmlStr = template( 'templateScript', {data, firstOption: '請選擇省份', name: 'province'} );
            $province.html(htmlStr);
        }else{
            alert(data);    // 網絡不穩定，請刷新重試
        };
    });
    
    // 省 改變出現 市
    $province.on("change", function(){
        const province = this.value;    /* <option value="11">北京</option> */
        $.get('/city', {province}, function({code, data}){
            if(code === 200){
                const htmlStr = template( 'templateScript', {data, firstOption: '請選擇市', name: 'city'} );
                $city.html(htmlStr);
            }else{
                alert(data);    // 網絡不穩定，請刷新重試
            };
        });
    });
    
    // 市 改變出現 縣
    $city.on("change", function(){
        const province = $province.val();    /* <option value="11">北京</option> */
        const city = $city.val();    /* <option value="undefined">鞍山市</option> */
        $.get('/county', {province, city}, function({code, data}){
            if(code === 200){
                const htmlStr = template( 'templateScript', {data, firstOption: '請選擇區縣', name: 'county'} );
                $county.html(htmlStr);
            }else{
                alert(data);    // 網絡不穩定，請刷新重試
            };
        });
    });
});
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程