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]; }