首先,我很清楚 jQuery , zepto 等框架的包装并没有问题。所以虽然我做得还挺符合 jQuery 规范的,但其实我做得这个事情并没有实际上的生产意义,只能用于令人更了解实现侧的过程,同时对我个人而言算是一种娱乐……
对于我做得项目,只有很轻小以致于整个项目代码也到不了 jquery-min.js 文件大小的情况,才会使用我自写的这个发起器,并且不会用源码版,会用压缩版。另外我觉得做一个前后端连用的框架,所有请求都通过 jsonp 的方式,也许反倒可以简洁一些。
var _shaneAjaxRef = { }; /** * @author Shane Loo Li * @version 1.1.0, 2019-7-18 Thursday * @param configObj { } * url * type * data * async * dataType xml, html, script, text will return text itself. json wil return object. jsonp will run return text as JavaScript. * success function * error function * complete function */ var shaneAjax = function(configObj) { if (!configObj || !configObj.url) { return; } try { if (configObj.dataType && configObj.dataType == 'jsonp') { _shaneAjaxRef.goJsonp(configObj); } else { _shaneAjaxRef.goRealAjax(configObj); } } catch (err) { if (configObj.error) { configObj.error(xmlhttp, '' + err, err); } if (configObj.complete) { configObj.complete(xmlhttp, 'error'); } } }; _shaneAjaxRef.buildNewXmlhttp = function() { return window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); } _shaneAjaxRef.buildDataStr = function(data) { if (!data) return ''; var result = ''; for (var key in data) { if (data[key] instanceof Array) { var values = data[key]; for (var i = -1; ++i != values.length; ) { if (result) { result += '&'; } result += key + '=' + values[i]; } } else { if (result) { result += '&'; } result += key + '=' + data[key]; } } return result; }; _shaneAjaxRef.goJsonp = function(configObj) { var i = -1; while (++i != 65536 && window['jsonp' + i]) { } window['jsonp' + i] = function(responseDataObj) { if (configObj.success) { configObj.success(responseDataObj, 'success'); } delete window['jsonp' + i]; }; var reqUrl = configObj.url; var dataStr = _shaneAjaxRef.buildDataStr(configObj.data); reqUrl += (reqUrl.indexOf('?') == -1 ? '?' : '&') + 'callback=jsonp' + i; if (dataStr) { reqUrl += '&' + dataStr; } var d_script = document.createElement('script'); d_script.setAttribute('src', reqUrl); document.getElementsByTagName('head')[0].appendChild(d_script); }; _shaneAjaxRef.goRealAjax = function(configObj) { var xmlhttp = _shaneAjaxRef.buildNewXmlhttp(); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4) { var success = xmlhttp.status == 200; if (success) { if (configObj.success) { var dataType = configObj.dataType ? configObj.dataType : 'json'; switch (dataType) { case 'xml': case 'html': case 'script': case 'text': configObj.success(xmlhttp.responseText, 'success'); break; case 'json': configObj.success(JSON.parse(xmlhttp.responseText), 'success'); break; case 'jsonp': configObj.success(eval(xmlhttp.responseText), 'success'); } } } else { if (configObj.error) { configObj.error(xmlhttp, 'http status = ' + xmlhttp.status, null); } } if (configObj.complete) { configObj.complete(xmlhttp, success ? 'success' : 'error'); } } }; var reqMethod = configObj.type ? configObj.type : 'GET'; var reqUrl = configObj.url; var dataStr = _shaneAjaxRef.buildDataStr(configObj.data); if (reqMethod == 'GET' && dataStr) { reqUrl += (reqUrl.indexOf('?') == -1 ? '?' : '&') + dataStr; } var reqAsync = configObj.async === false ? false : true; xmlhttp.open(reqMethod, reqUrl, reqAsync); if (reqMethod == 'POST' || reqMethod == 'PUT') { xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); } if ((reqMethod == 'POST' || reqMethod == 'PUT') && dataStr) { xmlhttp.send(dataStr); } else { xmlhttp.send(); } };
下面是一个测试程序。如果用 jsonp 就可以访问,否则不行。
var test = function() { console.log(1); // https://www.baidu.com/s?wd=ajax&rsv_spt=1&rsv_iqid=0xf9544c340001dd09&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&rqlang=cn&tn=baiduhome_pg&rsv_enter=1&oq=jQuery%2520ajax&inputT=1899&rsv_t=25bdncCkCLyr12l2gBax5GxF5yjzYUnHj2M%2FMv%2Fd1YsIlJpcW4%2BYljBcIhDw8f9CnkkY&rsv_pq=8e82b6400002164e&rsv_sug3=32&rsv_sug1=20&rsv_sug7=101&rsv_sug2=0&rsv_sug4=2655 shaneAjax({ type: 'GET', url: 'http://www.baidu.com/s', data: { wd: 'ajax', rsv_spt: 1, rsv_iqid: '0xf9544c340001dd09', issp: 1, f: 8, rsv_bp: 1, rsv_idx: 2, ie: 'utf-8', rqlang: 'cn', tn: 'baiduhome_pg', rsv_enter: 1, oq: 'jQuery%20ajax', inputT: 1899, rsv_t: '25bdncCkCLyr12l2gBax5GxF5yjzYUnHj2M/Mv/d1YsIlJpcW4+YljBcIhDw8f9CnkkY', rsv_pq: '8e82b6400002164e', rsv_sug3: 32, rsv_sug1: 20, rsv_sug7: 101, rsv_sug2: 0, rsv_sug4: 2655 }, dataType: 'jsonp', success: function(result) { console.log(result); }, complete: function() { console.log('complete'); } }); console.log(2); };
相关推荐
在创建一个Ajax简易在线聊天室时,我们通常会涉及到以下几个关键知识点: 1. **HTML 结构**:首先,我们需要建立一个基本的HTML页面结构,用于展示聊天界面。这包括输入框(用户输入消息)、发送按钮以及一个用于...
在这个“Ajax开发的简易聊天室”项目中,我们将深入探讨如何利用Ajax技术构建一个实时的、交互式的在线聊天平台。 ### 1. 基本架构 一个基本的Ajax聊天室通常包含以下组件: - **前端界面**:展示聊天内容、...
User Interface Library)库的一个版本,该版本重点强调了AJAX(Asynchronous JavaScript and XML)技术的使用,同时也涉及到Java和JavaScript的交互。YUI是一个开源的JavaScript和CSS库,用于创建互动性和响应式的...
在本实例中,我们看到的是一个由个人开发者用Eclipse IDE编写的Ajax应用。 在Eclipse中开发Ajax,通常会涉及到以下几个关键组件: 1. **JavaScript**: 是Ajax的核心,负责创建XMLHttpRequest对象,这是Ajax通信的...
Ajax简易聊天室,运行于ASP环境,用Access存储聊天记录,本程序纯属为了学习,请不要当成功能强大的聊天室来用,呵呵,只是想研究一下Ajax练手的,实现了聊天室的基本雏形,可以无刷新发送消息,数据库定时更新,...
JavaScript会捕获这个事件,然后使用XMLHttpRequest发起一个异步请求到服务器。在服务器端,.NET代码处理请求,可能查询数据库或其他操作,然后返回结果。JavaScript接收到响应后,更新DOM以反映变化,用户看到的是...
JavaScript 和 AJAX 是 web 开发中的两个重要概念,它们在创建动态和交互式的网页方面起着至关重要的作用。这个"Javascript & Ajax 中文手册"是由知名的在线学习平台 w3school 提供的,它为学习者提供了丰富的教程和...
下面是一个简单的示例,展示了如何使用JavaScript创建一个异步请求,并处理响应数据。 ```javascript function getXMLHttpRequest() { var req = null; if (window.XMLHttpRequest) { // Mozilla/Safari req = ...
1. **jQuery**:一个流行的 JavaScript 库,简化了 DOM 操作和 AJAX 调用,加速开发进程。 2. **Promise 和 async/await**:现代 JavaScript 中用于异步编程的新工具,使得异步代码更易读、更易于管理。 3. **前端...
例如,如果你在事件处理程序中注册了一个JavaScript函数,这个函数可能在AJAX更新中不会被执行,因为页面的生命周期和事件处理流程有所不同。 解决这个问题的一种方法是利用AJAX的PageMethods或WebMethods特性,...
“JavaScript & Ajax 应用开发”是一个关于前端开发的重要知识点。掌握这些技术可以帮助开发者创建出更加动态、交互性更强的网页应用。虽然提供的内容中并没有给出具体的书籍信息或章节,但以上介绍的知识点是学习...
在本案例中,“Ajax文章评论系统”是一个基于ASP(Active Server Pages)开发的交互式评论功能,允许用户无需跳转页面就能发表、查看评论,提高了用户体验。 1. **Ajax基础**:Ajax的核心是JavaScript异步通信,它...
jQuery是一个流行的JavaScript库,简化了DOM操作、事件处理、动画制作和Ajax交互。它提供了简洁的API,使得开发者能够用更少的代码实现相同的功能。例如,`$(selector).click(function() {...})`用于绑定点击事件,`...
【标题】"用AJAX编写一个简单的相册"涉及到的核心技术是AJAX(Asynchronous JavaScript and XML),它是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。这使得用户可以与网页进行更流畅、更快捷的交互,...
《JavaScript和AJAX_视觉快速入门指南》是一本专为初学者和中级开发者设计的教程,旨在帮助读者深入理解和掌握JavaScript编程语言以及AJAX(异步JavaScript和XML)技术。这本书通过直观、易于理解的方式,提供了丰富...
本教程将引导初学者深入理解AJAX(异步JavaScript和XML)技术,通过一个实际的在线聊天程序项目来阐述其核心概念和应用。这个简易聊天程序的实现不依赖任何第三方的AJAX库,如jQuery或Prototype,而是完全依靠原生的...
在“简单的Ajax聊天室”项目中,我们看到开发者运用Ajax技术构建了一个无需刷新页面即可实现实时聊天的环境。用户可以在聊天室中输入消息并发送,其他在线用户可以即时看到新消息,整个过程不会中断当前页面的显示。...
"AJAX写的ASP简易QQ聊天程序"是一个使用了AJAX(Asynchronous JavaScript and XML)技术和ASP(Active Server Pages)编程语言开发的简单即时通讯应用,旨在模仿QQ聊天的功能。这个程序的核心是利用AJAX实现页面无...