Skip to main content

Tedshd's Dev note

Category: Ajax

JavaScript - Dynamic Load script || JSONP Callback

# JavaScript - Dynamic Load script || JSONP Callback ## Intro Sometimes we need dynamic load script or handle jsonp callback And we need handle script onload or jsonp callback onload or something error ## How to do? Use onload, onerror method ## Code if (typeof UTIL == 'undefined' || !UTIL) { var UTIL = {}; } UTIL.createEl = { get: function(sTag, oAttr, handleOnLoad, handleError) { var el = document. ...

AJAX - REST

# AJAX - REST 在 REST 當道的現在, 不得不了解一下如何實作 CRUD(create, read, update, delete) 本文 server side 以 php 為例子 var xhr = new XMLHttpRequest(); xhr.open('GET', 'example.html', true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { document.getElementById('myDiv').innerHTML = xhr.responseText; } }; xhr.send(); 上面為一個簡單的 AJAX 行為 在此之前須了解在做 AJAX 行為時, 資料是如何跟 request 一起帶到 server side 大致上有 3 種 FormData application/x-www-form-urlencoded payload 前面 2 種是用傳統的 form 包起來一起帶到 server side 再經由 php 解析 GET / POST 由於 php 只有 $_GET & $POST 這無法達到真正的 rest(不過有人硬幹出來 tronice/epv) 所以必須由其他方式實作 最簡單的實作就是使用 $_SERVER['REQUEST_METHOD'] 來捕捉 4 種 request 的 method ...

AJAX - XMLHttpRequest Introduction

# AJAX - XMLHttpRequest Introduction ## Intro 說到 AJAX 行為就不行不提到 XMLHttpRequest object 不知道現在的前端工程師還有人認識這個東西嗎? 當前 library 眾多(YIU, jQuery, AngularJS, Backbone.js…) 可能用過 Y.jsonp(url, callback); $.ajax(); $http(); …… 這些處理 AJAX 行為的 method 這些 library 在處理 AJAX 行為時其實都是 base on XMLHttpRequest 所以就來簡單說明一下這玩意, 了解這東西其實有助於處理 AJAX 行為 因為這算是在前端開發上會較接觸到網路 http Protocol 的東西, 也跟後端有較緊密的關係 ## History 其實在早期 XMLHttpRequest 尚未定案下來時也有許多名稱 var httpRequest; if (window.XMLHttpRequest) { // IE7,Mozila,Safari... httpRequest = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE5,IE6 // 找出最新版MSXML剖析器 var msxmls = ["MSXML2. ...