/**
* 异步通信Ajax
* @param {object} config
* <code>
var config={
action:"test.json",//请求的URL;
sync:true,//是否异步,默认异步true;
method:"get",//请求类型,默认get;
data:null,//post请求的数据;
loaded: funLoadOk//回调方法 ;
};
调用代码:
<script type="text/javascript" src="Ajax.js?t=0"></script>
<script type="text/javascript">
var funLoadOk=function(httpRequest){
alert(httpRequest.responseText);
}
var config={
action:"test.json",
sync:true,
method:"get",
data:null,
loaded: funLoadOk
};
var ajax=new Ajax(config);
ajax.load();
</script>
* </code>
*/
function Ajax(config){
this._config =config;
this.initXmlHttp=function(){
if(typeof XMLHttpRequest == "function")return new XMLHttpRequest();
var MsxmlArr =['MSXML2.XMLHTTP.5.0',
'MSXML2.XMLHTTP.4.0',
'MSXML2.XMLHTTP.3.0',
'MSXML2.XMLHTTP',
'Microsoft.XMLHTTP'];
if (window.ActiveXObject){
for(var i=0;i<MsxmlArr.length;i++){
try{
XMLHttpRequest =function(){
return new ActiveXObject(MsxmlArr[i]);
};
return new XMLHttpRequest();
}catch(e){
//创建失败跳过;
}
}
}
return null;
};
/**
* 给请求的URL添加一个随机数
* @param {string} url
*/
this.appendUrlRandom = function(url){
var rnd = "t=" + new Date().getTime();
if(url.indexOf("?")!=-1)url +="&" + rnd;
else url += "?" + rnd;
return url;
};
/**
* 状态
* @param {object} req
*/
this.stateOK = function(req){
var s = req.status || 0;
return ((s>=200)&&(s<300))||
(s==304)||
(s==1223)||
(!s && (location.protocol=="file:" || location.protocol=="chrome:"));
};
/**
* 加载完毕执行内容
* @param {XMLHttpRequest} xmlHttpRequest
*/
this.loaded=function(xmlHttpRequest){
//加载完毕执行内容
//xmlHttpRequest.responseText;
};
/**
* 加载失败执行内容
*/
this.loadFail=function(){
//
};
/**
* 给请求的URL添加一个随机数
* @param {string} url
*/
this.load = function(config){
var c=config || this._config;
var action = c.action || c,
sync = c.sync || true,
method = c.method || "get",
loaded = c.loaded || this.loaded,
data = c.data || null;
try {
var rpc=this.initXmlHttp();
var stateIsOk=this.stateOK;
action=this.appendUrlRandom(action);
alert(action);
if (rpc) {
rpc.open(method, action ,sync);
if(sync)rpc.onreadystatechange = function(){//异步请求
if (rpc.readyState == 4) {
if (stateIsOk(rpc)) {
loaded(rpc);
}
}
};
if(method=="post"){
rpc.setRequestHeader("content-length",data.length);
rpc.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
rpc.send(data);
if(!sync){if(rpc.readyState == 4)//同步请求
if(stateIsOk(rpc)) {
loaded(rpc);
}
}
}
}catch (exception) {
this.loadFail();
return null;
}
};
this.toString = function(){return "[object Ajax]";};
}
测试的HTML页
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax测试页</title>
</head>
<body>
<script type="text/javascript" src="Ajax.js?t=0"></script>
<script type="text/javascript">
var funLoadOk=function(httpRequest){
alert(httpRequest.responseText);
}
var config={
action:"test.json",
sync:true,
method:"get",
data:null,
loaded: funLoadOk
};
var ajax=new Ajax(config);
ajax.load();
</script>
</body>
</html>
JSON 格式的数据
[{"email":"abc@163.com","id":1,"mobile":"13532129825","name":"testName","password":"25F340A32C609AE4"}]
分享到：
相关推荐
**标题解析：** "自己用的简单封装AJAX类" 指的是作者为了个人使用需求，编写了一个简化的AJAX处理类。AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术，...
### AJAX代码及简单封装知识点详解 #### 一、引言 AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换来实现这一功能...
ajax轻量级封装,简单实用,带有详细注释。 一、同一个对象可以发送多个请求，按顺序执行请求，有简单的超时机制,httpXMLRequest对象复用，无序的可以建立多个对象发送请求来实现； 二、兼容IE,FF，支持同步、异步...
**AjaxTest 实用简单封装** Ajax（Asynchronous JavaScript and XML）技术是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新，大大提升了...
**JavaScript封装Ajax**通常涉及到以下几个关键步骤： 1. **创建XMLHttpRequest对象**：这是Ajax的基础，几乎所有的浏览器都内置了XMLHttpRequest对象，用于与服务器进行通信。首先，我们需要创建一个...
在这个“小程序使用es6封装ajax源码案例”中，我们将深入探讨如何利用ES6的Promise和模块化特性来优雅地实现Ajax请求，并将其应用到微信小程序的开发中。 首先，让我们理解一下核心概念： 1. **ES6**：这是...
**jQuery 封装Ajax** 在Web开发中，Ajax（Asynchronous JavaScript and XML）技术被广泛应用于实现页面的异步更新，提升用户体验。jQuery库通过其简单易用的API，极大地简化了Ajax操作，使得开发者无需关注底层的...
这个“简易封装Ajax.zip”文件包含了对Ajax进行简单封装的示例，通过`index.html`来展示调用，`myajax.js`作为封装的Ajax函数库，以及`getData.php`和`postData.php`作为服务器端处理数据的脚本。 首先，让我们详细...
本小工具就是对Ajax进行的一种简单封装，适用于那些希望进行轻量级交互、不打算使用大型JavaScript框架的场景。 Ajax的核心在于通过JavaScript与服务器进行异步通信，它允许我们向后台发送请求，获取数据，然后在...
这个“已封装Ajax操作类”显然提供了一种简化Ajax调用的方式，使得开发者可以更便捷地实现异步通信。以下是对这个主题的详细讲解： 首先，Ajax的核心在于XMLHttpRequest对象，这是一个浏览器内置的对象，它允许...
这个压缩包"原生js的AJAX封装以及实例展示.zip"包含了对AJAX的简单封装以及一个具体的增删改查（CRUD）操作实例，这将帮助我们深入理解如何在实际项目中应用AJAX。 首先，让我们了解一下AJAX的基本原理。AJAX的核心...
8. **jQuery和其他库**：jQuery等JavaScript库封装了AJAX操作，使其变得更简单易用。例如，$.ajax()、$.get()和$.post()是jQuery中的AJAX函数，它们提供了更友好的API和更丰富的功能。 9. **Promise和async/await**...
**封装Ajax库：** 为了方便使用，通常会将这些步骤封装成一个函数或类，例如： ```javascript function ajax(url, type, callback, data) { var xhr = new XMLHttpRequest(); xhr.open(type, url, true); xhr....
// 假设有一个`getJokes`函数用于封装Ajax请求 function getJokes(callback) { ajaxRequest('https://api.example.com/jokes', 'GET', callback); } // 在HTML中添加一个触发请求的按钮 ()">加载段子 // ...
在如今的前端开发中，处理Ajax请求是日常工作的一部分，而jQuery作为一个在前端领域广泛应用的库，封装Ajax请求可以提高代码的重用性和可维护性。easy-ajax是一个基于jQuery的封装工具，旨在简化和规范前端Ajax请求...
简单的ajax利用jquery的封装方法实现get和post两种提交方式
这个Web项目实例展示了如何利用jQuery封装的AJAX功能实现异步加载，通过与Servlet配合，实现了客户端与服务器间JSON数据的交换。理解这些概念和实践，对于提升Web应用的用户体验和性能至关重要。通过深入学习和实践...
以下是一个简单的Ajax封装示例： ```javascript function ajax(url, type, callback, data) { var xhr = new XMLHttpRequest(); xhr.open(type, url, true); // 如果是POST请求，设置请求头 if (type === '...
这个函数利用Ajax向服务器发送登录信息，通常以JSON格式封装。 4. **Servlet处理** Servlet是Java中的服务器端组件，它可以接收和响应来自客户端（如Ajax请求）的请求。在这个场景下，Servlet接收到Ajax请求后，会...