關於電影，大家大概第一個就想到 IMDb 吧？ IMDb 是世界最大最受歡迎的電影資料庫。因此一開始選主題時，就把 IMDb 的 API 也列進去了。沒想到 IMDb 是沒有出 API 的，只有一些非官方的可以用。
在尋找過程中，發現了兩個相似的電影資料庫，分別是 OMDb API 跟 TMDb API 。
先從 OMDb 開始講起吧。

Open Movie Database (OMDb)

先申請 API Key:

然後 API Key 會從 Email 裡寄過來：

現在來看看文件。

OMDb 的文件非常簡單，整個文件只有一頁 HTML 而且很短。
基本上就是兩個功能：

• 使用 ID 或 Title 取得電影資料
  使用時必須加上 t={ 電影名稱 } 或 i={ 電影ID } 的參數，二選一
• 搜尋電影資料庫
  必須加上 s={ 搜尋關鍵字 } 的參數

剩下的參數都是可選可不選的，像是

• type ： 選擇電影 movie、影集 series、特定集數 episode
• callback : 如果要使用 JSONP 的 callback 參數
• y : 釋出年份
• r：回傳資料格式，json (default)或 xml

現在來實作看看：

var apiKey = "2edf5c13";
var searchTitle = 'harry'
var url = "https://www.omdbapi.com/?apikey="+
    apiKey +
    '&s='+ searchTitle;
function makeRequest() {
  xhr = new XMLHttpRequest();
  xhr.onload = function() {
    var response = JSON.parse(this.responseText);
    console.log(response);
  };
  xhr.open(
    "GET",url,true
  );
  xhr.send();
}
makeRequest();

我把 searchTitle 作為參數放進 request URL 裡，用哈利波特的 ”harry” 來搜尋，結果如下：

可以看到 Response 裡面回傳的物件裡面，可以抓到電影海報、名稱、年份、跟 IMDb 的 ID。
Response 裡顯示的 totalResult 顯示搜尋結果有 573 項，但 response 裡面只有 10 項，這是因爲 response 只回傳搜尋結果第一頁，可以在 request url 參數裡加上 page={頁數} 來得到其他搜尋結果。

那麼這邊 OMDb 看完了，來看看 TMDb 吧。

The Movie Database (TMDb)

TMDb 的 API 頁面就沒有那麼陽春了，畢竟相較之下 OMDb 的開發者只是一群愛好電影的工程師在撰寫維護，TMDb 有自己的平台、排行榜、APP、討論區，稱得上是 IMDb 的競爭者。

TMDb 可以做到的事情比 OMDb 多得多，來仔細看一下文件：

取得 API Key：首先先註冊一個帳號，在右邊大頭貼那裡點一下，會出現一個清單，進去 Settings 裡面，可以看到左邊選單上有個 API 選項。

在這邊申請一個 API Key。

申請起來比 OMDb 麻煩一些呢。

TMDb 光是搜尋電影，就有三種 endpoint：

• /search：基本的文字搜尋
• /discover：根據一些其他條件搜尋，像是釋出年份或評分
• /find：根據 ID 搜尋特定結果

為了跟前面的 OMDb 做個對比，這邊就以 search 為主。其他的 endpoint 比方說抓取其他使用者的電影清單或是討論區的資料不多加贅述。

在 Search enpoint 之下，有更多根據不同條件的搜尋方法：

• /search/company 公司
• /search/collection 集合
• /search/keyword 關鍵字
• /search/multi 同時搜尋電視電影及演員
• /search/person 演員
• /search/tv 電視

唯一必要的參數就是 query 搜尋內容，可選的有language、 page、 include-adult 、 region。

TMDb 的文件上面就有 API Tester，所以可以直接在上面試用：

那麼，最後實作的部分，我想寫一個搜尋電影的功能，同時並列 TMBd 跟 OMBd 的結果來做對比。

var form = document.querySelector("form");
var input = document.querySelector('input[type="text"]');
var resultO = document.querySelector(".omdb-result");
var resultT = document.querySelector(".tmdb-result");

function movieResult(source, poster, name, year) {
  var resultItem = document.createElement("div");
  var movieTitle = document.createElement("h4");
  var releaseYear = document.createElement("p");
  var img = document.createElement("img");

  movieTitle.innerHTML = name;
  releaseYear.innerHTML = year;
  img.src = poster;

  resultItem.appendChild(img);
  resultItem.appendChild(movieTitle);
  resultItem.appendChild(releaseYear);

  if (source === "omdb") {
    resultO.appendChild(resultItem);
  } else {
    resultT.appendChild(resultItem);
  }
}

function search(e) {
  e.preventDefault();
  resultO.innerHTML = "";
  resultT.innerHTML = "";
  var searchTitle = input.value;
  makeTRequest(searchTitle);
  makeORequest(searchTitle);
  input.value = "";
}

// for OMDb
var apiKeyO = "2edf5c13";
var urlO = "https://www.omdbapi.com/?apikey=" + apiKeyO + "&type=movie" + "&s=";

function makeORequest(searchTitle) {
  xhr = new XMLHttpRequest();

  xhr.onload = function() {
    var response = JSON.parse(this.responseText).Search;
    response.map(function(item) {
      movieResult("omdb", item.Poster, item.Title, item.Year);
    });
  };
  xhr.open("GET", urlO + searchTitle, true);
  xhr.send();
}

// for TMDb
var apiKeyT = "0f79586eb9d92afa2b7266f7928b055c";
var urlT =
  "https://api.themoviedb.org/3/search/movie?api_key=" + apiKeyT + "&query=";
function makeTRequest(searchTitle) {
  xhr = new XMLHttpRequest();

  xhr.onload = function() {
    var response = JSON.parse(this.responseText).results;
    response.map(function(item) {
      movieResult(
        "tmdb",
        "https://image.tmdb.org/t/p/w300/" + item.poster_path,
        item.title,
        item.release_date
      );
    });
  };
  xhr.open("GET", urlT + searchTitle, true);
  xhr.send();
}

form.addEventListener("submit", search);

畫面：

Codepen 連結