javascript 实现原生ajax的几种方法
来源：自学PHP网
时间：2014-09-19 14:47 作者：
阅读:次
[导读] ajax原生态的写法现在己经很少见了，大家都是直接使用jquery的ajax，因为jquery提供了大量的ajax方法，使用简单方便快捷了，下面我还是给各位提供一些ajax原生态写法。...
|
自从javascript有了各种框架之后，比如jquery，使用ajax已经变的相当简单了。但有时候为了追求简洁，可能项目中不需要加载jquery这种庞大的js插件。但又要使用到ajax这种功能该如何办呢？下面和大家分享几种利用javascript实现原生ajax的方法。
实现ajax之前必须要创建一个 XMLHttpRequest 对象。如果不支持创建该对象的浏览器，则需要创建 ActiveXObject，具体方法如下：
| 代码如下 |
复制代码 |
var xmlHttp;
function createxmlHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
xmlHttp=new XMLHttpRequest();
} |
（1）下面使用上面创建的xmlHttp实现最简单的ajax get请求：
| 代码如下 |
复制代码 |
|
function doGet(url){
// 注意在传参数值的时候最好使用encodeURI处理一下，以防出现乱码
createxmlHttpRequest();
xmlHttp.open("GET",url);
xmlHttp.send(null);
xmlHttp.onreadystatechange = function() {
if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) {
alert('success');
} else {
alert('fail');
}
}
}
|
（2）使用上面创建的xmlHttp实现最简单的ajax post请求：
| 代码如下 |
复制代码 |
function doPost(url,data){
// 注意在传参数值的时候最好使用encodeURI处理一下，以防出现乱码
createxmlHttpRequest();
xmlHttp.open("POST",url);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(data);
xmlHttp.onreadystatechange = function() {
if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) {
alert('success');
} else {
alert('fail');
}
}
} |
下面再分享一个从网上看到的模拟jquery的$.ajax方法的封装：
| 代码如下 |
复制代码 |
|
var createAjax = function(){
var xhr=null;
try {
xhr=new ActiveXObject("microsoft.xmlhttp"); // IE系列浏览器
} catch(e1) {
try{
xhr=new XMLHttpRequest(); // 非IE浏览器
} catch(e2) {
window.alert("您的浏览器不支持ajax，请更换！");
}
}
return xhr;
};
var ajax=function(conf){
var type=conf.type; // type参数,可选
var url=conf.url; // url参数，必填
var data=conf.data; // data参数可选，只有在post请求时需要
var dataType=conf.dataType; // datatype参数可选
var success=conf.success; // 回调函数可选
if (type == null) {
type="get"; // type参数可选，默认为get
}
if (dataType == null){
dataType="text"; // dataType参数可选，默认为text
}
var xhr = createAjax();
xhr.open(type,url,true);
if (type=="GET" || type=="get") {
xhr.send(null);
} else if (type=="POST" || type=="post") {
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send(data);
}
xhr.onreadystatechange=function(){
if ((xhr.readyState == 4) && (xhr.status == 200)) {
if (dataType=="text" || dataType=="TEXT"){
if (success != null){
success(xhr.responseText); // 普通文本
}
} else if(dataType=="xml" || dataType=="XML"){
if (success != null){
success(xhr.responseXML); // 接收xml文档
}
} else if (dataType=="json" || dataType=="JSON"){
if (success != null) {
success(eval("("+xhr.responseText+")")); //将json字符串转换为js对象
}
}
}
};
};
|
该方法使用也很简单，和jquery的$.ajax方法一样，不过没那么多的参数。仅仅是简单的实现了一些基本的ajax功能。使用方法如下：
| 代码如下 |
复制代码 |
|
ajax({
type:"post",//post或者get，非必须
url:"test.jsp",//必须的
data:"name=dipoo&info=good",//非必须
dataType:"json",//text/xml/json，非必须
success:function(data){//回调函数，非必须
alert(data.name);
}
});
|
|
