这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 javascript 跨域请求包装函数与用法, 结合实例形式分析了 javascript 基于 ajax 的跨域请求封装函数与相关使用技巧, 需要的朋友可以参考下
本文实例讲述了 javascript 跨域请求包装函数与用法。分享给大家供大家参考,具体如下:
一、源码
- // 定义AJAX跨域请求的JSON
- (function() {
- if (typeof window.$JSON == 'undefined') {
- window.$JSON = {};
- };
- $JSON._ajax = function(config) {
- config = config[0] || {};
- this.url = config.url || '';
- this.type = config.type || 'xhr';
- this.method = (this.type == 'json') ? 'GET': config.method.toUpperCase() || 'GET';
- this.param = config.param || null;
- this.callback = config.callback || {};
- this.XHR = null;
- if (typeof window._$JSON_callback == 'undefined') {
- window._$JSON_callback = {};
- }
- this._createRequest();
- };
- $JSON._ajax.prototype = {
- // 缓存XHR请求,再次再调用时不再进行判断
- _createXHR: function() {
- var methods = [function() {
- return new XMLHttpRequest();
- },
- function() {
- return new ActiveXObject('Msxml2.XMLHTTP');
- },
- function() {
- return new ActiveXObject('Microsoft.XMLHTTP');
- }];
- for (var i = 0,
- l = methods.length; i < l; i++) {
- try {
- methods[i]();
- } catch(e) {
- continue;
- }
- this._createXHR = methods[i];
- return methods[i]();
- }
- },
- // 建立XHR请求
- _createRequest: function() {
- return (this.type == 'json') ? this._setJSONRequest() : this._setXHRRequest();
- },
- _setXHRRequest: function() {
- var _this = this;
- var param = '';
- for (var i in this.param) {
- if (param == '') {
- param = i + '=' + this.param[i];
- } else {
- param += '&' + i + '=' + this.param[i];
- }
- }
- this.XHR = this._createXHR();
- this.XHR.onreadystatechange = function() {
- if (_this.XHR.readyState == 4 && _this.XHR.status == 200) {
- _this.callback.success(_this.XHR.responseText);
- } else {
- _this.callback.failure('重新操作');
- }
- };
- this.XHR.open(this.method, this.url, true);
- this.XHR.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
- this.XHR.send(param);
- },
- // 建立JSON请求
- _setJSONRequest: function() {
- var head = document.getElementsByTagName('head')[0];
- var script = document.createElement('script');
- var fun = this._setRandomFun();
- var _this = this;
- var param = '';
- for (var i in this.param) {
- if (param == '') {
- param = i + '=' + this.param[i];
- } else {
- param += '&' + i + '=' + this.param[i];
- }
- }
- script.type = 'text/javascript';
- script.charset = 'utf-8';
- if (head) {
- head.appendChild(script);
- } else {
- document.body.appendChild(script);
- }
- // data:为回调函数所需要传入的参数
- // 定义页面中的回调函数,如例子中的"jsonpCallback()"方法
- window._$JSON_callback[fun.id] = function(data) {
- _this.callback.success(data);
- setTimeout(function() {
- delete window._$JSON_callback[fun.id];
- script.parentNode.removeChild(script);
- },
- 100);
- };
- script.src = this.url + '?callback=' + fun.name + '&' + param;
- },
- // 生成随机JSON回调函数
- _setRandomFun: function() {
- var id = '';
- do {
- id = '$JSON' + Math.floor(Math.random() * 10000);
- } while ( window . _$JSON_callback [ id ]) return {
- id: id,
- name: 'window._$JSON_callback.' + id
- }
- }
- };
- window.$JSON.ajax = function() {
- return new $JSON._ajax(arguments);
- }
- })();
二、调用方式
- //调用方式
- var ajax = new $JSON.ajax({
- url : 'http://www.sina.com/api',
- type : 'json',
- method : 'get',
- param: {
- bar: true
- },
- callback : {
- success : function(data){
- console.log( '55668',data);
- },
- failure : function(error){
- alert(errow);
- }
- }
- });
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0524/330671.html