ajax使用
/** ajax的使用*/
function displayMessage(){
var ajaxUrl="toPlay!getTopTwoAssetBean.action"; //ajax访问的地址
rtspAjax = new AJAX_OBJ(ajaxUrl,responseFunction); //调用我们ajax.js中的代码 responseFunction为ajax回调函数
rtspAjax.errorhandle=RequestError; //调用ajax异常时,处理函数
rtspAjax.requestData();
}
/**处理ajax请求返回数据*/
function responseFunction(){
var txt = rtspAjax.getText();
alert(txt); //打印出ajax请求的内容
}
/**处理ajax请求失败函数*/
function RequestError(){
alert("获取数据超时,请检查网络");
}
ajax.js
/*============================================AJAX 对象==================================
* 作用:通过get或post的方式请求异步(同步)数据
* @param{string} url: 将要去请求的路径
* @param{function} callback: 回调函数,即请求成功时所做的操作,带一个参数:new XMLHttpRequest()的返回值
* @param{boolean} asyn: 是否异步调用,默认为true:异步,反之同步调用
* @param{number} timer: 请求失败时,隔timer时间重新请求一次
* @param{number} retrieval: 请求失败时,重新请求的次数,当为 -1 时,表示无数次
* @param{function} errorhandle: 请求失败时,所做的处理
*/
var objPool = [];
objPool[0] = createXMLHttpRequest();
objPool[1] = createXMLHttpRequest();
objPool[2] = createXMLHttpRequest();
objPool[3] = createXMLHttpRequest();
objPool[4] = createXMLHttpRequest();
objPool[5] = createXMLHttpRequest();
function AJAX_OBJ(url, callback, asyn, timer, retrieval, errorhandle){
this.num = 0;
this.url = url;
this.urlParameters = "";
this.callback = callback;
this.errorhandle = errorhandle || this.errorHandle;
this.timer = timer || 20000;
this.timeout = -1;
this.retrieval = retrieval || 1;
this.asyn = typeof asyn =="undefined"?true:asyn;
this.xmlHttp = this.getInstance();
this.backParam = null;
this.timerout;
}
//请求实例
AJAX_OBJ.prototype.getInstance = function(){
/*var xmlh = null;
xmlh = new XMLHttpRequest();
return xmlh;*/
for (var i = 0; i < objPool.length; i ++)
{
if ( objPool[i].readyState == 4||objPool[i].readyState == 0)
{
return objPool[i];
}
}
objPool[objPool.length] = createXMLHttpRequest();
return objPool[objPool.length - 1];
}
function createXMLHttpRequest(){
var xmlh = null;
if(window.XMLHttpRequest){
xmlh = new XMLHttpRequest();
}else if(window.ActiveXObject){
xmlh = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlh;
}
//用GET方式请求数据
AJAX_OBJ.prototype.requestData = function(){
var request_url = this.url + this.urlParameters;
var self = this;
this.xmlHttp.onreadystatechange = function(){
self.stateChanged();
};
this.xmlHttp.open("GET", request_url, this.asyn);
this.xmlHttp.send(null);
}
//用POST方式请求数据
AJAX_OBJ.prototype.requestDataPost = function() {
this.xmlHttp.open("POST", this.url, this.asyn);
var self = this;
this.xmlHttp.onreadystatechange = function() {
self.stateChanged();
}
this.xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
this.xmlHttp.setRequestHeader("Content-length", this.urlParameters.length);
this.xmlHttp.setRequestHeader("Connection", "close");
this.xmlHttp.send(this.urlParameters);
return 0;
}
//请求数据的处理
AJAX_OBJ.prototype.stateChanged = function(){
var self=this;
if(this.xmlHttp.readyState == 2) this.timerout=setTimeout(function(){self.check()}, this.timer);
if(this.xmlHttp.readyState == 4){
if(this.xmlHttp.status == 200){
clearTimeout(this.timerout);
if(this.backParam == null) this.callback(this.xmlHttp);
else this.callback(this.xmlHttp,this.backParam);
}
}
}
AJAX_OBJ.prototype.check = function(){
if(this.xmlHttp.readyState!=4||(this.xmlHttp.readyState==4&&this.xmlHttp.status!=200))
this.errorhandle(this.xmlHttp.status);
}
//请求失败的处理
AJAX_OBJ.prototype.errorHandle = function(params){
shsowTip("请求失败");
}
//参数的处理
AJAX_OBJ.prototype.addParameter = function(params,type){
this.type = typeof(type)=="undefined"?0:type;
if(this.type == 0){
if(params.length > 0){
this.urlParameters = "";
for(var i = 0; i < params.length; i++){
var curr_param = params[i];
if(i == 0) this.urlParameters += "?" + curr_param.name + "=" + curr_param.value;
else this.urlParameters += "&" + curr_param.name + "=" + curr_param.value;
}
}
}else if(this.type == 1){
this.urlParameters = params;
}
}
AJAX_OBJ.prototype.getText = function(){
return this.xmlHttp.responseText;
}
//执行responseText
AJAX_OBJ.prototype.evalText = function(){
return eval(this.xmlHttp.responseText);
}
分享到:
相关推荐
使用Ajax实现从服务器读取数据,包括Ajax实现的详细步骤
**AjaxRequest(Ajax使用包)** Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。AjaxRequest是实现Ajax功能的一个工具包,它...
本教程以一个简单的Ajax使用示例为基础,帮助初学者理解并掌握其基本概念和使用方法。 ### 1. Ajax的基本工作原理 Ajax的核心是JavaScript对象XMLHttpRequest,它允许JavaScript向服务器发送HTTP请求,并接收...
在本项目中,“Ajax使用示例”提供了一个完整的Ajax应用实例,帮助开发者更好地理解和运用Ajax。 1. **Ajax的基本原理**:Ajax的核心是XMLHttpRequest对象,它允许JavaScript在不刷新整个页面的情况下与服务器进行...
本资料包详细介绍了四种不同版本的Ajax使用方法,以及解决相关问题的经验分享。 1. **jQuery的Ajax使用** jQuery是JavaScript的一个库,它极大地简化了JavaScript的使用,包括Ajax操作。使用`$.ajax()`函数是...
这份"aspnet ajax使用文档(AspNet_AJAX_Documentation)"涵盖了关于如何使用ASP.NET AJAX的核心概念、API以及最佳实践。 首先,ASP.NET AJAX的核心组件包括AJAX Control Toolkit和UpdatePanel。UpdatePanel是ASP.NET...
【北大青鸟Y2Ajax使用工具包】是一个专门为ASP.NET开发者设计的集合,它包含了用于增强Web应用程序交互性和用户体验的Ajax工具。这个压缩包中主要包括了三部分:AjaxControlToolkit、ASPAJAXExtSetup以及CodeSmith ...
《通过DOM和Ajax使用XML_从菜鸟到专家2006》是一本旨在帮助初学者深入理解并掌握XML、DOM以及Ajax技术的书籍。XML(eXtensible Markup Language)是一种用于标记数据的语言,广泛应用于数据交换、配置文件、文档存储...
掌握Ajax使用 JSON 进行数据传输 掌握Ajax使用 JSON 进行数据传输 掌握Ajax使用 JSON 进行数据传输
【ACCP 5.0 Y2Ajax使用工具包】是一个专为北大青鸟ACCP 5.0课程设计的JavaScript库,旨在简化Web应用程序中的异步通信,即Ajax技术的实现。这个工具包是为了帮助学员更好地理解和应用Ajax技术,提高Web开发效率。...
2. **JavaScript**:Ajax使用JavaScript来创建XMLHttpRequest对象,它是与服务器进行通信的关键。 3. **XML与JSON**:虽然名字中有XML,但现代Ajax应用更倾向于使用JSON(JavaScript Object Notation)作为数据交换...
ajax使用小例子 //作者:核武器 2010.01.26 qq:61357455 Email:Behappy1982@163.com 单击按钮的时候,显示按钮上的文字,效果是局部WEB刷新,增加用户体验
文档"ajax_xml运用.doc"可能包含了一个使用Ajax获取并解析XML数据的例子。通常,这个过程包括以下几个步骤: 1. **创建XMLHttpRequest对象**:在JavaScript中,通过`new XMLHttpRequest()`来创建一个实例。 2. **...
这个压缩包"AspNet_AJAX_Documentation(Samples)"很可能是包含了一系列ASP.NET AJAX的使用示例,帮助开发者深入理解和实践这一技术。 在ASP.NET AJAX中,主要涉及以下几个核心概念和技术: 1. **UpdatePanel**:...
客户端访问服务器方式使用,包含Ajax原生,long poll,Websocket 客户端访问服务器方式使用,包含Ajax原生,long poll,Websocket 客户端访问服务器方式使用,包含Ajax原生,long poll,Websocket 客户端访问服务器...
本文实例讲述了thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json。分享给大家供大家参考,具体如下: 知识点总结 1.json格式标准 { 'key':"value" } {"state":"1","msg":"\u7b80\u5386\u6295\u...