`
icarusliu
  • 浏览: 237223 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

《实战AJAX》中重构的xmlhttpRequest调用的使用方法

阅读更多

书中前三章重构了xmlhttpRequest的调用,很不错的基本框架,代码如下:
  var net=new Object();

net.READY_STATE_UNINITIALIZED=0;
net.READY_STATE_LOADING=1;
net.READY_STATE_LOADED=2;
net.READY_STATE_INTERACTIVE=3;
net.READY_STATE_COMPLETE=4;


/*--- content loader object for cross-browser requests ---*/
net.ContentLoader=function(url,onload,onerror,method,params,contentType){
  this.req=null;
  this.onload=onload;
  this.onerror=(onerror) ? onerror : this.defaultError;
  this.loadXMLDoc(url,method,params,contentType);
}

net.ContentLoader.prototype.loadXMLDoc=function(url,method,params,contentType){
  if (!method){
    method="GET";
  }
  if (!contentType && method=="POST"){
    contentType='application/x-www-form-urlencoded';
  }
  if (window.XMLHttpRequest){
    this.req=new XMLHttpRequest();
  } else if (window.ActiveXObject){
    this.req=new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (this.req){
    try{
      var loader=this;
      this.req.onreadystatechange=function(){
        net.ContentLoader.onReadyState.call(loader);
      }
      this.req.open(method,url,true);
      if (contentType){
        this.req.setRequestHeader('Content-Type', contentType);
      }
      this.req.send(params);
    }catch (err){
      this.onerror.call(this);
    }
  }
}


net.ContentLoader.onReadyState=function(){
  var req=this.req;
  var ready=req.readyState;
  var httpStatus=req.status;
  if (ready==net.READY_STATE_COMPLETE){
    if (httpStatus==200 || httpStatus==0){
      this.onload.call(this);
    }else{
      this.onerror.call(this);
    }
  }
}

net.ContentLoader.prototype.defaultError=function(){
  alert("error fetching data!"
    +"\n\nreadyState:"+this.req.readyState
    +"\nstatus: "+this.req.status
    +"\nheaders: "+this.req.getAllResponseHeaders());
}
本质上就是以OO的方式构造了一个net对象,通过它来实现AJAX调用,构造函数必需的就两个参数:URL和回调函数(也就是你要处理服务器返回文档的函数),其他就是参数,方法,返回类型等。
写了一个简单的例子调用这个框架:



window.onload=function(){
var loader1=new net.ContentLoader("data.txt",displayResult);
}
function displayResult(){
   var tmp=document.getElementById("hello");
   var txt=this.req.responseText;
   alert(txt);
   var childEl=document.createElement("div");
   var textNode=document.createTextNode(txt);
   childEl.appendChild(textNode);
   tmp.appendChild(childEl);
}




此例中的回调函数就是displayResult()方法,url为同个文件夹下面的data.txt,很简单的例子,显示data.txt中的内容。在其他函数中,你完全可以通过this来调用net对象,如上例中this.req.responseText,具体不再详述

 

分享到:
评论

相关推荐

    重构-Ajax 教程

    在网页重构过程中,Ajax可以用于提升用户体验,例如动态加载内容、表单提交、实时搜索建议等。通过将Ajax请求集成到用户交互事件中,可以减少不必要的页面跳转,使得用户操作更为流畅。 **5. 网页重构** 网页重构是...

    使用Ajax和Web Service重构网上书店(Ajax Web Service)指导学习

    在重构网上书店时,Web Service可以作为后端服务,提供书籍查询、购买、评论等业务功能的接口,供前端Ajax调用。 以下是关于使用Ajax和Web Service重构网上书店的详细知识点: 1. **Ajax基础**:理解...

    使用Ajax和Web Service重构网上书店(PPT)

    **Ajax与Web Service在重构网上书店中的应用** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新,...

    使用Ajax和Web Service重构网上书店(Ajax Web Service)

    **Ajax与Web Service在重构网上书店中的应用** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新,...

    ajax省市级联

    - 使用jQuery、Vue.js、React.js等库或框架可以简化Ajax调用和DOM操作。 - 使用Promise或async/await处理异步操作,提高代码可读性。 - 考虑缓存策略,如浏览器缓存或客户端存储,减少不必要的服务器请求。 - 对于...

    AJAX 与 DWR框架

    1. **创建XMLHttpRequest对象**:根据浏览器类型创建合适的XHR实例,例如在IE中使用ActiveXObject,在非IE浏览器中使用原生XMLHttpRequest构造函数。 2. **设置onreadystatechange回调函数**:当请求状态发生变化时...

    转ajax

    在Struts框架中使用Ajax技术,可以让Web应用程序实现更高效的交互和动态更新,提升用户体验。Ajax全称为“异步JavaScript和XML”,它允许在不刷新整个页面的情况下与服务器交换数据并局部更新页面。这种方式极大地...

    看看如何在Struts应用中施展AJAX魔法

    在Struts应用中集成AJAX,首先需要在JSP页面中引入JavaScript代码,以利用XMLHttpRequest对象。这通常意味着在页面中添加AJAX库,如jQuery,它简化了AJAX操作并提供了良好的浏览器兼容性。然后,定义JavaScript函数...

    简单的网页聊天ajax+js+xml

    【标题】"简单的网页聊天ajax+js+xml"揭示了这个项目是使用XMLHttpRequest(通常简称为AJAX)、JavaScript(JS)以及XML这三种技术来创建一个基础的网页聊天应用。AJAX是一种在不刷新整个页面的情况下,与服务器交换...

    IDEA+SSM+AJAX搭建测试环境小例子

    在本实例中,你可能会看到jQuery库或者原生JavaScript的XMLHttpRequest对象用于发送AJAX请求,以及处理返回的数据。 至于**IDEA**,这是JetBrains开发的一款Java集成开发环境,以其强大的代码自动完成、重构工具和...

    Ajax and DWR资料

    1. **自动暴露Java方法**:DWR允许开发者直接在JavaScript中调用服务器端的Java方法,就像它们是本地函数一样,极大地简化了客户端和服务器端的交互。 2. **安全和缓存机制**:DWR提供了一套安全机制,防止未经授权...

    java web 项目案例

    接着,案例中提到了实现Ajax功能的关键技术点,即通过Ajax重构技术来优化代码。随着项目规模的增加,JavaScript代码可能会变得臃肿,此时,代码重构是提高代码质量和可维护性的有效手段。重构步骤如下: 1. 创建一...

    JavaScript实战 源代码

    4. **函数**:查看函数的定义和调用,以及函数作为值和参数的使用,理解高阶函数和闭包的概念。 5. **对象与原型**:理解JavaScript中的对象创建和原型继承机制,以及如何使用构造函数和原型链来实现面向对象编程。...

    DWR和strut.docx

    因此,要整合DWR和Struts,通常需要对Action进行重构,去除Struts特有的部分,只保留业务逻辑方法,然后通过DWR直接调用这些方法。\n\n**示例应用架构**\n一个简单的DWR和Struts结合的应用可能包含以下组件:\n\n1. ...

    Thinkphp5框架ajax接口实现方法分析

    本文将深入探讨ThinkPHP5框架中ajax接口的实现方法,并通过实例来展示如何进行操作。 ### ThinkPHP5框架概述 ThinkPHP是一个快速、简单的面向对象的轻量级PHP开发框架,基于MVC设计模式,它封装了底层的HTTP协议,...

    用Promise解决多个异步Ajax请求导致的代码嵌套问题(完美解决方案)

    在`action1`的请求成功后,`someData.attr1`才会被设置,然后在`action2`的请求中使用。如果这两个请求不是按照预期的顺序执行,`someData.attr1`可能未被正确设置,导致`action2`的失败。此外,每个`$.ajax`请求中...

    最新Ext js 开发工具(IDE)

    Ext JS内置了Ajax支持,通过使用XMLHttpRequest对象,开发者可以轻松地实现后台数据交互,提高用户体验。 3. **DWR (Direct Web Remoting)**:这是一种JavaScript库,用于在浏览器和Java服务器之间进行双向通信。...

    JavaScript+宝典(第四版)

    - XMLHttpRequest对象:掌握使用XMLHttpRequest进行异步请求的方法。 - Fetch API:学习新的Fetch API,了解其优点和用法。 5. **JavaScript与Web API** - Web存储:探索Web Storage(包括localStorage和...

Global site tag (gtag.js) - Google Analytics