`
sony-soft
  • 浏览: 1105264 次
文章分类
社区版块
存档分类
最新评论

Ajax首接触

 
阅读更多

很早以前,我在自己做项目的时候就使用过Ajax技术,但是当时对于其机制就是搞部清楚,所以也都是复用人家写的东西。所以当时也只是知道了Ajax这个东西,和Ajax可以给我的Web编程带来的好处罢了。今天,我在新的公司,由于需求的要求,必须使用Ajax,经过几天的实践,终于对Ajax又有了新的了解。虽然现在有很多人都使用prototype,里面也很好的封装了Ajax,但是对于部分项目而言(特别是那种很早以前就开始了,但是确永远做不完的项目,比如公司自产自用的ERP),没有必要每次去加载这么一个35KB左右的文件(毕竟效率上会受影响)。所以公司决定自己写。代码如下:

定义

varXMLHttpReq=false;

/**//*-------------------------------------Ajax基础函数-------------------------------------*/
//建立XMLHttpRequest对象
functionCreateXMLHttpRequest()
...{
if(window.XMLHttpRequest)
...{
//IsMozillaBrowse
XMLHttpReq=newXMLHttpRequest();
}

elseif(window.ActiveXObject)
...{
//IEBrowse
try
...{

XMLHttpReq
=newActiveXObject("Msxml2.XMLHTTP");
}

catch(e)
...{
try
...{

XMLHttpReq
=newActiveXObject("Microsoft.XMLHTTP");
}

catch(e)...{}
}

}

}


//Sendrequest'function.(POST)
//
Url:sendurladdress.
//
IsWait:Iswaittingorreturnnow.
//
ResponseFunction:processresponse'sfunction.
//
XmlObj:sendxmldataobject.
functionSendRequestPost(Url,IsWait,ResponseFunction,XmlObj)
...{
CreateXMLHttpRequest();
XMLHttpReq.open(
"POST",Url,IsWait);
XMLHttpReq.onreadystatechange
=ResponseFunction;//defineresponse'sfunction
XMLHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
XMLHttpReq.send(XmlObj);
//SendRequest
}


//Sendrequest'function.(GET)
//
Url:sendurladdress.
//
IsWait:Iswaittingorreturnnow.
//
ResponseFunction:processresponse'sfunction.
//
ArgString:sendurl'sargumentstring.
functionSendRequestGet(Url,IsWait,ResponseFunction,ArgString)
...{
CreateXMLHttpRequest();
XMLHttpReq.onreadystatechange
=ResponseFunction;//defineresponse'sfunction
if(ArgString==null)
...{
XMLHttpReq.open(
"GET",Url,IsWait);
}

else
...{
XMLHttpReq.open(
"GET",Url+"?"+ArgString,IsWait);
}

XMLHttpReq.send(
null);
}


//Invokefunction.
//
SendType:sendtype.(GETorPOST)
//
UrlPath:sendurladdress.
//
IsWait:Iswaittingorreturnnow.(trueorfalse)
//
DataType:sendargument'sdatatype.(DataMailorDataWork)
//
ResponseFunction:processresponse'sfunction.
functionRunSend(SendType,UrlPath,IsWait,DataType,ResponseFunction)
...{
varurl=unescape(UrlPath.replace(/+/g,""));
vardataobj=CreateData(DataType);
if(SendType=="POST")
...{
SendRequestPost(url,IsWait,ResponseFunction,dataobj);
}

elseif(SendType=="GET")
...{
SendRequestGet(url,IsWait,ResponseFunction,dataobj);
}

}

以后每次调用RunSend函数,SendType传入“POST”或者“GET”,UrlPath为Ajax获取页面地址,IsWait为是否等待请求,DataType为处理数据类型,ResponseFunction为响应函数。

//Creatdataobject.
functionCreateData(DataClassType)
...{
vardataObj
="";
switch(DataClassType)
...{
case"MailPage":
dataObj
=CreateMailPage();
break;
}

returndataObj;
}

functionf()
...{
if(XMLHttpReq.readyState==4)
...{
//judgementobjectstate
if(XMLHttpReq.status==200)
...{
alert(
"Ajax");
}

}

}

functionCreateMailPage()
...{
vardataObj="DataType=MailPage&page=1“;
returndataObj;
}

然后调用

RunSend( "GET",url,true,"MailPage",f );

就可以了

分享到:
评论

相关推荐

    深入浅出学习ajax

    这部分内容对于刚接触Ajax的读者来说非常重要,因为它不仅介绍了Ajax的基本概念,还概述了Ajax技术的组成元素,如HTML、JavaScript、DHTML和DOM等。 #### Ajax核心技术详解 - **使用JavaScript和Ajax发出异步请求*...

    网易云音乐一键签到、打卡听歌300首源码

    标题 "网易云音乐一键签到、打卡听歌300首源码" 涉及的是一个使用PHP编写的程序,旨在帮助用户自动完成网易云音乐的每日签到任务,并可能包括连续听歌300首的打卡功能。这个源码可能是通过模拟用户行为来与网易云...

    (免费)html+css+js 大一下课程设计 (首经贸)

    4. **AJAX**:异步JavaScript和XML,用于不刷新页面的情况下更新内容。 5. **JSON**:轻量级的数据交换格式,常用于服务器与客户端之间的数据传输。 学生在完成这个课程设计时,不仅需要理解这三个核心技术,还需要...

    jQuery基础教程(第四版)

    曾为国内首本jQuery权威教程,一版再版,累计重印14次,不可错过的实战类经典技术著作! jQuery API网站的维护者亲自撰写 作为最新升级版,本书涵盖jQuery 1.10.x和jQuery 2.0.x。本书前6章以通俗易懂的方式讲解了...

    计算机系校外实习报告.doc

    ExtJS是一个强大的JavaScript库,专门用于构建富客户端的AJAX应用程序,即RIA(Rich Internet Applications)。它与后端技术无关,可以配合.Net、Java、PHP等多种开发语言,提供丰富的用户界面。ExtJS最初基于YUI库...

    ASP.NET的简易BBS论坛

    在这个项目中,我们主要会接触到以下几个关键知识点: 1. ASP.NET基础:ASP.NET是Microsoft开发的一个用于构建Web应用程序的框架,它允许开发者使用.NET Framework的多种编程语言(如C#、VB.NET)来创建动态网页。...

    HTML作业-仿网易云音乐项目.rar

    例如,可以使用`<nav>`创建导航菜单,`<ul>`和`<li>`构建列表项,`<audio>`标签用于嵌入音频播放功能,而`<button>`则用于控制播放、暂停、上一首、下一首等操作。 此外,为了实现更丰富的交互效果,我们还会涉及到...

    248489485690802唯品会.zip

    唯品会作为中国知名的在线折扣零售平台,其登录页面是用户接触平台的第一步,因此在用户体验、安全性以及功能实现上都有着严格的要求。本文将深入探讨唯品会登录页面的设计理念以及背后的技术实现。 1. 用户界面...

    微软最新基于SAAS的架构Crab(源代码+演示安装包+文档)

    作为微软最新的SaaS应用案例,Crab用到了大部分微软一些最新的技术,如:用 Asp.net ajax 1.0、web parts、themes对页面View进行优化,用WCF(Windows Communication Foundation)对Services进行封装,用WF(Windows ...

    ebsco.github.io

    登录页面作为用户接触系统的首站,设计时需要考虑到用户体验、安全性、易用性和品牌一致性。 【标签】"JavaScript" 表示这个项目主要使用JavaScript编程语言进行开发。JavaScript是Web开发中的关键技术,用于实现...

    灯塔网络笔记

    随着前端框架的发展,JavaScript的重要性日益凸显,你可能会接触到React、Vue或Angular等流行的框架,了解它们如何简化开发流程。 除此之外,"灯塔网络笔记"也会涉及到Web性能优化。Lighthouse审计涵盖了首屏加载...

    slideshow-maker:Android 上的官方幻灯片制作应用程序的登陆页面

    由于登陆页面是用户与应用的第一接触点,因此JavaScript的运用至关重要,它可以帮助开发者创建引人入胜的视觉效果,同时保持页面的响应性和可访问性。 首先,JavaScript可以用来创建动态登陆表单。例如,它可以实时...

    webrecettes:Projet S2网站

    为了存储和管理数据,项目可能会使用AJAX(Asynchronous JavaScript and XML)进行异步通信,向服务器请求数据或发送用户数据。尽管现代Web应用更倾向于使用Fetch API或axios等库,但核心思想是相同的:在不刷新页面...

    ShopWarehouse:库存物资管理系统

    这个功能可能会有多个子页面,如商品列表、商品详情和库存统计,需要前端与后端的紧密协作,利用AJAX进行异步数据更新,提供流畅的用户体验。 个人中心通常包含了用户的个人信息、设置选项以及交易记录等。这部分的...

    我的第一个网站

    在这个过程中,学生或爱好者会接触到网站开发的基础概念,如HTML、CSS和PHP等技术。 【描述】"我的第一个网站"的描述暗示了这个项目可能是关于网页设计和开发的学习过程。在建立一个网站时,首先需要理解网站的基本...

Global site tag (gtag.js) - Google Analytics