http服務&ajax編程

時間 2019-11-17

標籤 http 服務 ajax 編程欄目 HTTP/TCP 简体版

原文原文鏈接

http服務&ajax編程

一、服務器

前言：通俗的講，可以提供某種服務的機器（計算機）稱爲服務器javascript

1.一、服務器類型

按照不一樣的劃分標準，服務可劃分爲如下類型：php

按服務類型可分爲：文件服務器、數據庫服務器、郵件服務器、Web服務器等；
按操做系統可分爲：Linux服務器、Windows服務器等；
按應用軟件可分爲 Apache服務器、Nginx 服務器、IIS服務器、Tomcat服務器、
weblogic服務器、WebSphere服務器、boss服務器、 Node服務器等；

1.二、服務器軟件

使計算機具有提供某種服務能力的應用軟件，稱爲服務器軟件，
經過安裝相應的服務軟件，而後進行配置後就可使計算具有了提供某種服務的能力。html

常見的服務器軟件有：前端

文件服務器：Server-U、FileZilla、VsFTP等（FTP是File Transfer Protocol文件傳輸協議）；
數據庫服務器：oracle、mysql、SQL server、DB二、ACCESS等；
郵件服務器：Postfix、Sendmail等；
HTTP服務器：Apache、Nginx、IIS、Tomcat、NodeJS等；

1.三、HTTP服務器

即網站服務器，主要提供文檔(文本、圖片、視頻、音頻)瀏覽服務，通常安裝Apache、Nginx服務器軟件。java

HTTP服務器能夠結合某一編程語言處理業務邏輯，由此進行的開發，一般稱之爲服務端開發。mysql

常見的運行在服務端的編程語言包括 php、java、.net、Python、Ruby、Perl等。jquery

二、客戶端

具備向服務器索取服務能力的終端，如好比手機、電腦等，經過安裝不一樣的客戶端軟件，
能夠獲取不一樣的服務，好比經過QQ得到即時通信服務、經過迅雷得到下載服務等。linux

常見的客戶端軟件：瀏覽器、QQ、迅雷、Foxmail等。git

以瀏覽器爲宿主環境，結合 HTML、CSS、Javascript等技術，而進行的一系列開發，一般稱之爲前端開發。github

三、網絡基礎

3.1 IP地址

所謂IP地址就是給每一個鏈接在互聯網上的主機分配的一個32位地址。(就像每部手機能正常通話須要一個號碼同樣)

查看本機IP地址 ping、ipconfig、ifconfig（linux）

3.二、域名

因爲IP地址基於數字，不方便記憶，因而便用域名來代替IP地址，域名是一個IP地址的「面具」

查看域名對應的IP地址 ping

3.三、DNS服務

DNS（Domain Name System）因特網上做爲域名和IP地址相互映射的一個分佈式數據庫，
可以使用戶更方便的訪問互聯網，而不用去記住可以被機器直接讀取的IP數串。

簡單的說就是記錄IP地址和域名之間對應關係的服務。

查找優先級本機hosts文件、DNS服務器

ipconfig /flushdns 刷新DNS

3.四、端口

端口號是計算機與外界通信交流的出口，每一個端口對應不一樣的服務。

現實生活中，銀行不一樣的窗口辦理不一樣的業務。

查看端口占用狀況 netstat -an

常見端口號 80、8080、330六、2一、22

四、軟件架構

4.一、C/S結構

即Client、Server

C/S工做流程圖

在C/S結構的狀況下，不一樣的服務須要安裝不一樣的客戶端軟件，

好比QQ、迅雷、Foxmail這種狀況下安裝的軟件會愈來愈多，同時也有許多弊端，

好比A出差，須要在B電腦上查收郵件，可是B電腦並未安裝Foxmail等相似的客戶端軟件，

這樣不得不先去下載Foxmail，很是不方便。

4.二、B/S結構

B/S（即Broswer、Server）解決了C/S所帶來的不便，

將全部的服務均可以經過瀏覽器來完成（由於基本全部瀏覽器都安裝了瀏覽器），

但B/S也有一些不利，好比操做穩定性、流暢度等方面相對較弱。

五、搭建HTTP服務

Windows + Apache + Mysql + PHP，首字母組合。

5.1 安裝WampServer

安裝wampserver，和普通軟件安裝無差異，除指定安裝路徑外，其它默認安裝。

5.2 管理HTTP服務

任務圖標綠色爲正常啓動狀態
經過圖形控制檯能夠啓動、重啓、中止全部服務

或者單獨啓動、重啓、中止特定服務

注意事項：
一、檢查網絡是否是通的 ping 對方IP
二、檢查防火牆是否開啓，若是開啓將不能正常被訪問
三、檢查訪問權限 Allow from all
四、理解默認索引
五、確保端口沒有被其它程序佔用
六、「#」表示註釋
七、修改配置要格外當心，禁止無心修改其它內容

5.3 配置根目錄

網站根目錄是Web服務器上存放網站程序的空間，可經過修改配置文件自定義，如E:/www

具體步驟以下：
一、打開配置文件，控制檯選擇

或者 wampserver安裝目錄下bin\apache\Apache2.2.21\conf\httpd.conf

二、設定根目錄，查找並修改

例如：

這樣就指定了 "E:/www/"爲存放網站的根目錄。

三、配置根目錄，查找

修改爲

四、修改完後，並不能當即生效，須要 重啓Apache
注：能夠指定任意目錄爲根目錄

5.4 網站部署

將咱們製做好的網頁拷貝到配置好的根目錄下，瀏覽器訪問127.0.0.1便可。

5.5配置虛擬主機

在一臺Web服務器上，咱們能夠經過配置虛擬主機，而後分別設定根目錄，實現對多個網站的管理。

具體步驟以下：

一、開啓虛擬主機輔配置，在httpd.conf 中找到

去掉前面的#號註釋，開啓虛擬主機配置

二、配置虛擬主機，打開conf/extra/httpd-vhosts.conf

分別修改如下三項

DocumentRoot "E:/www/example"
ServerName "example.com "
ServerAlias "www.example.com"

其它項無需指定。

三、修改DNS（hosts）文件
打開C:\Windows\System32\drivers\etc\hosts
目錄是固定的

注：修改hosts文件權限

四、重啓Apache

五、瀏覽器訪問www.example.com

六、PHP基礎

文件以.php後綴結尾，全部程序包含在<?php ** 這裏是代碼 ** ?>
避免使用中文目錄和中文文件名
php頁面沒法直接打開須要運行在服務器環境當中

6.一、最簡單的php程序

<?php
    // 用來指定編碼集
    header('Content-Type:text/html; charset=utf-8');
    /*這是一個最簡單的php程序*/
    echo 'hello world!';
?>

6.三、變量

一、變量以$開頭字母/數字/下劃線不能以數字開頭
二、大小寫敏感（區分大小寫）

// 聲明一個變量$a並賦值爲10
    $a = 10;
    // 輸出一個變量$a
    echo $a;
    // 聲明一個變量$b並賦值爲10
    $b = 10;
    // 輸出一個變量$b
    echo $b;
    
    // 輸出順序是自上向下的
    // 至關於 js dcoument.write()

6.三、數據類型

字符型

$str = 'hello world!';

整型

$num = 10;

浮點型

$float = 10.5;

布爾型

$bool = true;

數組

// Javascript 數組定義方式 var arr = [1, 2, 3]
    // arr[0]、arr[1]、arr[1]
    
    // PHP 是這樣定義數組的
    // 這種方式叫作**索引數組**
    $arr = array(1, 2, 3);  
    
    // echo $arr[0];
    // echo $arr[2];
    
    // 定義方式和Javascript有區別，可是訪問方式是同樣的

// var obj = {name: itcast, age: 10}
    
    // PHP另外一種定定數組的方式，所表達的意義和Javascript同樣，
    // 只是語法格式不同
    // 這種方式叫作**關聯數組**
    $arr1 = array('name'=>'itcast', 'age'=>10);

    // echo $arr1['name'];
    // echo $arr1['age'];

對象

// Javascript var obj = {name: itcast, age: 10}
    // PHP須要先建立一個類，下面就是建立過程
    class Person {
        public $name = 'itcast';

        public $age = 10;
    }

    $person = new Person;

    // PHP訪問一個對象屬性的語法是不同的
    echo $person->name;

    // obj['name']; obj.name 不行

NULL

//PHP中一種特殊的數據類型，表示空值，即表示沒有爲該變量設置任何值null(空值)不區分大小寫，null和NULL是同樣的。

單引號&雙引號區別： 單引號內部的變量不會執行雙引號會執行

$name = '小明';

    echo 'name is $name';//輸出 name is $name
    echo '<br>';
    echo "name is $name";//輸出 name is 小明

索引數組、關聯數組（瞭解便可）

6.四、運算符&內容輸出

基本與Javascript語法一致  
. 號表示字符串拼接符，Javascript中爲+號

echo：輸出簡單數據類型，如字符串、數值

/**
    * 鏈接符
    * Javascript中用+號表示鏈接符
    * PHP中使用.點號
    */
    
    $hello = 'hello';
    
    $world = 'world!';
    
    // PHP鏈接符用.號
    echo $hello . ' ' .$world;

print_r()：輸出複雜數據類型，如數組

$arr = array('itcast', '今年', '10歲了');
    
    // 只能輸出簡單類型
    echo $arr;

    // 能夠打印數組，可是輸出的是一個數組的結構
    print_r($arr);

var_dump()：輸出詳細信息，如對象、數組（瞭解）

$arr = array('itcast', '今年', '10歲了');
    
    // 只能輸出簡單類型
    echo $arr;

    // 輸出詳細信息
    var_dump($arr);
    
    $hello = 'hello';
    // 輸出詳細信息
    var_dump($hello);

6.五、函數

基本與Javascript基本一致

函數名對大小寫不敏感
默認參數（瞭解便可）

// 一、PHP中函數不能夠省略參數
    // 二、PHP能夠設置默認參數
    
    function sayHello($name='web developer') {
        echo $name . '你好!';
    }

    sayHello();

6.六、分支，循環語句

/**
     * 分支控制語句、循環語句
     * 與Javascript同樣
     * foreach 數組遍歷函數，相似Javascript中的 for in
     */
     $name = 'itcast1';
 
     if($name == 'itcast') {
        echo '我已經在' . $name . '學習';
     } else {
        echo '我尚未學習過編程';
     }

/**
     * 分支控制語句、循環語句
     * 與Javascript同樣
     * foreach 數組遍歷函數，相似Javascript中的 for in
     */
    // 索引數組
    $arr = array('itcast', '今年', '10歲了');
     
    // PHP函數，計算數組的長度
    $length = count($arr);
 
    // echo $length;
 
    // 和Javascript是同樣的
    // for($i=0; $i<$length; $i++) {
    //  echo $arr[$i];
    // }
 
    foreach($arr as $k=>$v) {
        echo $k . '~~~' . $v;
    };
 
    // 關聯數組
    $arr1 = array('name'=>'itcast', 'age'=>'10');
 
    // 驗證關聯數組不能夠按索引下標來訪問
    // echo $arr1[0];
 
     //PHP遍歷一個關聯數組
     foreach($arr1 as $key=>$val) {
        echo $key . '~~~' . $val;
     }
     
     // 實際開發都是用foreach來遍歷數組的

6.七、表單處理

表單name屬性的是用來提供給服務端接收所傳遞數據而設置的

表單action屬性設置接收數據的處理程序

表單method屬性設置發送數據的方式

當上傳文件是須要設置 enctype="multipart/form-data"，且只能post方式

$_GET接收 get 傳值

$_POST接收 post 傳值

$_FILES接收文件上傳

move_uploaded_file($_FILES['image']['tmp_name'], 'test.jpg');

<form action="login.php" method="post">
    <div class="row">
        <label>用戶：</label><input type="text" name="username"/>
    </div>
    <div class="row">
        <label>密碼：</label><input type="password" name="password"/>
    </div>
    <div class="row">
        <input type="submit" value="登陸"/>
    </div>
</form>
<form action="login.php" method="post" enctype="multipart/form-data">
    <div class="row">
        <label>圖片：</label><input type="file" name="image"/>
    </div>
    <div class="row">
        <input type="submit" value="上傳"/>
    </div>
</form>

6.八、文件導入&&經常使用php函數

include '07.form.html';

    require '07.form.php'

$array = array(
        'username'=>'itcast',
        'password'=>'123456'
    );

    echo '獲取數組的長度：'.count($array);
    echo '<br>';
    echo '判斷是否在數組中：'.in_array('itcast',$array);
    echo '<br>';
    echo '檢測數組中是否存在key：'.array_key_exists('username',$array);
    echo '<br>';

6.九、應用實例

一、用戶登陸

<form action="login.php" method="post">
        <div class="row">
            <label>用戶：</label><input type="text" name="username"/>
        </div>
        <div class="row">
            <label>密碼：</label><input type="password" name="password"/>
        </div>
        <div class="row">
            <input type="submit" value="登陸"/>
        </div>
    </form>

<?php
    header('Content-Type:text/html; charset=utf-8');

    /*數據庫當中的數據*/
    $userInfo = array(
        'username'=>'itcast',
        'password'=>'123456'
    );

    /*拿到提交過來的數據*/
    $username = $_POST['username'];
    $password = $_POST['password'];

    /*去匹配數據庫當中的數據*/
    if($userInfo['username'] == $username && $userInfo['password'] == $password){
        header('refresh:0;url=jdMsite/');
    }else{
        header('refresh:0;url=login.html');
    }
?>

二、動態網站

京東首頁

<?php
        header('Content-Type:text/html; charset=utf-8');
    
        $product_list = array(
            array(
            'imgUrl'=>'images/detail01.jpg',
            'newPrice'=>'15.00',
            'oldPrice'=>'19.00'
            ),
            array(
            'imgUrl'=>'images/detail02.jpg',
            'newPrice'=>'133.00',
            'oldPrice'=>'234.00'
            ),
            array(
            'imgUrl'=>'images/detail01.jpg',
            'newPrice'=>'340.00',
            'oldPrice'=>'1432.00'
            )
        );
    
        include 'index.html';
    ?>

<!--掌上秒殺的內容是會更新的並且是後臺更新-->
    <ul class="sk_product">
        <?php foreach($product_list as $key => $val){ ?>
            <li>
                <a href="#"><img src="<?php echo $val['imgUrl'] ?>" alt=""/></a>
                <p class="new_price">&yen;<?php echo $val['newPrice'] ?></p>
                <p class="old_price">&yen;<?php echo $val['oldPrice'] ?></p>
            </li>
        <?php } ?>
    </ul>

京東分類

<?php
    header('Content-Type:text/html; charset=utf-8');

    $category = array(
        '熱門推薦',
        '潮流女裝',
        '品牌男裝',
        '內衣配飾',
        '家用電器',
        '電腦辦公',
        '手機數碼',
        '母嬰頻道',
        '圖書',
        '家居家紡',
        '居家生活',
        '傢俱建材',
        '熱門推薦',
        '潮流女裝',
        '品牌男裝',
        '內衣配飾',
        '家用電器',
        '電腦辦公',
        '手機數碼',
        '母嬰頻道',
        '居家生活',
        '手機數碼',
        '母嬰頻道',
        '圖書',
        '家居家紡',
        '居家生活',
        '潮流女裝',
        '傢俱建材',
        '熱門推薦',
        '潮流女裝',
    );

    //echo count($category);

    include 'category.html';
?>

<!--左側分類-->
    <div class="jd_cate_left">
        <ul>
            <?php foreach($category as $key=>$val){ ?>
                <li class="<?php echo $key==1?'now':'' ?>"><a href="javascript:;"><?php echo $val ?></a></li>
            <?php } ?>
        </ul>
    </div>

七、網絡傳輸協議

7.一、常見協議

一、HTTP、HTTPS 超文本傳輸協議

二、FTP 文件傳輸協議

三、SMTP 簡單郵件傳輸協議

7.二、http協議

超文本傳輸協議（HTTP，HyperText Transfer Protocol) 網站是基於HTTP協議的，
例如網站的圖片、CSS、JS等都是基於HTTP協議進行傳輸的。

HTML Hypertext Markup Language

HTTP協議是由從客戶機到服務器的請求(Request)和從服務器到客戶機的響應(Response)進行了約束和規範。

即HTTP協議主要由請求和響應構成。

經常使用請求方法 POST、GET、PUT、DELETE

咱們經過瀏覽器插件 FireFox httpFox 調試。ctrl shift f2 調用

7.2.一、請求和請求報文

請求由客戶端發起，其規範格式爲：請求行、請求頭、請求主體。

一、請求行

由請求方式、請求URL和協議版本構成

GET /day01/code/login.php?username=123&password=123 HTTP/1.1

POST /day01/code/login.php HTTP/1.1

二、請求頭

Host：localhost請求的主機

Cache-Control：max-age=0控制緩存

Accept：/ 接受的文檔MIME類型

User-Agent：很重要

Referer：從哪一個URL跳轉過來的

Accept-Encoding：可接受的壓縮格式

If-None-Match：記錄服務器響應的ETag值，用於控制緩存

此值是由服務器自動生成的

If-Modified-Since：記錄服務器響應的Last-Modified值

此值是由服務器自動生成的

三、請求主體

即傳遞給服務端的數據

注：當以post形式提交表單的時候，請求頭裏會設置

Content-Type: application/x-www-form-urlencoded，以get形式當不須要

7.2.二、響應和響應報文

響應由服務器發出，其規範格式爲：狀態行、響應頭、響應主體。

一、狀態行

由協議版本號、狀態碼和狀態信息構成
HTTP/1.1 200 OK

二、響應頭

Date：響應時間

Server：服務器信息

Last-Modified：資源最後修改時間由服務器自動生成

ETag：資源修改後生成的惟一標識

由服務器自動生成

Content-Length：響應主體長度

Content-Type：響應資源的類型

三、響應主體

即服務端返回給客戶端的內容；

狀態碼

常見的有200表明成功、304文檔未修改、403沒有權限、404未找到、500服務器錯誤

八、AJAX編程

即 Asynchronous [e'sɪŋkrənəs] Javascript And XML，
AJAX 不是一門的新的語言，而是對現有技術的綜合利用。
本質是在HTTP協議的基礎上以異步的方式與服務器進行通訊。

8.一、異步

指某段程序執行時不會阻塞其它程序執行，其表現形式爲程序的執行順序不依賴程序自己的書寫順序，相反則爲同步。

其優點在於不阻塞程序的執行，從而提高總體執行效率。

XMLHttpRequest能夠以異步方式的處理程序。

8.二、 XMLHttpRequest

瀏覽器內建對象，用於在後臺與服務器通訊(交換數據) ，
由此咱們即可實現對網頁的部分更新，而不是刷新整個頁面。

/*js 內置的 http 請求對象  XMLHttpRequest*/

    /*1.怎麼使用 這個內置對象*/
    var xhr = new XMLHttpRequest;

    /*2.怎麼樣去組請求*/
    /*請求的行*/
    xhr.open('post','01.php');

    /*請求頭*/
    //get  沒有必要設置
    //post 必須設置 Content-Type: application/x-www-form-urlencoded
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

    /*請內容*/
    /*3.發送請求*/
    xhr.send("name=xjj&age=10");

8.2.一、請求

HTTP請求3個組成部分與XMLHttpRequest方法的對應關係

一、請求行

xhr.open('post','01.php');

二、請求頭

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
get請求能夠不設置

三、請求主體

xhr.send("name=xjj&age=10");
get能夠傳空

注意書寫順序

8.2.二、響應

HTTP響應是由服務端發出的，做爲客戶端更應關心的是響應的結果。

HTTP響應3個組成部分與XMLHttpRequest方法或屬性的對應關係。

因爲服務器作出響應須要時間（好比網速慢等緣由），因此咱們須要監聽服務器響應的狀態，而後才能進行處理。

if(xhr.readyState == 4 && xhr.status == 200){
        console.log('ok');
        console.log(xhr.responseText);
        /*把內容渲染在頁面當中*/
        document.querySelector('#result').innerHTML = xhr.responseText;
    }

**readyState**
0：請求未初始化（尚未調用 open()）。  
1：請求已經創建，可是尚未發送（尚未調用 send()）。  
2：請求已發送，正在處理中（一般如今能夠從響應中獲取內容頭）。  
3：請求在處理中；一般響應中已有部分數據可用了，可是服務器尚未完成響應的生成。  
4：響應已完成；您能夠獲取並使用服務器的響應了。

onreadystatechange是Javascript的事件的一種，其意義在於監聽XMLHttpRequest的狀態

一、獲取狀態行（包括狀態碼&狀態信息）

xhr.status 狀態碼

xhr.statusText 狀態碼信息

二、獲取響應頭

xhr.getResponseHeader('Content-Type');
xhr.getAllResponseHeaders();

三、響應主體

xhr.responseText
xhr.responseXML

咱們須要檢測並判斷響應頭的MIME類型後肯定使用request.responseText或者request.responseXML

8.3.三、API詳解

xhr.open() 發起請求，能夠是get、post方式
xhr.setRequestHeader() 設置請求頭
xhr.send() 發送請求主體get方式使用xhr.send(null)
xhr.onreadystatechange = function () {} 監聽響應狀態
xhr.status表示響應碼，如200
xhr.statusText表示響應信息，如OK
xhr.getAllResponseHeaders() 獲取所有響應頭信息
xhr.getResponseHeader('key') 獲取指定頭信息
xhr.responseText、xhr.responseXML都表示響應主體

注：GET和POST請求方式的差別（面試題）

一、GET沒有請求主體，使用xhr.send(null)

二、GET能夠經過在請求URL上添加請求參數

三、POST能夠經過xhr.send('name=itcast&age=10')

四、POST須要設置

五、GET效率更好（應用多）

六、GET大小限制約4K，POST則沒有限制

問題？如何獲取複雜數據呢？

8.三、 XML

一、必須有一個根元素
二、不可有空格、不能夠數字或.開頭、大小寫敏感
三、不可交叉嵌套
四、屬性雙引號（瀏覽器自動修正成雙引號了）
五、特殊符號要使用實體
六、註釋和HTML同樣
雖然能夠描述和傳輸複雜數據，可是其解析過於複雜而且體積較大，因此實現開發已經不多使用了。

<?xml version="1.0" encoding="UTF-8"?>
<root>
    <arrayList>
        <array>
            <src>images/banner.jpg</src>
            <newPirce>12.00</newPirce>
            <oldPrice>30.00</oldPrice>
        </array>
        <array>
            <src>images/banner.jpg</src>
            <newPirce>12.00</newPirce>
            <oldPrice>30.00</oldPrice>
        </array>
    </arrayList>
</root>

<?php 
    header('Content-Type:text/xml;charset=utf-8');
    /*以xml格式傳輸數據的時候要求響應內容格式是   text/xml*/

    /*file_get_contents 獲取文件內容*/
    $xml = file_get_contents('01.xml');

    /*輸出xml內容*/
    echo $xml;
?>

var xhr = new XMLHttpRequest;
xhr.open('get','01.php');
xhr.send(null);
xhr.onreadystatechange = function(){
    if(xhr.status == 200 && xhr.readyState == 4){
        /*獲取到XML格式內容  放回的是DOM對象  document*/
        var xml = xhr.responseXML;
        /*經過選着器能夠獲取到xml的數據*/
        console.log(xml.querySelectorAll('array')[0].querySelector('src').innerHTML);
    }
}

8.四、 JSON

即 JavaScript Object Notation，另外一種輕量級的文本數據交換格式，獨立於語言。

一、數據在名稱/值對中
二、數據由逗號分隔(最後一個健/值對不能帶逗號)
三、花括號保存對象方括號保存數組
四、使用雙引號

[
  {"src":"images/detail01.jpg","oldPrice":"10.12","newPrice":"130.00"},
  {"src":"images/detail02.jpg","oldPrice":"1.00","newPrice":"11.00"},
  {"src":"images/detail03.jpg","oldPrice":"100.00","newPrice":"1000.00"}
]

JSON數據在不一樣語言進行傳輸時，類型爲字符串，不一樣的語言各自也都對應有解析方法，須要解析完成後才能讀取

一、PHP解析方法
json_encode()、json_decode()

<?php 
    header('Content-Type:text/html;charset=utf-8');
    /*以json格式傳輸數據的時候要求響應內容格式是   application/json*/
    /*注意也能夠不設置  可是這遵循的一個規範*/

    /*file_get_contents 獲取文件內容*/
    $json = file_get_contents('01.json');

    /*輸出json內容*/
    echo $json;
    echo '<br><br>';

    $array = array(
        array('src'=>'images/detail01.jpg','newPrice'=>'12.00','oldPrice'=>'455.00'),
        array('src'=>'images/detail02.jpg','newPrice'=>'65.00','oldPrice'=>'878.00'),
        array( 'src'=>'images/detail01.jpg','newPrice'=>'100.00','oldPrice'=>'1000.00')
    );

    /*將php數組轉化成json字符*/
    $json_array = json_encode($array);
    echo $json_array;
    echo '<br><br>';

    /*將json字符轉化成php數組*/
    $array_json = json_decode($json_array);
    echo $array_json;
    echo '<br><br>';
?>

一、Javascript 解析方法
JSON對象 JSON.parse()、JSON.stringify()；
JSON兼容處理json2.js
總結：JSON體積小、解析方便且高效，在實際開發成爲首選。

var xhr = new XMLHttpRequest;
    xhr.open('get','01.php');
    xhr.send(null);
    xhr.onreadystatechange = function(){
        if(xhr.status == 200 && xhr.readyState == 4){
            /*獲取僅僅是字符串*/
            var text = xhr.responseText;
            
            /*須要把字符串轉化成JSON對象*/
            var json_obj = JSON.parse(text);
            console.log(json_obj);
    
            /*咱們也能夠把JSON對象轉化成字符串*/
            var json_str = JSON.stringify(json_obj);
            console.log(json_str);
        }
    }

8.五、兼容性

關於IE的兼容方面，瞭解便可。

function XHR() {
        var xhr;
        try {
            xhr = new XMLHttpRequest();
        }
        /*若是 try內的程序運行錯誤  拋出異常  捕捉異常  上面程序當中運行的錯誤*/
        catch(e) {
            /*在不一樣的IE版本下初始  ActiveXObject  須要傳入的標識*/
            var IEXHRVers =["Msxml3.XMLHTTP","Msxml2.XMLHTTP","Microsoft.XMLHTTP"];

            for (var i=0;i<IEXHRVers.length;i++) {
                try {
                    xhr = new ActiveXObject(IEXHRVers[i]);
                }
                catch(e) {
                    /*若是出現錯誤的時候  中止當次的循環*/
                    continue;
                }
            }
        }
        return xhr;
    }

8.六、封裝ajax工具函數

/**
 * ITCAST WEB
 * Created by zhousg on 2016/7/24.
 */
/*封裝一個ajax工具函數*/
window.$ = {};
/*經過$定義一個ajax函數*/

/*
* 1. type   string   請求的方式  默認是get
* 2. url    string   請求地址  接口地址
* 3. async  boolean  默認的是true
* 4. data   object   {}請求數據
*
* 5.success function  成功回調函數
* 6.error   function  失敗的回調函數
* */
$.ajax = function(options){

    if(!options) return false;

    /*options 參數傳遞*/
    var type = options.type || 'get';
    var url = options.url || location.pathname;
    var async = options.async === false ? false : true;
    var data = options.data || {};

    /*data 選要轉化成  name=xjj&age=10*/
    var dataStr = '';
    for(var key in data){
        //console.log(data[key]);
        dataStr += key+'='+data[key]+'&';
    }

    /*若是就數據  就裁剪掉最後一個&*/
    dataStr = dataStr && dataStr.slice(0,-1);


    /*ajax 編程*/
    /*初始化*/
    var xhr = new XMLHttpRequest();

    /*請求行*/
    /*若是是get請求那麼就要拼接數據在url後面 ？*/
    xhr.open(type,type == 'get'?url+'?'+dataStr:url,async);

    /*請求頭*/
    /*若是是post請求須要設置 content-type application/x-www-form-urlencoded*/
    if(type == 'post'){
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    }

    options.beforeSend && options.beforeSend();

    /*請求主體*/
    /*若是是post請求須要把數據字符傳過去  不然是null*/
    xhr.send(type=='get'?null:dataStr);

    /*監聽響應狀態的改變*/
    xhr.onreadystatechange = function(){
        /*響應成功*/
        if(xhr.readyState == 4){
            if( xhr.status == 200){
                /*處理響應成功函數*/
                var result = '';
                /*接受數據*/
                /* json  xml  string*/
                var contentType = xhr.getResponseHeader('Content-Type');

                if(contentType.indexOf('xml') > -1){
                    /*服務端返回的是xml數據格式*/
                    result = xhr.responseXML;
                }else if(contentType.indexOf('json') > -1){
                    /*服務端返回的是json數據格式*/
                    /*json字符串*/
                    var str  = xhr.responseText;
                    result = JSON.parse(str);
                }else{
                    result = xhr.responseText;
                }

                /*調用回調函數*/
                options.success && options.success(result);
            }
            /*響應失敗*/
            else{
                /*處理響應失敗函數*/
                options.error && options.error('request fail code' + xhr.status);
            }

            options.complete &&  options.complete();
        }
    }
};

$.get = function(options){
    options.type = 'get';
    $.ajax(options);
};
$.post = function(options){
    options.type = 'post';
    $.ajax(options);
};

8.七、 jquery的ajax

jQuery爲咱們提供了更強大的Ajax封裝
$.ajax({}) 可配置方式發起Ajax請求
$.get() 以GET方式發起Ajax請求
$.post() 以POST方式發起Ajax請求
$('form').serialize() 序列化表單（即格式化key=val&key=val）
url 接口地址
type 請求方式
timeout 請求超時
dataType 服務器返回格式
data 發送請求數據
beforeSend: function () {} 請求發起前調用
success 成功響應後調用
error 錯誤響應時調用
complete 響應完成時調用（包括成功和失敗）
jQuery Ajax介紹
http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp

8.八、案例練習

一、Loading狀態
二、禁止重複提交
三、表單處理
四、數據驗證
接口化開發
請求地址即所謂的接口，一般咱們所說的接口化開發，實際上是指一個接口對應一個功能，
而且嚴格約束了請求參數和響應結果的格式，這樣先後端在開發過程當中，能夠減小沒必要要的討論，
從而並行開發，能夠極大的提高開發效率，另一個好處，當網站進行改版後，服務端接口只須要進行微調。

具體參考代碼

九、模版引擎

9.二、 artTemplate 簡介語法模板

<script src="dist/template.js"></script>

下載(https://raw.github.com/aui/artTemplate/master/dist/template.js)

編寫模版

<script id="test" type="text/html">
<h1>{{title}}</h1>
<ul>
    {{each list as value i}}
        <li>索引 {{i + 1}} ：{{value}}</li>
    {{/each}}
</ul>
</script>

渲染數據

var data = {
    title: '標籤',
    list: ['文藝', '博客', '攝影', '電影', '民謠', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;

簡介語法

{{if admin}}
    {{include 'admin_content'}}

    {{each list}}
        <div>{{$index}}. {{$value.user}}</div>
    {{/each}}
{{/if}}

9.一、 artTemplate 原生 js 模板語法版

使用

在頁面中引用模板引擎：

<script src="dist/template-native.js"></script>

下載(https://raw.github.com/aui/artTemplate/master/dist/template-native.js)

表達式

<% 與 %> 符號包裹起來的語句則爲模板的邏輯表達式。

輸出表達式

對內容編碼輸出：

<%=content%>

不編碼輸出：

<%=#content%>

編碼能夠防止數據中含有 HTML 字符串，避免引發 XSS 攻擊。

邏輯

支持使用 js 原生語法

<h1><%=title%></h1>
<ul>
    <%for(i = 0; i < list.length; i ++) {%>
        <li>條目內容 <%=i + 1%> ：<%=list[i]%></li>
    <%}%>
</ul>

模板不能訪問全局對象，公用的方法請參見文檔輔助方法章節
模板包含表達式

用於嵌入子模板。

<% include('template_name') %>

子模板默認共享當前數據，亦能夠指定數據：

<% include('template_name', news_list) %>

輔助方法

使用template.helper(name, callback)註冊公用輔助方法，例如一個基本的 UBB 替換方法：

template.helper('$ubb2html', function (content) {
    // 處理字符串...
    return content;
});

模板中使用的方式：

<% $ubb2html(content) %>

十、同源&跨域

10.1 同源

同源策略是瀏覽器的一種安全策略，所謂同源是指，域名，協議，端口徹底相同。

10.2 跨域

不一樣源則跨域
例如http://www.example.com/

http://api.example.com/detail.html  不一樣源 域名不一樣  
https//www.example.com/detail.html   不一樣源 協議不一樣  
http://www.example.com:8080/detail.html 不一樣源 端口不一樣  
http://api.example.com:8080/detail.html 不一樣源 域名、端口不一樣  
https://api.example.com/detail.html 不一樣源 協議、域名不一樣  
https://www.example.com:8080/detail.html    不一樣源 端口、協議不一樣  
http://www.example.com/detail/index.html    同源  只是目錄不一樣

10.3 跨域方案（課外拓展）

一、頂級域名相同的能夠經過domain.name來解決，即同時設置 domain.name = 頂級域名（如example.com）
二、document.domain + iframe
三、window.name + iframe
四、location.hash + iframe
五、window.postMessage()

參考資料
http://rickgray.me/2015/09/03/solutions-to-cross-domain-in-browser.html

10.四、 jsonp

JSON with Padding

一、原理剖析

其本質是利用了標籤具備可跨域的特性，
由服務端返回一個預先定義好的Javascript函數的調用，而且將服務器數據以該函數參數的形式傳遞過來，
此方法須要先後端配合完成。

<!--
當咱們用script標籤去加載的時候  會把內容解析成js去執行
-->
<script>
    function fuc(data){
        console.log(data.name);
    }
</script>
<script src="http://www.guangzhou.com/api.php?callback=fuc"></script>

十一、綜合案例

11.一、瀑布流案例（必須掌握）

11.二、天氣接口（必須掌握）

接口地址
http://developer.baidu.com/map/carapi-7.htm

url: 'http://api.map.baidu.com/telematics/v3/weather?output=json&ak=0A5bc3c4fb543c8f9bc54b77bc155724',

11.三、省級聯動（課外拓展）

相關標籤/搜索

每日一句

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

http服務&ajax編程

http服務&ajax編程

一、服務器

1.一、服務器類型

1.二、服務器軟件

1.三、HTTP服務器

二、客戶端

三、網絡基礎

3.1 IP地址

3.二、域名

3.三、DNS服務

3.四、端口

四、軟件架構

4.一、C/S結構

4.二、B/S結構

五、搭建HTTP服務

5.1 安裝WampServer

5.2 管理HTTP服務

5.3 配置根目錄

5.4 網站部署

5.5配置虛擬主機

六、PHP基礎

6.一、最簡單的php程序

6.三、變量

6.三、數據類型

6.四、運算符&內容輸出

6.五、函數

6.六、分支，循環語句

6.七、表單處理

6.八、文件導入&&經常使用php函數

6.九、應用實例

七、網絡傳輸協議

7.一、常見協議

7.二、http協議

7.2.一、請求和請求報文

7.2.二、 響應和響應報文

八、AJAX編程

8.一、 異步

8.二、 XMLHttpRequest

8.2.一、請求

8.2.二、響應

8.3.三、API詳解

8.三、 XML

8.四、 JSON

8.五、 兼容性

8.六、 封裝ajax工具函數

8.七、 jquery的ajax

8.八、 案例練習

九、模版引擎

9.二、 artTemplate 簡介語法模板

9.一、 artTemplate 原生 js 模板語法版

十、同源&跨域

10.1 同源

10.2 跨域

10.3 跨域方案（課外拓展）

10.四、 jsonp

十一、綜合案例

11.一、瀑布流案例（必須掌握）

11.二、天氣接口（必須掌握）

11.三、省級聯動（課外拓展）

7.2.二、響應和響應報文

8.一、異步

8.五、兼容性

8.六、封裝ajax工具函數

8.八、案例練習