HTTP服務(wù)&AJAX編程

一、HTTP服務(wù)

1.1 C/S和B/S

  • B/S架構(gòu)：即Broswer、Server，將所有的服務(wù)都可以通過瀏覽器來完成，比如各種網(wǎng)站。
  • C/S架構(gòu)：即Client、Server，不同的服務(wù)需要安裝不同的客戶端軟件，比如QQ、迅雷等。
  • 兩者的區(qū)別：
    1. B/S架構(gòu)：
      • 免安裝，所有服務(wù)都通過瀏覽器來完成，節(jié)省系統(tǒng)資源，開發(fā)效率高，只需要開發(fā)一個(gè)基于html5的網(wǎng)頁。
      • 安全性要差一些，所有的內(nèi)容都需要從服務(wù)端加載，性能也要差一些。
    2. C/S架構(gòu)：
      • 安全性要好一些，性能要好一些，安裝包中可能集成一些大型的圖片，運(yùn)行更流暢。
      • 必須下載客戶端軟件才能使用服務(wù)。

1.2 客戶端&服務(wù)端

1.2.1 客戶端

具有向服務(wù)器索取服務(wù)能力的終端，比如手機(jī)、電腦等，通過安裝不同的客戶端軟件，可以獲取不同的服務(wù)，比如通過QQ獲得即時(shí)通訊服務(wù)、通過迅雷獲得下載服務(wù)等。

1.2.2 服務(wù)端

對外提供服務(wù)器的，一般的客戶端都對應(yīng)有服務(wù)端，能夠提供某種服務(wù)的機(jī)器（計(jì)算機(jī)）稱為服務(wù)器。

  • 服務(wù)器類型：

    按照不同的劃分標(biāo)準(zhǔn)，服務(wù)可劃分為以下類型：

    1. 按服務(wù)類型可分為：
      • 文件服務(wù)器
      • 數(shù)據(jù)庫服務(wù)器
    2. 按操作系統(tǒng)可分為：
      • Linux服務(wù)器體
      • Windows服務(wù)器等
    3. 按應(yīng)用軟件可分為：
      • Apache服務(wù)器
      • Nginx 服務(wù)器
      • IIS服務(wù)器
      • Tomcat服務(wù)器
      • Node服務(wù)器等

  • 服務(wù)器軟件：

    使計(jì)算機(jī)具備提供某種服務(wù)能力的應(yīng)用軟件，稱為服務(wù)器軟件，通過安裝相應(yīng)的服務(wù)軟件，然后進(jìn)行配置后就可以使計(jì)算具備了提供某種服務(wù)的能力。

    常見的服務(wù)器軟件有：

    1. 文件服務(wù)器：Server-U、FileZilla、VsFTP等；
    2. 數(shù)據(jù)庫服務(wù)器：Oracle、MySQL、PostgreSQL、MSSQL等；
    3. 郵件服務(wù)器：Postfix、Sendmail等；
    4. web服務(wù)器：Apache、Nginx、IIS、Tomcat、NodeJS等。

  • Web(http)服務(wù)器：

    即網(wǎng)站服務(wù)器，主要提供文檔(文本、圖片、視頻、音頻)瀏覽服務(wù)，一般安裝Apache、Nginx服務(wù)器軟件。

    HTTP服務(wù)器可以結(jié)合某一編程語言處理業(yè)務(wù)邏輯，由此進(jìn)行的開發(fā)，通常稱之為服務(wù)端開發(fā)。

    常見的運(yùn)行在服務(wù)端的編程語言包括 PHP、Jsp、Asp、Python、Ruby、Perl等。

1.3 網(wǎng)絡(luò)基礎(chǔ)

1.3.1 IP地址

  • 局域網(wǎng)IP：是由交換機(jī)或者路由器去分配的一個(gè)32位地址。

    局域網(wǎng)：是指在某一區(qū)域內(nèi)由多臺(tái)計(jì)算機(jī)互聯(lián)成的計(jì)算機(jī)組。

  • 公網(wǎng)IP：一般需要去電信部門申請。

  • 查看本機(jī)IP地址：ping、ipconfig、ifconfig

    如百度的IP地址：http://119.75.217.109

1.3.2 域名

由于IP地址基于數(shù)字，不方便記憶，于是便用域名來代替IP地址，域名是一個(gè)IP地址的“面具”。

一個(gè)域名下面可以配置多個(gè)二級域名。

域名可以去阿里云等網(wǎng)站申請，購買使用。

查看域名對應(yīng)的IP地址 ping、tracert

1.3.3 端口

端口號是計(jì)算機(jī)與外界通訊交流的出口，每個(gè)端口對應(yīng)不同的服務(wù)。一臺(tái)計(jì)算機(jī)大概有6w多個(gè)端口，假設(shè)我的計(jì)算機(jī)要對外提供服務(wù)，我就必須占用一個(gè)端口對外提供服務(wù)。一臺(tái)計(jì)算機(jī)可以對外提供多個(gè)服務(wù)，只要占用的端口不一樣即可。web的端口是默認(rèn)80，mysql對外提供數(shù)據(jù)庫服務(wù)，默認(rèn)端口是3306。

  • 查看端口占用情況 netstat -an
  • 常見端口號 80、8080、3306、21、22

1.3.4 DNS服務(wù)

DNS（Domain Name System）域名系統(tǒng)，作用是進(jìn)行域名管理。它記錄了IP 地址和域名的映射關(guān)系。

查找優(yōu)先級：本機(jī)hosts文件 --> DNS服務(wù)器。

1.4 搭建Web服務(wù)器

1.4.1 安裝WampServer

如果只安裝apache，解析不了php，所以要安裝wamp（windows apache mysql php）集成環(huán)境。

1.4.2 訪問本機(jī)

1.4.3 apache的配置

進(jìn)入到這個(gè)目錄下面去配置：C:\wamp\bin\apache\Apache2.2.21\conf\httpd.conf

  • 配置所有的用戶都可以訪問我的服務(wù)器：在235行添加Allow from all。
  • 修改默認(rèn)訪問路徑：文件的178行DocumentRoot "f:/webwokspace"，文件的205 行 <Directory "f:/webwokspace/">。
  • 修改默認(rèn)端口號：修改文件第46行Listen后邊的數(shù)值即可。

1.4.4 配置虛擬主機(jī)

在一臺(tái)Web服務(wù)器上，我們可以通過配置虛擬主機(jī)，然后分別設(shè)定根目錄，實(shí)現(xiàn)對多個(gè)網(wǎng)站的管理。

  • 開啟虛擬主機(jī)輔配置：

    1. 在C:\wamp\bin\apache\Apache2.2.21\conf\httpd.conf467行找到Include conf/extra/httpd-vhosts.conf，打開前邊的注釋。

    2. 配置虛擬主機(jī)，打開conf/extra/httpd-vhosts.conf，分別修改以下三項(xiàng)：

      • DocumentRoot "文件路徑"
      • ServerName "example.com"
      • ServerAlias "www.example.com"

    3. 修改DNS（hosts）文件：

      打開C:\Windows\System32\drivers\etc\hosts，目錄是固定的。

      127.0.0.1  example.com
127.0.0.1  www.example.com

1.4.5 資源

我們把服務(wù)器上面的這些文件都統(tǒng)稱為資源。

  • 靜態(tài)資源：可以通過瀏覽器直接打開，直接解析的我們成為靜態(tài)資源。html、js、css、image我們可以理解成靜態(tài)資源。
  • 動(dòng)態(tài)資源：php、jsp、asp我們可以理解為動(dòng)態(tài)資源。
  • 瀏覽器只認(rèn)識靜態(tài)資源。如果我的客戶端瀏覽器訪問的服務(wù)器上面的動(dòng)態(tài)資源，服務(wù)器會(huì)把動(dòng)態(tài)資源轉(zhuǎn)換成靜態(tài)資源，然后再丟給客戶端瀏覽器。
  • 動(dòng)態(tài)資源是在服務(wù)端運(yùn)行的，靜態(tài)資源是在客戶端運(yùn)行的。

1.5 PHP基礎(chǔ)

1.5.1 語法

  • php代碼必須放在：

    <?php
  /** 這里是代碼 **/ 
?>
  • 避免使用中文目錄和中文文件名。

1.5.2 變量

  • 變量以$開頭 字母/數(shù)字/下劃線 不能以數(shù)字開頭
  • 大小寫敏感（區(qū)分大小寫）

1.5.3 數(shù)據(jù)類型

  • 字符串
  • 整型
  • 浮點(diǎn)型
  • 布爾型
  • 數(shù)組

1.5.4 內(nèi)容輸出

  • echo：輸出簡單數(shù)據(jù)類型，如字符串、數(shù)值。
  • print_r()：輸出復(fù)雜數(shù)據(jù)類型，如數(shù)組。
  • var_dump()：輸出詳細(xì)信息，如對象、數(shù)組。

1.5.5 運(yùn)算符

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

1.5.6 函數(shù)

  • 與Javascript基本一致。
  • 函數(shù)名對大小寫不敏感。
  • PHP中函數(shù)的參數(shù)可以設(shè)置一個(gè)默認(rèn)值。
  • 幾個(gè)常用的函數(shù)：
    1. in_array()：是否在數(shù)組中。
    2. count()：計(jì)算數(shù)組長度。
    3. array_key_exists()：檢測數(shù)組中是否存在key。
    4. file_get_contents：讀取文件。
    5. move_upload_file()：移動(dòng)上傳的文件。

1.5.7 表單處理

  • 表單name屬性的是用來提供給服務(wù)端接收所傳遞數(shù)據(jù)而設(shè)置的。
  • 表單action屬性設(shè)置接收數(shù)據(jù)的處理程序。
  • 表單method屬性設(shè)置發(fā)送數(shù)據(jù)的方式。
  • 當(dāng)上傳文件是需要設(shè)置 enctype="multipart/form-data"，且只能post方式。
  • $_GET接收 get 傳值。
  • $_POST接收 post 傳值。
  • $_FILES接收文件上傳。

1.6 客戶端與服務(wù)端交互

1.6.1 客戶端

  • 提交途徑：
    1. 地址欄輸入
    2. 超鏈接（href，src）
    3. 表單提交
  • 提交方式：
    1. get：地址欄輸入、超鏈接（href，src），表單提交默認(rèn)是get。
    2. post：表單提交可以設(shè)置成post。

1.6.2 服務(wù)端

  • 接受請求：$_GET $_POST 這兩個(gè)變量得到的值都是一個(gè)關(guān)聯(lián)數(shù)組，客戶端的數(shù)據(jù)放在關(guān)聯(lián)數(shù)組里面，我們要取數(shù)據(jù)，根據(jù)key去獲取。
  • 處理請求：連接數(shù)據(jù)庫，增刪改查。
  • 響應(yīng)數(shù)據(jù)：根據(jù)處理請求的邏輯，給客戶端不同的響應(yīng)結(jié)果。

1.6.3 文件上傳

  • 客戶端：
    1. 表單提交
    2. post方式提交
    3. 必須有一個(gè)input type=file
    4. 必須給form 設(shè)置一個(gè)屬性enctype="multipart/form-data"
  • 服務(wù)端：
    1. 接收數(shù)據(jù)
    2. $_FILES接收到的數(shù)據(jù)也是一個(gè)關(guān)聯(lián)數(shù)組

1.7 網(wǎng)絡(luò)傳輸協(xié)議

指服務(wù)器和客戶端間進(jìn)行通信時(shí)的約束和規(guī)范，客戶端與服務(wù)端的數(shù)據(jù)交互并不是雜亂無章的，需要遵照（基于）一定的規(guī)范進(jìn)行。

  • 常見協(xié)議：

    1. HTTP、HTTPS 超文本傳輸協(xié)議。
    2. FTP 文件傳輸協(xié)議。
    3. SMTP 簡單郵件傳輸協(xié)議。

  • HTTP協(xié)議：

    即超文本傳輸協(xié)議，網(wǎng)站是基于HTTP協(xié)議的，例如網(wǎng)站的圖片、CSS、JS等都是基于HTTP協(xié)議進(jìn)行傳輸?shù)摹?/p>

    HTTP協(xié)議是由從客戶機(jī)到服務(wù)器的請求(Request)和從服務(wù)器到客戶機(jī)的響應(yīng)(Response)進(jìn)行了約束和規(guī)范。

    即HTTP協(xié)議主要由請求和響應(yīng)構(gòu)成。

    常用請求方法 POST、GET、PUT、DELETE。

    • 請求/請求報(bào)文：請求由客戶端發(fā)起，其規(guī)范格式為：請求首行、請求頭、請求空行、請求體。

      1. 請求首行：由請求方式、請求URL和協(xié)議版本構(gòu)成。

        GET /work/code/01http/01get.html HTTP/1.1

      2. 請求頭：

        • Host：localhost請求的主機(jī)。

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

        • Accept：/ 接受的文檔MIME類型。

        • User-Agent：告訴服務(wù)器客戶端瀏覽器的版本，操作系統(tǒng)的版本。

          Referer的頭：告訴服務(wù)器請求來自于那個(gè)頁面，廣告流量統(tǒng)計(jì)，防盜鏈。

        • Referer：從哪個(gè)URL跳轉(zhuǎn)過來的。

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

      3. 請求空行：分隔請求頭和請求體。

      4. 請求體：即傳遞給服務(wù)端的數(shù)據(jù)。

      注：當(dāng)以post形式提交表單的時(shí)候，請求頭里會(huì)設(shè)置Content-Type: application/x-www-form-urlencoded，以get形式提交不需要。

    • 響應(yīng)/響應(yīng)報(bào)文：響應(yīng)由服務(wù)器發(fā)出，其規(guī)范格式為：狀態(tài)行、響應(yīng)頭、響應(yīng)空行、響應(yīng)主體。

      1. 狀態(tài)行：由協(xié)議版本號、狀態(tài)碼和狀態(tài)信息構(gòu)成。

        HTTP/1.1 200 OK
        • 狀態(tài)碼：200（代表成功），403（代表沒有權(quán)限），404（代表請求的資源沒有找到），405（代表請求的方式不支持），302（請求重定向），304（文檔未修改），500（代表服務(wù)器內(nèi)部錯(cuò)誤）。

      2. 響應(yīng)頭：

        • Date：響應(yīng)時(shí)間。
        • Server：服務(wù)器信息。
        • Last-Modified：文件的最后修改時(shí)間。
        • Content-Length：響應(yīng)主體長度。
        • Content-Type：響應(yīng)資源的MIME類型。（MIME是標(biāo)識文件類型的，文件后綴并不能正確無誤的標(biāo)識文件的類型。）

        客戶端與服務(wù)器在進(jìn)行數(shù)據(jù)傳輸?shù)臅r(shí)候都是以字節(jié)形式進(jìn)行的，咱們可以理解成是以“文本形式”傳輸，這時(shí)瀏覽器就需要明確知道該怎么樣來解析這些文本形式的數(shù)據(jù)，MIME就是明確告知瀏覽器該如何來處理。

      3. 響應(yīng)空行：分隔響應(yīng)頭和響應(yīng)體。

      4. 響應(yīng)體：即服務(wù)端返回給客戶端的內(nèi)容。

  • 調(diào)試工具：

    1. 利用HTTP抓包工具在開發(fā)中可以幫我們進(jìn)行調(diào)試，常用抓包工具：HttpWatch、Fiddler、Charles、FireBug等。
    2. 瀏覽器插件：Firebug、HttpWatch、chrome dev tools。
    3. 代理軟件：Charles、Fiddler。

二、AJAX編程

即 Asynchronous Javascript And XML，AJAX 不是一門的新的語言，而是對現(xiàn)有持術(shù)的綜合利用。

本質(zhì)是在HTTP協(xié)議的基礎(chǔ)上以異步的方式與服務(wù)器進(jìn)行通信。

2.1 同步&異步

  • 異步：指某段程序執(zhí)行時(shí)不會(huì)阻塞其它程序執(zhí)行，其表現(xiàn)形式為程序的執(zhí)行順序不依賴程序本身的書寫順序，其優(yōu)勢在于不阻塞程序的執(zhí)行，從而提升整體執(zhí)行效率。反之則為同步。
  • 異步交互：客戶端請求服務(wù)器，服務(wù)器接收到請求并處理請求，然后給客戶端一個(gè)響應(yīng)，響應(yīng)的數(shù)據(jù)不會(huì)把原來的頁面給覆蓋，我們把這種交互成為異步交互。如果響應(yīng)的數(shù)據(jù)把原來的頁面給覆蓋，則為同步交互。

2.2 XMLHttpRequest

瀏覽器內(nèi)建對象，用于在后臺(tái)與服務(wù)器通信(交換數(shù)據(jù)) ，由此我們便可實(shí)現(xiàn)對網(wǎng)頁的部分更新，而不是刷新整個(gè)頁面。

2.2.1 請求

  • 請求首行：

    xhr.open('get','index.php');

  • 請求頭：get請求可以不設(shè)置

    xhr.setRequestHeader("Content-Type","text/html");

  • 請求主體：

    xhr.send(null);

2.2.2 響應(yīng)

HTTP響應(yīng)是由服務(wù)端發(fā)出的，作為客戶端更應(yīng)關(guān)心的是響應(yīng)的結(jié)果。

由于服務(wù)器做出響應(yīng)需要時(shí)間（比如網(wǎng)速慢等原因），所以我們需要監(jiān)聽服務(wù)器響應(yīng)的狀態(tài)，然后才能進(jìn)行處理。

onreadystatechange是Javascript的事件的一種，其意義在于監(jiān)聽XMLHttpRequest的狀態(tài)。

  • 獲取狀態(tài)行（包括狀態(tài)碼&狀態(tài)信息）：

    xhr.status            //狀態(tài)碼
xhr.statusText        //狀態(tài)信息

  • 獲取響應(yīng)頭：

    xhr.getResponseHeader('Content-Type');        //獲取指定頭信息
xhr.getAllResponseHeaders();              //獲取所有響應(yīng)頭信息

  • 響應(yīng)主體：

    xhr.responseText;
xhr.responseXML;

我們需要檢測并判斷響應(yīng)頭的MIME類型后確定使用request.responseText或者request.responseXML

2.2.3 API

  • xhr.open() 發(fā)起請求，可以是get、post方式。
  • xhr.setRequestHeader() 設(shè)置請求頭。
  • xhr.send() 發(fā)送請求主體get方式使用xhr.send(null)。
  • xhr.onreadystatechange = function () {} 監(jiān)聽響應(yīng)狀態(tài)。
  • xhr.status表示響應(yīng)碼，如200?。
  • xhr.statusText表示響應(yīng)信息，如OK??。
  • xhr.getAllResponseHeaders() 獲取全部響應(yīng)頭信息。
  • xhr.getResponseHeader('key') 獲取指定頭信息。
  • xhr.responseText、xhr.responseXML都表示響應(yīng)主體。

2.3 GET與POST的區(qū)別（面試中經(jīng)常問到）

  • GET沒有請求主體，使用xhr.send(null)。
  • GET可以通過在請求URL上添加請求參數(shù)。
  • POST可以通過xhr.send('name=itcast&age=10')。
  • POST需要設(shè)置：xhr.setRequestHeader("Content-Type","application/x-www-form-ullencoded");
  • GET效率更好（應(yīng)用多）。
  • GET大小限制約4K，POST則沒有限制。

2.4 XML

XML是一種可擴(kuò)展的標(biāo)記語言，很類似HTML，其宗旨是用來傳輸數(shù)據(jù)，具有自我描述性（它里面的標(biāo)簽是自定義的）。

2.4.1 語法

  • 必須有且僅有一個(gè)根元素。

  • 第一行必須是文檔申明：

    <?xml version="1.0" encoding="utf-8" ?>

  • 不可有空格、不可以數(shù)字或.開頭、大小寫敏感。

  • 不可交叉嵌套。

  • 屬性雙引號（瀏覽器自動(dòng)修正成雙引號了）。

  • 特殊符號要使用實(shí)體。

  • 注釋和HTML一樣。

雖然可以描述和傳輸復(fù)雜數(shù)據(jù)，但是其解析過于復(fù)雜并且體積較大，所以實(shí)現(xiàn)開發(fā)已經(jīng)很少使用了。

2.4.2 示例

2.5 JSON

即 JavaScript Object Notation，另一種輕量級的文本數(shù)據(jù)交換格式，獨(dú)立于語言。

2.5.1 語法

  • 數(shù)據(jù)在名稱/值對中。
  • 數(shù)據(jù)由逗號分隔(最后一個(gè)健/值對不能帶逗號)。
  • 花括號保存對象方括號保存數(shù)組。
  • 使用雙引號。

2.5.2 json解析

JSON數(shù)據(jù)在不同語言進(jìn)行傳輸時(shí)，類型為字符串，不同的語言各自也都對應(yīng)有解析方法，需要解析完成后才能讀取。

  • Javascript 解析方法：eavl()、JSON對象 JSON.parse()、JSON.stringify()；?
  • PHP解析方法：json_encode()、json_decode()。

總結(jié)：JSON體積小、解析方便且高效，在實(shí)際開發(fā)成為首選。

2.6 jQuery中的ajax

jQuery ajax介紹

jQuery為我們提供了更強(qiáng)大的Ajax封裝：

  • $.ajax({}) 可配置方式發(fā)起Ajax請求
  • $.get() 以GET方式發(fā)起Ajax請求
  • $.post() 以POST方式發(fā)起Ajax請求
  • $('form').serialize() 序列化表單（即格式化key=val&key=val）
  • url 接口地址
  • type 請求方式
  • timeout 請求超時(shí)
  • dataType 服務(wù)器返回格式
  • data 發(fā)送請求數(shù)據(jù)
  • beforeSend: function () {} 請求發(fā)起前調(diào)用
  • success 成功響應(yīng)后調(diào)用
  • error 錯(cuò)誤響應(yīng)時(shí)調(diào)用
  • complete 響應(yīng)完成時(shí)調(diào)用（包括成功和失?。?/li>

6個(gè)方法：ajax get post getScript getJSON load

2.7 模板引擎

2.7.1 原理剖析

其本質(zhì)是利用正則表達(dá)式，替換模板當(dāng)中預(yù)先定義好的標(biāo)簽。

2.7.2 流行模板引擎

2.7.3 artTemplate

  1. 引入template-native.js
  2. <% 與%>符號包裹起來的語句則為模板的邏輯表達(dá)式
  3. <%=content%>為輸出表達(dá)式
<script type="text/template" id="tempalteId">
    <% for(var i=0;i<rows.length;i++){%>
        <tr>
            <td><%=rows[i].username %></td>
            <td><%=rows[i].age %></td>
        </tr>
    <%}%>
</script>

$(function () {
    $("input").on("click", function () {
        $.ajax({
            url: "01template.php",
            type: "get",
            success: function (data) {
                //解析數(shù)據(jù)，將數(shù)據(jù)放到頁面上面.
                //之前：data 轉(zhuǎn)成JavaScript 對象
                //創(chuàng)建標(biāo)簽，然后將標(biāo)簽跟數(shù)據(jù)組裝到一起
                //現(xiàn)在:使用template 來解析
                //js/template-native.js 文件里面提供.
                //alert(data);
                //1:模板id
                //2：數(shù)據(jù)，這里要求的數(shù)據(jù)一定要是一個(gè)對象.{}
                //[] 改成這個(gè)格式 {}
                var obj = {
                    rows: data
                }
                var html = template("tempalteId", obj);
                console.log(html);
                $("table").append(html);
            }
        })
    });
})

2.8 同源&跨域

2.8.1 同源

同源策略是瀏覽器的一種安全策略，所謂同源是指，域名，協(xié)議，端口完全相同。

2.8.2 跨域

不同源則跨域。

例如http://www.example.com/

網(wǎng)址 是否同源 解釋
http://api.example.com/detail.html 不同源 域名不同
https://www.example.com/deail.html 不同源 協(xié)議不同
http://www.example.com:8080/detatil.html 不同源 端口不同
http://api.example.com:8080/detail.html 不同源 域名、端口不同
https://api.example.com/detail.html 不同源 協(xié)議、域名不同
https://www.example.com:8080/detail.html 不同源 端口、協(xié)議不同
http://www.example.com/detail/index.html 同源 只是目錄不同

2.8.3 跨域方案

  1. 頂級域名相同的可以通過domain.name來解決，即同時(shí)設(shè)置 domain.name = 頂級域名（如example.com）
  2. document.domain + iframe
  3. window.name + iframe
  4. location.hash + iframe
  5. window.postMessage()

2.8.4 JSONP

JSONwith Padding

  • 原理剖析

    其本質(zhì)是利用了<script src=""></script>標(biāo)簽具有可跨域的特性，由服務(wù)端返回一個(gè)預(yù)先定義好的Javascript函數(shù)的調(diào)用，并且將服務(wù)器數(shù)據(jù)以該函數(shù)參數(shù)的形式傳遞過來，此方法需要前后端配合完成。

    • 文件后綴并不能代表什么，關(guān)建我們要看服務(wù)器返回的內(nèi)容，比如css.php

      這時(shí)返回的內(nèi)容為 echo 'body {background:color}'我們可以通過content-type:text/css來指定瀏覽器該如何解析，返回的內(nèi)容

    • 同樣我們也可以js文件以.php結(jié)尾，比如js.php 這時(shí)我們可以指定Content-Type: text/javascript可告知瀏覽器要以javascript來執(zhí)行我們返回的內(nèi)容，如果返回的是一個(gè)javascript的一個(gè)函數(shù)調(diào)用，那么在這個(gè)函數(shù)調(diào)用過程中可以將跨域請求來的數(shù)據(jù)以“實(shí)參”的傳遞過來，并且這個(gè)實(shí)參一般是JSON格式的

    • 只能以GET方式請求

2.8.5 jQuery中的JSONP

jQuery 的$.ajax() 方法當(dāng)中集成了JSONP的實(shí)現(xiàn)，可以非常方便的實(shí)現(xiàn)跨域數(shù)據(jù)的訪問。?

  • dataType: 'jsonp' 設(shè)置dataType值為jsonp即開啟跨域訪問
  • jsonp 可以指定服務(wù)端接收的參數(shù)的“key”值，默認(rèn)為callback
  • jsonpCallback 可以指定相應(yīng)的回調(diào)函數(shù)，默認(rèn)自動(dòng)生成
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 136,699評論 19贊 139
  • AJAX 原生js操作ajax 1.創(chuàng)建XMLHttpRequest對象 var xhr = new XMLHtt...
    碧玉含香閱讀 3,580評論 0贊 7
  • 國家電網(wǎng)公司企業(yè)標(biāo)準(zhǔn)（Q/GDW）- 面向?qū)ο蟮挠秒娦畔?shù)據(jù)交換協(xié)議 - 報(bào)批稿：20170802 前言： 排版 ...
    庭說閱讀 12,537評論 6贊 13
  • Ajax和XMLHttpRequest 我們通常將Ajax等同于XMLHttpRequest，但細(xì)究起來它們兩個(gè)是...
    changxiaonan閱讀 2,398評論 0贊 2
  • 一、概念（載錄于：http://www.cnblogs.com/EricaMIN1987_IT/p/3837436...
    yuantao123434閱讀 8,761評論 6贊 152

友情鏈接更多精彩內(nèi)容