`

封装Ajax(完整Ajax请求)

阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta charset="utf-8"/>
<meta name="generator" content="kingwell" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>
<div id="text"></div>
<script>
function Ajax(obj){
	var xml = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
	if (!xml){
		return;
	}
	var o = obj || {};
	var that = this;
	this.xml = xml;
	this.type = o.type || 'GET';
	this.asyn = o.asyn || false;
	this.url = o.url;
	this.data = o.data || null;
	this.setRequestHeader = o.setRequestHeader;
	this.timeOut = o.timeOut || 5000;
	this.onError = o.onError || function(){};
	this.onSuccess = o.onSuccess || function(){};
	this.onComplete = o.onComplete || function(){};
	if (!this.url){
		return;
	}
	this.xml.onreadystatechange = function(){
		if (this.readyState === 4){
			if (this.status === 200 || this.status === 403){
				that.onSuccess.call(this);
			}else{
				that.onError.call(this,this.status);
			}
		}
	}
	this.xml.open(this.type,this.url,this.asyn);
	for (var key in this.setRequestHeader){
		this.xml.setRequestHeader(key,this.setRequestHeader[key]);
	}
	this.xml.send(this.data);
	setTimeout(function(){
		that.xml.abort();
		that.onComplete(that);
	},this.timeOut);
	//alert(this.xml.getAllResponseHeaders());
	//alert(this.xml.getResponseHeader('Content-Type'));
}
new Ajax({
	type:'get',
	url : 'text.txt',
	timeOut : 1000,
	setRequestHeader :{
		'Content-Type' : 'text/html',
	},
	onSuccess : function(){
		//alert(this.responseText);
		//document.getElementById('text').innerHTML =this.responseText ;
		alert('success');
	},
	onError : function(code){
		//alert('error'+code);
	},
	onComplete : function(){
		//alert('完成了');
		console.log('完成了');
	}
});

</script>

</body>
</html>

 

分享到:
评论

相关推荐

    自己用的简单封装AJAX类

    **标题解析:** "自己用的简单封装AJAX类" 指的是作者为了个人使用需求,编写了一个简化的AJAX处理类。AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,...

    封装ajax请求

    封装ajax请求,对ajax的封装(ajax.js)

    Ajax请求封装方法

    AJAX即“Asynchronous JavaScript and XML”(异步的JavaScript与XML技术),指的是一套综合了多项技术的浏览器端网页开发技术。

    JS封装的AJAX函数

    使用这个封装的AJAX函数,你可以轻松地在代码中发起异步请求,比如获取某个API的数据: ```javascript ajaxGet('https://api.example.com/data', function(err, data) { if (err) { console.error(err); } else ...

    3-11 定义全局路径和封装Ajax(移动端) - EMOS小程序1

    在本文中,我们将深入探讨如何在EMOS小程序1中定义全局路径和封装Ajax请求,以提高代码的可维护性和效率。 首先,我们要解决的是全局路径的定义。在大型项目中,URL路径的管理变得尤为重要,因为它涉及到各个接口的...

    ajax封装实例代码

    在实际应用中,这个过程往往需要重复编写,因此将Ajax请求封装成一个函数或类是非常必要的。 1. **创建XMLHttpRequest对象** 在JavaScript中,我们首先需要创建一个XMLHttpRequest对象,它是Ajax的核心。通过`new ...

    Ajax的小封装 get,post请求

    在描述中提到了对Ajax的get请求的小封装,这意味着我们将会讨论如何用JavaScript来构建一个简易的Ajax GET请求函数,并可能涉及POST请求的实现。 ### 1. Ajax GET 请求小封装 GET请求是最常见的HTTP方法,用于从...

    封装ajax访问通用模板

    封装AJAX通用模板是为了提高代码复用性和可维护性,减少重复编写相似的AJAX请求代码。 【描述】中的“NULL”可能表示没有提供具体的实现细节,但通常来说,封装AJAX通用模板会包括以下步骤和功能: 1. **创建...

    小程序使用es6封装ajax源码案例

    在这个“小程序使用es6封装ajax源码案例”中,我们将深入探讨如何利用ES6的Promise和模块化特性来优雅地实现Ajax请求,并将其应用到微信小程序的开发中。 首先,让我们理解一下核心概念: 1. **ES6**:这是...

    html5页面开发源代码(含ajax封装及调用方法)

    提供完整的html5页面开发流程和开发方式,包括html5页面开发代码,含ajax封装方法,以及调用的方式

    ajax代码及简单封装

    - 此处对原始AJAX请求进行了简单的封装,使其更具可读性和可维护性。 - 通过传入`url`、`onsuccess`回调函数和`onfail`回调函数作为参数,增强了代码的灵活性。 - **应用**:该封装方法可以方便地应用于多个场景,...

    jQuery 封装Ajax

    **jQuery 封装Ajax** 在Web开发中,Ajax(Asynchronous JavaScript and XML)技术被广泛应用于实现页面的异步更新,提升用户体验。jQuery库通过其简单易用的API,极大地简化了Ajax操作,使得开发者无需关注底层的...

    springmvc异步ajax请求

    但Ajax请求通常不需要完整的视图,而是需要部分数据。因此,我们可以直接返回数据对象,或者使用`ModelAndView`设置一个视图名称,该名称对应于一个可以处理JSON的视图 resolver。 7. **安全考虑** 当使用Ajax请求...

    Typescript中的属性类型接口【案例】 定义Ajax请求数据的接口 ts封装ajax.zip

    本案例将探讨如何使用TypeScript来定义Ajax请求数据的接口,并展示如何进行ts封装ajax的过程。 首先,让我们了解什么是接口(Interface)。在TypeScript中,接口是一种抽象的类型定义,它描述了对象的形状,包括其...

    简单封装Ajax

    此外,随着技术的发展,现在更多的项目倾向于使用库或框架(如jQuery、axios、fetch API等)来进行Ajax请求,它们提供了更丰富的功能和更好的兼容性,简化了开发者的工作。但了解基本的XMLHttpRequest封装原理对于...

    java中对ajax经典封装

    本资料包中的"java中对ajax经典封装"提供了关于如何在Java环境中优雅地处理Ajax请求的详细教程。 1. **Ajax工作原理**: Ajax的核心是JavaScript对象XMLHttpRequest,它允许在后台与服务器进行异步数据交换。通过...

    封装好的ajax网络请求代码ajax.js

    封装好的ajax网络请求代码ajax.js

    已封装Ajax操作类

    总结来说,这个“已封装Ajax操作类”是为了解决JavaScript中使用原生XMLHttpRequest对象进行Ajax请求的复杂性,提供了一个简洁、易用的接口,使得开发者能够更专注于业务逻辑,而不是底层通信的实现。通过学习和使用...

Global site tag (gtag.js) - Google Analytics