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. QT实现HTTP JSON高效多线程处理服务器

    QT实现HTTP JSON高效多线程处理服务器 Legahero QQ:1395449850 现在一个平台级的系统光靠web打天下是不太现实的了,至少包含APP和web两部分,在早期APP直接访问we ...

  2. jq 获取元素的宽度时，如何取得小数部分

    <!DOCTYPE html> <html> <head> <title></title> <meta name="arti ...

  3. 测试 ClownFish、CYQ、Entity Framework、Moon、MySoft、NHibernate、PDF、XCode数据访问组件性能

    下期预告: 由于很多园友反馈,有的组件不应该缺席.测试复杂度不够.测试还缺乏一定的公平. 因此考虑在下一个版本中,确保在更加公平的前提下进行更高复杂度的测试 . 同时将分为2组测试,纯SQL组件及纯O ...

  4. NSOperationQueue与GCD的使用原则和场景

    首先,我们要明确NSOperationQueue与GCD之间的关系: NSOpertaionQueue用GCD构建封装的,是GCD的高级抽象. 其次,我们要区别两者的不同: GCD仅仅支持FIFO队列 ...

  5. MVC中关于Membership类跟数据库的问题

    Membership它们用的是ASPNETDB这个数据库,但我们可以使用我们自定义的数据库,然而除非我们自定义的数据库有着跟这个ASPNETDB一样的模式,否则ASP.NET提供的默认的SqlMemb ...

  6. 118、通过solid来定义不同边框的颜色，可以只定义一个边框的颜色

    以下是设置按钮的右边框和底边框颜色为红色,边框大小为3dp,如下图: 在drawable新建一个 buttonstyle.xml的文件,内容如下: <?xml version="1.0 ...

  7. AX 2012 在Grid 中添加image标识状态

    refer to :http://kiwiaxguy.blogspot.hk/2013/10/displaying-image-on-form-grid-in.html

  8. spring mvc使用@InitBinder 标签对表单数据绑定

    在SpringMVC中,bean中定义了Date,double等类型,如果没有做任何处理的话,日期以及double都无法绑定. 解决的办法就是使用spring mvc提供的@InitBinder标签 ...

  9. Flavors

    Flavors¶ Flavor interface. class novaclient.v1_1.flavors.Flavor(manager, info, loaded=False) Bases: ...

  10. 您只能在 HTML 输出流中使用 document.write。如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。

    刚刚接触JS,看到这句话时一时没搞懂,想了终于有了一些眉目,意思就是在文档加载过后,如果我们用比方说按钮的方式重新加载文档,就会把文档都覆盖: 列如: <!DOCTYPE html> &l ...