Ajax & jsonp & img

ajax 是一种请求服务器的方式，核心是xmlHttPRequest对象；

优点是无需刷新页面，

缺点是不能跨域请求。

/* * Ajax direacted by Zakas *  * Ajax.get("url?p=value", function (data) { // handle data }, false); * * Ajax.post("url",{ *     data : "p=value&id=001", *    callback : function (data) { // handle data }, *    async : false * }); * */ var Ajax = (function () {     "use strict";     var ajax = {         // 惰性载入函数         createXHR: (function () {             if (window.xmlhttpRequest) {                 // 不论new多少次XHR，if只需判断一次                 return function () {                     return new XMLHttpRequest();                 };             } else {                 // only for ie 6 hack                 return function () {                     return new ActiveXObject("Microsoft.XMLHTTP");                 };             }         }()),         get: function (url, callback, async) {             var XHR = this.createXHR();             // 默认异步请求             if (async !== false) {                 async = true;             }             if (async) {                 // 异步请求                 XHR.onreadystatechange = function () {                     if (XHR.readyState === 4 && XHR.status === 200) {                         callback(XHR.responseText);                         // 销毁不用的对象，因为每次ajax请求都会创建一个新的XHR                         XHR = null;                     }                 }                 XHR.open("get", url, true);                 XHR.send(null);             } else {                 // 同步请求，返回结果前停止解析上下文                 XHR.open("get", url, false);                 XHR.send(null);                 callback(XHR.responseText);                 XHR = null;             }         },         post: function (url, option) {             var XHR = this.createXHR();                 data = option.data,                 callback = option.callback,                 async = option.async;             if (async !== false) {                 async = true;             }             if (async) {                 XHR.onreadystatechange = function () {                     if (XHR.readyState === 4 && XHR.status === 200) {                         callback(XHR.responseText);                         XHR = null;                     }                 }                 XHR.open("post", url, true);                 XHR.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");                 XHR.send(data);             } else {                 XHR.open("post", url, false);                 XHR.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");                 XHR.send(data);                 callback(XHR.responseText);                 XHR = null;             }         }     };     return ajax; }());

页面中常见的能够跨域进行http请求的有两个标签：<script src=""></script> && <img src="" />

jsonp(JSON with padding)的原理就是<script src=""></script>

// jsonp 是一种可以通过约定进行自定义回调函数的跨域脚本// 预先定义回调函数function handleResponse (data) {    // data is a json from remote-source-domain, now deal it in this.}var script = document.createElement("script");script.src = "http://remote-source-domain?callback=handleResponse";  // 远程脚本中的数据：handleResponse({data: "json", time: "2014-06-11"});document.getElementsByTagName("head")[0].appendChild(script);        // 当脚本被加载到文档中时，handleResponse函数立即执行

IMG

// 当img对象被赋予src属性时立即发生http请求var img = new Image();img.src = "http://remote-source-domain";  // 此时发生了http请求，远程资源被加载到本地// 图片的预加载var imgArr = ["0.jpg", "1.jpg", "2.jpg"],    len = imgArr.length,    i;for (i = 0; i < len; i++) {    img.src = imgArr[i];}