`
objectbean
  • 浏览: 14716 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

11.localXHR支持本地使用Ajax

    博客分类:
  • Ext
阅读更多
Ajax是不能在本地文件系统中使用的,必须把数据放到服务器上。无论是IIS、Apache、 Tomcat,还是你熟悉的其他服务器,
只要支持HTTP协议,就可以使用EXT中的Ajax。
至于本地为何不能用Ajax,主要是因为Ajax要判断HTTP响应返回的状态,只有status=200时才认为这次请求是成功的。
所以,localXHR做的就是强行修改响应状态,让Ajax可以继续下去。
下面我们来分析一下localXHR的源代码。
 > 加入了一个forceActiveX属性,默认是false,它用来控制是否强制使用activex,activex是在IE下专用的。
 > 修改createXhrObject函数,只是在最开始处加了一条判断语句,如下所示:
  1. if(Ext.isIE7 && !!this.forceActiveX){throw("IE7forceActiveX");}    
> 增加了getHttpStatus函数,这是为了处理HTTP的响应状态,如下代码:
  1. getHttpStatus: function(reqObj){  
  2.     var statObj = {  
  3.         status:0  
  4.         ,statusText:''  
  5.         ,isError:false  
  6.         ,isLocal:false  
  7.         ,isOK:false  
  8.     };  
  9.     try {  
  10.         if(!reqObj)throw('noobj');  
  11.         statObj.status = reqObj.status || 0;  
  12.    
  13.         statObj.isLocal = !reqObj.status && location.protocol == "file:" ||  
  14.                            Ext.isSafari && reqObj.status == undefined;  
  15.    
  16.         statObj.statusText = reqObj.statusText || '';  
  17.    
  18.         statObj.isOK = (statObj.isLocal ||  
  19.                         (statObj.status > 199 && statObj.status < 300) ||  
  20.                          statObj.status == 304);  
  21.    
  22.     } catch(e){  
  23.         //status may not avail/valid yet.  
  24.         statObj.isError = true;  
  25.     }  
  26.    
  27.     return statObj;  
  28. },  
它为状态增添了更多语义,status表示状态值,statusText表示状态描述,isError表示是否有错误, isLocal表示是否在本地进行Ajax访问,isOK表示操作是否成功。 判断isLocal是否为本地的有两种方法:reqObj没有status,而且请求协议是file:;浏览器是Safari, 而且reqObj.status没有定义。 statObj中的isOK属性用来判断此次请求是否成功。 判断请求是否成功的条件很多,例如:isLocal的属性为true、响应状态值在199~300之间、响应状态值是304等。 如果处理过程中出现了异常,就会将isError属性设置为true,最后会把配置好的statObj对象返回,等待下一个步骤的处理。 localXHR.js对handleTransactionResponse函数进行了简化。 因为增加的getHttpStatus函数很好地封装了与请求相关的各种状态信息,所以在handleTransactionResponse函数中我们不会 看到让人头晕目眩的响应状态代码。 取而代之的是isError和isOK这些更容易理解的属性,localXHR.js直接使用这些属性来处理响应。 createResponseObject函数被大大强化了。 其实前半部分都是一样的,localXHR.js中对isLocal做了大量的处理,响应中的responseText可以从连接中获得。 如果需要XML,它就使用ActiveXObject("Microsoft.XMLDOM")或new DOMParser()把responseText解析成XML放到response里, 响应状态也是重新计算的,这样就能让Ajax正常调用了。 最后处理的是asyncRequest函数,如果在异步请求时出现异常,就调用handleTransac- tionResponse返回响应, 然后根据各种情况稍微修改header属性。 我们来看看下面这行代码:
  1. Ext.lib.Ajax.forceActiveX = (document.location.protocol == 'file:');                  
如果协议是file:,就强制使用activex。
分享到:
评论

相关推荐

    ext-2.0.2含localXHR.rar

    修改了帮助文档的index.html, 包含localXHR.js 能够在本地直接打开帮助文档!

    localXHR.js

    一个js脚本. 需要的人自然知道它是干什么的,呵呵 共享给需要的人

    Ajax-xhr.js.zip

    Ajax-xhr.js.zip,js是使用xmlhttprequest发出ajax/http请求的库()。,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新...

    xhr.base:使用xhr调用JQuery ajax

    xhr.base 具有functin的库使用xhr来调用Ajax JQuery。 前提条件 jQuery-3.4.1.min或+ sweetalert2-8.16.3.all.min或+

    localXHR

    Ext2.0文档下载后在本地不能阅读,下载localXHR.js放在docs目录下然后在index.html中加入&lt;script src="localXHR.js"&gt;,要放在extall.js后面。

    Ajax-xhr-chat.zip

    Ajax-xhr-chat.zip,基于ajax xmlhttprequest(xhr)的简单聊天。,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载...

    jquery.ajax.progress:允许将事件处理程序绑定到 XHR2 上传下载进度事件

    jquery.ajax.progress 允许将事件处理程序绑定到 XHR2 上传/下载进度事件。 基于 nebirhos 脚本 ( ) 这些事件是: downloading和uploading downloading事件的示例代码: var jqXHR = $ . get ( '...

    chrome.sockets.tcp.xhr:使用 Chrome Sockets 的 XMLHttpRequest,基于 https

    使用 Chrome 套接字的 XMLHttpRequest 这是在 Chrome 浏览器上使用 chrome.sockets.tcp 的 XMLHttpRequest 类。 从分叉。 请检查文档。 增强功能 获取完整的响应数据,而不是只获取第一段数据。 从响应头添加...

    Ajax-tiny-xhr.zip

    Ajax-tiny-xhr.zip,在es6承诺中封装ajax方法的小型库。,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载网页的情况...

    jquery.ajax:从jQuery提取ajax

    只能使用jQuery的与Ajax相关的功能。 描述 我正在使用jQuery的自定义版本来删除ajax以外的模块。 只能使用以下内容。 阿贾克斯 阿贾克斯/ XHR 阿贾克斯/脚本 ajax / jsonp 推迟 要执行的任务 grunt custom:-css,...

    ajaxupload

    1.修复之前存在的一些bug, 2.修复了对ie的兼容, 3.增加了对jquery10的兼容 handleError: function (s, xhr, status, e) { ... jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e]); } },

    ajax知识网络图 .xmind格式

    Ajax 作用: ...发送请求:xhr.send(); 获取服务器端给客户端的响应数据: xhr.onreadystatechange = function( //0:open()没有被调用//1:open()正在被调用 //2:send()正在被调用//3:服务端正在返回

    没有XHR,Ajax精彩依旧

    工作室交流会的ppt,具体是讲通过动态修改html来借用浏览器的实时渲染特性来实现资源的异步下载以及一些应用。

    Ajax-vuejs-ajax.zip

    Ajax-vuejs-ajax.zip,它是一个XHR插件,适用于Vue.js 2.x及以上版本的特定功能。支持文件上传,异步和动态组件插件,HTML5pushState。,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、...

    ajax.js:跨浏览器Ajax请求

    Ajax.js 跨浏览器XHR包装器,用于规范化的Ajax请求。 Ajax.js具有0个外部依赖关系,并且可以在所有适当的浏览器以及IE&gt; = 9中使用。用法您可以使用ajax ./src/ajax.js的es6源版本,也可以使用已编译的es5版本./dist/...

    对异步请求xhr、ajax、axios、fetch的区别比较

    1. XMLHttpRequest对象 在浏览器中,最开始与服务器交换数据的方式则是通过XMLHttpRequest对象。【它可以使用JSON、XML、HTML和Text文本等格式发送和接收数据。... xhr = new XMLHttpRequest() } else if (w

    Ajax技术课件,保密资料下载

    if(xhr.readyState==4&&xhr.status==200){ xxxxx } } xhr.status 返回结果的状态码 200 正常返回的状态码 404 500 --------------------------------------------- 返回局部内容 xhr.responseText ...

    ajax兼容所有浏览器详解

    详细介绍了使用ajax如何兼容各种浏览器

    ajax高级程序设计 源代码

    本书是Ajax 领域的名著,详细讲解了帧、JavaScript、cookie、XML 和XHR 如何与Ajax 相关,以及具体的Ajax 技术实现;介绍了各种请求类型,给出了具有一定深度的有关如何以及何时在Web 站点或Web 应用程序中使用Ajax ...

Global site tag (gtag.js) - Google Analytics