瞭解HTTP服務&Ajax編程

時間 2019-12-01

原文原文鏈接

瞭解HTTP服務&Ajax編程

1.C/S結構（即Client、Server）javascript

在C/S結構的狀況下，不一樣的服務須要安裝不一樣的客戶端軟件，好比QQ、迅雷、Foxmail。

2．B/S結構（即Broswer、Server）php

解決了C/S所帶來的不便，將全部的服務均可以經過瀏覽器來完成。

B/S架構與C/S架構區別

1．硬件環境不一樣 :css

C/S 通常創建在專用的網絡上 ,小範圍裏的網絡環境, 局域網之間
B/S 創建在廣域網之上的 ,沒必要是專門的網絡硬件環境，通常只要有操做系統和瀏覽器就行

2．對安全要求不一樣html

C/S 通常面向相對固定的用戶羣, 對信息安全的控制能力很強. 
B/S 創建在廣域網之上, 對安全的控制能力相對弱, 可能面向不可知的用戶。

3．軟件重用不一樣java

C/S 程序能夠不可避免的總體性考慮, 構件的重用性不如在B/S要求下的構件的重用性好.

服務器

通俗的講，可以提供某種服務的機器（計算機）稱爲服務器。mysql

1：接收用戶請求
2：對請求進行處理
3：給用戶一個響應。

1.服務器類型jquery

一、按服務類型可分爲：文件服務器、數據庫服務器、郵件服務器、Web 服務器等；

二、按操做系統可分爲：Linux服務器、Windows服務器等；

三、按應用軟件可分爲 Apache服務器、Nginx 服務器、IIS服務器、Tomcat服務器、Node服務器等。

2.服務器軟件git

常見的服務器軟件有：github

一、文件服務器：Server-U、FileZilla、VsFTP等；

二、數據庫服務器：Oracle、MySQL、PostgreSQL、MSSQL等；

三、郵件服務器：Postfix、Sendmail等；

四、HTTP 服務器：Apache、Nginx、IIS、Tomcat、NodeJS等；

3.HTTP服務器ajax

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

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

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

網絡基礎

1.IP地址

查看本機IP地址 ping、ipconfig、ifconfig

2.域名查看域名對應的IP地址 ping、tracert

3.DNS服務

DNS記錄了 IP 地址和域名的映射（對應）關係；
查找優先級 本機hosts文件、DNS服務器

好比咱們訪問http://www.baidu.com ，首先會到本機的hosts文件當中進行相應的查找，沒有找到，而後去dns 服務器上面去找.找到對應的ip 地址，根據ip 地址定位到互聯網上面的主機，根據端口定位到服務。而後由主機完成響應，通常咱們都是響應一個html 頁面，瀏覽器獲得這個頁面，解析這個頁面，而後一張網頁就出如今咱們的面前了。

4.端口

查看端口占用狀況 netstat -an
常見端口號 80、8080、330六、2一、22

搭建wamp 介紹

Windows + Apache + Mysql + PHP，首字母組合。集成安裝環境，即在window下的apache、php和mysql的服務器軟件。

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

2.管理HTTP服務

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

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

5.配置根目錄

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

具體步驟以下
一、打開配置文件，控制檯選擇
或者 wampserver安裝目錄下
bin\apache\Apache2.2.21\conf\httpd.co

2.設定根目錄，查找並修改
DocumentRoot "D:/wamp/www/"

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

三、配置根目錄，查找
<Directory  "D:/wamp/www/">

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

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

6.配置虛擬主機

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

具體步驟以下：
一、開啓虛擬主機輔配置，在httpd.conf 中找到
# Virtual hots
#Include conf/extra/httpd-vhosts.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

7.PHP基礎

文件以.php後綴結尾，全部程序包含在，避免使用中文目錄和中文文件名

例子：
	<?php
		eaho  'hello';
	?>

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

2.數據類型
字符型、整型、浮點型、布爾型、數組、對象、NULL
單引號&雙引號區別
索引數組、關聯數組（瞭解便可）

3.內容輸出
echo：輸出簡單數據類型，如字符串、數值
print_r()：輸出複雜數據類型，如數組
var_dump()：輸出詳細信息，如對象、數組（瞭解）

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

5.函數
與Javascript基本一致,函數名對大小寫不敏感,默認參數（瞭解便可）
/* function sayHello(){
echo 'ahaaha';
}
sayHello();*/
/**
默認參數。
*/
function sayHello($person="小明"){
echo '你好'.$person;
sayHello("小豬");

6.分支、循環語句

//遍歷數組
//索引數組遍歷
$array=array("1","2","33","44");
//獲取到數組的長度。 count() 用來獲取php 的數組的長度
$count=count($array);
for($i=0;$i<$count;$i++){
       echo $array[$i];
}

也能夠經過foreach 來完成遍歷，沒遍歷一次，都會給$value 賦值。
foreach($array as $value){
    echo $value;
 }
$array=array ("username" =>"zhangsan", "age"=>13 );
foreach($array as $key=>$val){
    echo $key. ":".$val."<br/>" ;

7.表單處理
表單name屬性的是用來提供給服務端接收所傳遞數據而設置的
表單action屬性設置接收數據的處理程序
表單method屬性設置發送數據的方式
當上傳文件是須要設置 enctype="multipart/form-data"，且只能post方式
$_GET接收 get 傳值
$_POST接收 post 傳值
$_FILES接收文件上傳

8.經常使用PHP函數
in_array() 是否在數組中
count() 計算數組長度
array_key_exists()檢測數組中是否存在key
file_get_contents讀取文件
...還有不少

9.常見協議
一、HTTP、HTTPS 超文本傳輸協議
二、FTP 文件傳輸協議
三、SMTP 簡單郵件傳輸協議

HTTP協議是由從客戶機到服務器的請求(Request)和從服務器到客戶機的響應(Response)進行了約束和規範。即HTTP協議主要由請求和響應構成。
經常使用請求方法 POST、GET、PUT、DELETE

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

一、請求行
例子：
post/01.day/code/login.php HTTP/1.1
由請求方式、請求URL和協議版本構成

二、請求頭
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形式當不須要

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

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

二、響應頭
Date：響應時間
Server：服務器信息
Last-Modified：資源最後修改時間
由服務器自動生成
ETag：資源修改後生成的惟一標識
由服務器自動生成
Content-Length：響應主體長度
Content-Type：響應資源的MIME類型

三、響應主體
即服務端返回給客戶端的內容；
狀態碼:常見的有200表明成功、304文檔未修改、403沒有權限、404未找到、500服務器錯誤

4.調試工具	
利用HTTP抓包工具在開發中能夠幫咱們進行調試，經常使用抓包工具HttpWatch、Fiddler、Charles、FireBug等

5.瀏覽器插件
Firebug、HttpWatch、chrome dev tools
代理軟件
Charles、Fiddler

AjAx編程

1.什麼是同步交互
服務器返回的數據會覆蓋以前登錄的頁面覆蓋掉。
2.什麼異步交互
頁面不刷新，就能夠可以與服器進行動態的數據交互。
3.XMLHttpRequest
瀏覽器內建對象，用於在後臺與服務器通訊(交換數據)

請求
HTTP請求3個組成部分與XMLHttpRequest方法的對應關係
1.請求行
xhr.open('get','index.php');
2.請求頭
xhr.setRequestHeader('Content-Type','text/html')(get請求能夠不設置)
三、請求主體
xhr.send(null)

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

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

一、獲取狀態行（包括狀態碼&狀態信息）
xhr.status;//狀態碼
xhr.statusText//狀態信息
	
二、獲取響應頭
xhr.getResponseHeader('content-Type')//獲取指定信息
xhr.getAllResponseHeaders();

3.響應主體
xhr.responseText;
xhr.responseXML;

API詳解

xhr.open() 發起請求，能夠是get、post方式

xhr.setRequestHeader() 設置請求頭

xhr.send() 發送請求主體get方式使用xhr.send(null)

xhr.onreadystatechange = function () {} 監聽響應狀態

xhr.readyState = 0時，UNSENT open還沒有調用

xhr.readyState = 1時，OPENED open已調用

xhr.readyState = 2時，HEADERS_RECEIVED 接收到頭信息

xhr.readyState = 3時，LOADING 接收到響應主體

xhr.readyState = 4時，DONE 響應完成

不用記憶狀態，只須要了解有狀態變化這個概念

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須要設置 
請求頭：xhr.setRequestHeader('Content-Type','application/x-www-form-urlen')

五、GET效率更好

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

案例：

<body>
<input type="button" value="xmlHttpRequest 對象測試" id="ajaxId">
<script>
        document.getElementById("ajaxId").onclick=function () {

                    /*
                   	 	* 1:我要建立對象
                     	* 2：跟服務器創建鏈接
                     	* 3：發送數據
                     	* 4: 接收服務器響應的數據
                    * */
                    //:我要建立對象
                    var xhr=new XMLHttpRequest();
                    /**
                     	* 1:請求提交的方式
                     	* 2：提交的地址
                     */
                    xhr.open("GET","demo01.php");

                    //發送數據.
                    xhr.send("username=zhangyang");

                    /*接收響應的數據.*/
                    /*
                    	* 時刻監聽着服務器端狀態的改變，服務器在客戶端響應的過程中
                    	* 會給客戶端不少的狀態
                    	* 當服務器在響應的過程中的時候會一直調用這個方法。
                    * */
                    xhr.onreadystatechange=function(){
                            //能夠去獲取服務器端的狀態。
                            /*
                            	* 0,1,2,3,4
                            	* 4:表明服務器已經響應完成，全部數據響應完成
                            	*   alert(xhr.status); 這個是服務器端給客戶端的一個狀態碼
                            	*   200 表明服務器響應式ok
                            * */
                            if(xhr.readyState==4 && xhr.status==200){
                                    //接收數據。
                                  var data=  xhr.responseText;
                                  alert(data);
                            }
                    }

        }
</script>
</body>

JSON解析

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

1.javascript解析的方法
 	兩種方式：直接把json 格式的數據轉換成javascript 的對象
	1：eval("("+json+")")	//推薦使用
	2: JSON.parse(json);	//個別地方有兼容問題
示例：
直接把json 格式的數據轉換成javascript 的對象
var s1 ='["left':100]';
var a1=JSON.parse(s1)

2.stringify : 能夠把一個對象轉成對應字符串
var  arr=[1,2,3]=>JSON.stringify (arr);
ar obj={left:100}=>JSON.stringify(obj) ;

php的解析方法

1.json_encode()、json_decode()
總結：JSON體積小、解析方便且高效，在實際開發成爲首選。

2.兼容性
IE五、IE6中使用 ActiveObject("Microsoft.XMLHTTP")

案例：
var request;

if(XMLHttpRequest){
   //標準寫法
	request= new  XMLHttpRequest;
}else{
	 request= new  ActiveXObject('Microsoft.XMLHTTP	');
}

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 響應完成時調用（包括成功和失敗）

###案例### 1.使用ajax方法發送請求 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery.min.js"></script>

</head>
<body>
<input type="button" id="ajaxId" value="ajax 方法">
<script>
        document.getElementById("ajaxId").onclick=function(){
                //使用ajax 方法來發送請求。

                //$ 這個是jQuery 對象， ajax 方法是上面的一個方法。
                //這個裏面接收的是一個對象。
                $.ajax({
                    /*各類參數*/
                    url:"01ajax.php",//請求的資源的 地址
                    type:"GET",//請求提交的方式。
                    /*
                    	* 服務器端3秒尚未給我響應，我就斷開這個鏈接
                    	* */
                    timeout:3000,
                    //第一種寫法
                    /*data:"username=zhangsan&password=123456",//請求的數據,*/
                    /*第二種寫法*/
                      data:{
                            "username":"zhangsan",
                            "password":"123456"
                      },
                    /*
                    	* data:這個data 就是服務端返回的數據。
                    	* */
                    success:function(data){
                          alert(data);
                    },
                    //出錯了會自動調用這個函數。
                    error:function(){
                         alert("服務器開了點小差哦");
                    },
                    /*請求處理完成了以後會調用這個方法*/
                    complete:function(){
                          alert("跟服務器的交互已經完成。");
                    },
                    /*
                   	 * 在請求發送以前調用。
                   	* */
                    beforeSend:function(){
                          /*
                          	* 我發送請求給服務器，我是要發送一些數據給服務器，
                          	* 爲了減小跟服務器的交互，在發送以前，對請求的數據進行一些校驗
                          	* 若是校驗失敗，我不請求服務器了。
                          *
                          	* */
                         /*alert("請求發送以前調用");*/
                         //我在界面上面獲取了一個手機號
                         /*var tel="1362093411";

                         if(tel.length!=11){
                             //走這裏代碼。
                             //我在這裏應該給用提示，而後中止發送請求
                             //就直接不會發送請求。
                             alert("您輸入的數據有誤。");
                             return false;
                         }*/

                    }
                });
        }

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

2.使用get發送請求
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
</head>
<body>
    <input type="button" id="getId" value="get 方法">

    <script>
            $("#getId").on("click",function(){

                    /*
                    * 1:url 請求地址
                    * 2：data ,"",
                    * 3: function  回掉函數  默認就是get 方式提交
                    *
                    *
                    * */

                         $.get("02get.php", {"username":""},
                                  function(data){
                                           alert(data);
                                  });

            });
    </script>
</body>
</html>

3.使用post發送請求		
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
</head>
<body>
<input type="button" id="postId" value="post 方法">

<script>
    $("#postId").on("click",function(){

        /*
         * 1:url 請求地址
         * 2：data ,"",
         * 3: function  回掉函數  默認就是get 方式提交
         *
         *
         * */

        $.post("03post.php", {"username":""},
                function(data){
                    var obj=eval("("+data+")")
                    alert(obj.sex);
                });

    });
</script>
</body>
</html>
	
4.使用load方法發送請求	
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
</head>
<body>
<div>我睡覺了.</div>
<input type="button" id="loadId" value="load 方法">

<script>
    $("#loadId").on("click",function(){
            /*
            * 加載一個資源
            * 返回的數據會會加載到當前元素裏面，會把當前元素裏面的內容覆蓋。
            * 我不知道是get 方式提交，仍是post 方式提交。
            * 若是發送了參數給服務器，就使用post 方式提交，不然就使用get 方式提交
            *
            * */
            $("div").load("04load.php",{"username":"zhangsan"},function(){
                    alert("回調");
            });


    });
</script>
</body>
</html>	
	
5.getJSON方法發送請求，要求返回數據必定是json格式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
</head>
<body>
<div>我睡覺了.</div>
<input type="button" id="JSONId" value="JSON 方法">

<script>
    $("#JSONId").on("click",function(){
                /*
                * getJSON 要求服務器端返回的數據必定是json 格式的數據
                *
                * */
                $.getJSON("05getJSON.php",function(info){
                        //返回的字符串，我還須要使用js 手動給字符串轉一下。
                      console.log(info);
                })



    });
</script>
</body>
</html>		

6.getscript方法，獲取遠程的一段腳本	
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
</head>
<body>
<div>我睡覺了.</div>
<input type="button" id="scriptId" value="script 方法">

<script>
    /*
    * 獲取遠程的一段腳本
    *
    * */
    $("#scriptId").on("click",function(){
                 $.getScript("06getScript.js");
    });

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

模板引擎

解決的問題：
咱們ajax 與服務器在交互過程中的數據解析問題
咱們經過xmlHttpRequest 發送一個請求給服務器，服務器接收到請求，對請求進行數據，給客戶端返回數據，xmlHttpRequest 對象接收到數據，而後須要解析這些，解析完這些數據以後，而後要組拼不少的html 代碼，而後寫到頁面上面去。在這個過程中，咱們服務器端返回的數據，而後組拼字符串的時候特別容易出現問題。咱們的流行模板引擎就是用來幹這件事的。

流行模板引擎

BaiduTemplate：http://tangram.baidu.com/BaiduTemplate/
(百度)
ArtTemplate：https://github.com/aui/artTemplate
(騰訊)
velocity.js：https://github.com/shepherdwind/velocity.js/
（阿里）
Handlebars：http://handlebarsjs.com/
（國外的）
success:http://blog.jobbole.com/56689/

artTemplate

一、引入template-native.js
二、<% 與  %> 符號包裹起來的語句則爲模板的邏輯表達式
三、<%= content %>爲輸出表達式

案例：		
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
         模板是用來幹什麼
         1：服務器返回不少的json 格式的數據
         2：咱們解析這些數據
         3：咱們須要把這些數據組拼成html
         4：而後寫到頁面。
         <%%>  寫邏輯的，<%=%> 輸出的

-->
<!--使用騰訊的模板，咱們須要導入這樣的一個js 庫。-->
<!--
                       輸出。
                -->

<script id="test" type="text/template">
      <%for(var i=0;i<list.length;i++){%>
            <li>
                 <%=list[i]%>
            </li>
      <%}%>
</script>

<!--
    我如今導入的是這個js 庫
-->
<script src="js/template-native.js"></script>



</head>
<body>
    <ul>


    </ul>
    <script>
        //我發送了一個請求給服務器，發送請求給服務器以後，服務器返回數據，返回的是json 格式的數據
       /* var data = {
            title: '標籤',
            list: ['文藝', '博客', '攝影', '電影', '民謠', '旅行', '吉他']
        };*/
        //解析這些數據，而後組拼html
        //js css,html 標籤均可以js 裏面，動態建立，
        //這個方法是模板提供的 ,講模板跟數據進行綁定，經過template 綁定
        //接下來這個方法返回的時候一個字符串，一個html 的字符串。
        var info=['文藝', '博客', '攝影', '電影', '民謠', '旅行', '吉他'];

        var data={
             list:info
        }

        var html=template("test",data);
        /*
            * 1:準備模板
            * 2：數據 （服務器）
            * 3：使用template 將 數據跟模板進行綁定
            * */
        var data=["","",""];

        document.querySelector("ul").innerHTML=html;
    </script>
</body>
</html>

同源&跨域

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

2.跨域

不一樣源則跨域
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同源		只是目錄不一樣

跨域方案
一、頂級域名相同的能夠經過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

3.JSONP

1.原理剖析

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

2.jQuery中的JSONP	

jQuery 的$.ajax() 方法當中集成了JSONP的實現，能夠很是方便的實現跨域數據的訪問。

dataType: 'jsonp' 設置dataType值爲jsonp即開啓跨域訪問

jsonp 能夠指定服務端接收的參數的「key」值，默認爲callback

jsonpCallback 能夠指定相應的回調函數，默認自動生成