1、JavaScript代码

//封装ajax
function ajax(obj) {
var xhr = new createXHR();
obj.url = obj.url + '?rand=' + Math.random();
obj.data = params(obj.data);
if (obj.method === 'get') {
obj.url = obj.url.indexOf('?') == -1 ? obj.url + '?' + obj.data : obj.url + '&' + obj.data;
}
if (obj.async === true) {
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
callback();
}
}
}
xhr.open(obj.method, obj.url, obj.async);
if (obj.method === 'post') {
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(obj.data);
} else {
xhr.send(null);
}
if (obj.async === false) {
callback();
}

function callback () {
if (xhr.status == 200) {
obj.success(xhr.responseText); //回调
} else {
alert('数据返回失败！状态代码：' + xhr.status + '， 状态信息：' + xhr.statusText);
}
}
}

//调用ajax
addEvent(document, 'click', function () { //IE6 需要重写addEvent
ajax({
method : 'post',
url : 'ajax.php',
data : {
'name' : 'Lee',
'age' : 100
},
success : function (text) {
alert(text);
},
async : true
});
});

//名值对编码
function params(data) {
var arr = [];
for (var i in data) {
arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
}
return arr.join('&');
}

//点击事件
function addEvent(obj,eventType,fn){
if(obj.addEventListener){
obj.addEventListener(eventType,fn,false);
}else if(obj.attachEvent){
obj.attachEvent('on'+eventType,fn);
}else{
obj['on'+eventType] = fn;
}
};

//XHR对象
function createXHR(){
//检测原生XHR对象是否存在，如果存在刚返回它的新实例；
//如果不存在，则检测ActiveX对象;
//如果两个都不存在，就抛出一个错误。

if(typeof XMLHttpRequest != "undefined"){
return new XMLHttpRequest();
}else if(typeof ActiveXObject != "undefined"){
//适合IE7之前的版本
if(typeof arguments.callee.activeXString != "string"){
var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML.XMLHttp"];
for(var i=0,len=versions.length; i<len; i++){
try{
var xhr = new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
return xhr;
}catch (ex){
//跳过
}
}
}

return new ActiveXObject(arguments.callee.activeXString);
}else{
throw new Error("No XHR object available.");
};
}

2、HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ajax</title>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>ajax</body>
</html>

3、PHP代码

<?php
print($_GET);
print($_POST);
?>

封装、调用ajax的更多相关文章

  1. 先定一个小目标，自己封装个ajax

    你是否发现项目中有很多页面只用到了框架不到十分之一的内容,还引了压缩后还有70多kb的jquery库 你是否发现项目中就用了两三个underscore提供的方法,其他大部分的你方法你甚至从来没有看过 ...

  2. 自己封装个ajax

    你是否发现项目中有很多页面只用到了框架不到十分之一的内容,还引了压缩后还有70多kb的jquery库 你是否发现项目中就用了两三个underscore提供的方法,其他大部分的你方法你甚至从来没有看过 ...

  3. 封装一个Ajax工具函数

    /*封装一个ajax工具函数*/ window.$ = {}; /*通过$定义一个ajax函数*/ /* * 1. type   string   请求的方式  默认是get * 2. url     ...

  4. 原生ajax与封装的ajax使用方法

    当我们不会写后端接口来测试ajax时,我们可以使用node环境创建一个本地服务器. 1.创建一个本地服务器可参考http://www.cnblogs.com/heyujun-/p/6793900.ht ...

  5. 调用AJAX返回JSON、XML数据类型

    1.调用AJAX返回JSON数据 用下拉列表显示Nation表民族名称 主页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ...

  6. mui封装的ajax请求

    由于项目中引进MUI框架,所以就不需要引进jquery,但需要和后台交互时,常写为jquery格式:所以笔者觉得有必要将mui封装的ajax请求在这里提一下: 1,mui框架基于htm5plus的XM ...

  7. jQuery 封装的ajax

    jquery封装的ajax 具体操作: $.get(url  [,data]  [,fn回调函数]   [, dataType]); data:给服务器传递的数据,请求字符串 .json对象 都可以设 ...

  8. springMVC含文件上传调用ajax无法连接后台

    springMVC在使用ajax进行后台传值的时候发现找不到对应的requestMapping(""),无法进入后台,在多次试验后确定是 MultipartFile对象与ajax冲 ...

  9. 封装的ajax请求

    在做登录注册这类提交表单数据时,我们经常需要局部刷新网页来验证用户输入的信息,这就需要用到ajax请求,我们通常需要获取表单中的数据,发起ajax请求,通过服务程序,与数据库的数据进行比对,判断信息的 ...

随机推荐

  1. 使用RedisTemplate进行Redis存取的工具类设计

    通常在访问量大数据更新频率不高的系统中会使用第三方的缓存组件来降低数据库服务的负载,鉴于模块独立分工独立的考虑,针对缓存组件操作的工作全部应该统一接口对其他业务提供服务,这样业务操作只需要关注业务实现 ...

  2. D3树状图异步按需加载数据

    D3.js这个绘图工具,功能强大不必多说,完全一个Data Driven Document的绘图工具,用户可以按照自己的数据以及希望实现的图形,随心所欲的绘图. 图形绘制,D3默认采用的是异步加载,但 ...

  3. VR全景项目外包团队— VR/AR相关领域介绍和VR全景案例

    VR/AR相关领域这里我要说的一点就是硬件.诚然,硬件的确很难搞,国内在这方面就是荒漠,所以,如果你有信心,完全可以开拓一片蓝海.注意我是说真正的硬件,那些把Google的纸盒子拿来改改就能融资千万的 ...

  4. TIOBE Index for January 2016（转载）

    Java has won the TIOBE Index programming language award of the year. This is because Java has the la ...

  5. Oracle 11g服务器安装详细步骤

    原出处:http://jingyan.baidu.com/article/363872eccfb9266e4aa16f5d.html 方法/步骤   1 大家可以根据自己的操作系统是多少位(32位或6 ...

  6. 浅谈人脸检测之Haar分类器方法

    我们要探讨的Haar分类器实际上是Boosting算法(提升算法)的一个应用,Haar分类器用到了Boosting算法中的AdaBoost算法,只是把AdaBoost算法训练出的强分类器进行了级联,并 ...

  7. Javascript 实现HTML字符串的储存

    在js中使用HTML字符串时,可以不用理会字符串的单引号和双引号的转义,因为使用的注释,注释当然什么都可以写. PS:这个有点类似于 php中的 <<<语法(heredoc和nowd ...

  8. js中使用进行字符串传参

    在js中拼接html标签传参时,如果方法参数是字符串需要加上引号,这里需要进行字符转义 <a href='javascript:addMenuUI("+"\"&qu ...

  9. Hibernate使用

    实现类: public class InfoDAOImpl extends BaseDao<Info> 1.List<Object[]> midlist=super.creat ...

  10. R语言向量

    R语言基础:向量  心无咎 2012-04-02 13:37:00 向量(vector)1.seq():产生有规律的数列,间距省略时默认值为1.        例1:seq(10, 20, 0.5)  ...