Ajax介紹

Ajax最早產生于2005年，Ajax表示Asynchronous JavaScript and XML(異步JavaScript和XML)编饺，但是它不是像HTML乖篷、JavaScript或CSS這樣的一種“正式的”技術，它是表示一些技術的混合交互的一個術語（JavaScript透且、Web瀏覽器和Web服務器）撕蔼，它使我們可以獲取和顯示新的內容而不必載入一個新的Web頁面豁鲤。增強用戶體驗，更有桌面程序的感覺鲸沮。

服務器環(huán)境配置

安裝mamp（ mac apache mysql php ） 用于模擬服務器環(huán)境

• mac 操作系統(tǒng) / win
• Apache 提供靜態(tài)資源服務（html頁面琳骡、js文件、css文件讼溺、圖片楣号。。怒坯。）
• MySQL 數據庫
• php 編程語言炫狱，可以用來開發(fā)網站

靜態(tài)網站

• 靜態(tài)網頁，通常是指純粹用HTML格式的網頁剔猿，他的文件擴展名為.htm视译、html、shtml等
• 靜態(tài)網頁的“靜態(tài)”是指靜態(tài)網頁一經制成艳馒，內容就不會再變化憎亚，是一次性寫好放在服務器上進行瀏覽的，如果想改動弄慰，必須在頁面上修改第美，然后再上傳服務器覆蓋原來的頁面

動態(tài)網站

• 動態(tài)網頁的代碼即使不改變，頁面顯示的內容卻是可以隨著時間陆爽、環(huán)境或者數據庫操作的結果而發(fā)生變化什往。動態(tài)網頁能與后臺數據庫進行交互、數據傳遞慌闭。文件擴展名以.aspx别威、.asp、.jsp驴剔、.php等形式為后綴;

Ajax 原生 Api 使用

使用Ajax發(fā)送請求需要如下幾步

1. 創(chuàng)建一個 XMLHttpRequest 請求對象
   • var httpRequest = new XMLHttpRequest();
2. 準備發(fā)送
   • httpRequest.open('get', './php/01check.php?username=' + username + '&password=' + pwd, true)
3. 發(fā)送請求
   • httpRequest.send(null);
4. 指定回調函數
   • httpRequest.onreadystatechange = function () {}

$('#btn').click(function () {
     var username = $('#username').val();
     var pwd = $('#password').val();

    // 使用Ajax發(fā)送請求需要如下幾步：
     // 1.創(chuàng)建一個 XMLHttpRequest 請求對象,原生 ajex
    var httpRequest = new XMLHttpRequest();

    // 2.準備發(fā)送
    // 參數1: 請求方式
    // 參數2: 請求 url
    // 參數3: 是否異步
httpRequest.open('get', './php/01check.php?username=' + username + '&password=' + pwd, true)

// 3.發(fā)送請求
httpRequest.send(null);

// 4.指定回調函數
httpRequest.onreadystatechange = function () {

if (httpRequest.readyState == 4) {
    if (httpRequest.status = 200) {
        var data = httpRequest.responseText;
        console.log(data);

        var info = document.getElementById('info');
        if (data == '1') {
            info.innerHTML = '登錄成功';
        } else if (data == '2') {
            info.innerHTML = '用戶名或者密碼錯誤';
        }
    }
}
};
});

json轉 模型對象

在回調函數獲取的json 字符串,可以通過 JSON.parse(data),轉為模型對象

// 獲取回調數據
var data = httpRequest.responseText;    
// 數據轉對象模型
var model = JSON.parse(data);

使用返回數據創(chuàng)建 節(jié)點,并添加到 頁面指定位置

// 創(chuàng)建模板
var tag = '<div><span>'+ model.info + '</span><span>' + model.message + '</span></div>';
document.getElementById('info').innerHTML = tag;

使用 jQuery Ajax 請求

// 使用jQuery Ajax
$(function () {
    $('#btn').click(function () {
    
    var code = $('#code').val();
        $.ajax({
            type: 'post',
            url: './php/11.php',
            data: {
                code: code
                },
            dataType: 'json', //xml json text html script jsonp
            success: function (data) {
                var info = $('#info');
                if (data.flag == 0) {
                info.innerHTML = '沒有這本書';
            } else {
                var tag = '<ul><li>書名：' + data.bookname + '</li><li>作者：' + data
                    .author + '</li><li>描述：' + data.desc + '</li></ul>';
                info.innerHTML = tag;
            }
            },
             error: function (data) {
                        console.dir(data);
                        $("#info").html("服務器發(fā)生錯誤省古，請與管理員聯系");
                    }
     });
});
});

Ajax跨域

• 同源策略是瀏覽器的一種安全策略，所謂同源指的是請求URL地址中的協議丧失、域名和端口都相同豺妓，只要其中之一不相同就是跨域
• 同源策略主要為了保證瀏覽器的安全性
• 在同源策略下，瀏覽器不允許Ajax跨域獲取服務器數據

image.png

跨域解決方案

• jsonp
• document.domain+iframe
• location.hash + iframe
• window.name + iframe
• window.postMessage
• flash等第三方插件

JSONP原理

• 靜態(tài)script標簽的src屬性進行跨域請求
• 動態(tài)創(chuàng)建script標簽布讹，通過標簽的src屬性發(fā)送請求

jQuery對jsonp的支持

• jQuery基本使用（$.ajax）
  1. 屬性jsonp
  2. 屬性jsonpCallback

模板引擎

• 為何會有模板引擎
• 模板+數據->靜態(tài)頁面片段
• 流行的模板引擎

image.png

模板引擎artTemplate

https://github.com/aui/artTemplate
https://aui.github.io/art-template/zh-cn/docs/