ajax 原生实现,JavaScript原生实现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){

alert("data: " + data);

createxmlHttpRequest();

xmlHttp.open("POST",url, true);

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

xmlHttp.send(encodeURI(data));

xmlHttp.onreadystatechange = function() {

if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) {

alert('success');

alert(xmlHttp.responseText);

}

else {

alert('fail');

}

}

}

JavaScript实现Ajax请求简单示例

很久之前用过JavaScript写Ajax请求，后来一直用JQuery，今天突然想起来，于是参考网上的资料重新写了一遍，在此整理并记录下来，以备以后查看使用，也希望对初学者有所帮助！

示例代码如下：

Ajax

var xmlHttpReq = null;//XMLHttpRequest对象

// 去除字符串两边空格

String.prototype.trim = function () {

return this.replace(/(^\s*)|(\s*$)/g, "");

}

// 创建XMLHttpRequest对象

function createXMLHttpRequest() {

if (window.XMLHttpRequest) {// IE 7.0及以上版本和非IE的浏览器

xmlHttpReq = new XMLHttpRequest();

} else {// IE 6.0及以下版本

try {

xmlHttpReq = new ActiveXObject("MSXML2.XMLHTTP");

}catch (e) {

try {

xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");

}catch (e) {}

}

}

if (!xmlHttpReq) {

alert("当前浏览器不支持!");

return null;

}

return xmlHttpReq;

}

//Ajax请求

function tiplist(txt,requestMethod){

var txtValue = txt.value.trim();

if(txtValue!=""){

var parameter = "code="+txtValue+"&str=中文";

var requestURL = "http://127.0.0.1:8080/MyProj/ShowServlet";

xmlHttpReq = createXMLHttpRequest();

if("GET" == requestMethod.trim().toUpperCase()){

xmlHttpReq.open("GET",encodeURI(EncodeURI(requestURL+"?"+parameter)),true);

xmlHttpReq.setRequestHeader("If-Modified-Since","0");

xmlHttpReq.send("null");

}else if("POST" == requestMethod.trim().toUpperCase()){

xmlHttpReq.open("POST",requestURL,true);

xmlHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");

xmlHttpReq.send(encodeURI(encodeURI(parameter)));

}else{

alert("错误的请求方式！");

return;

}

xmlHttpReq.onreadystatechange = function(){

if(xmlHttpReq.readyState == 4){

switch(xmlHttpReq.status){

case 200:

//var datas = xmlHttpReq.responseXML.getElementsByTagName("data");

//alert(datas.length);

document.getElementById("downlist").innerHTML = xmlHttpReq.responseText;

break;

case 400:

alert("错误的请求！\nError Code:400!");

break;

case 403:

alert("拒绝请求！\nError Code:403!");

break;

case 404:

alert("请求地址不存在！\nError Code:404!");

break;

case 500:

alert("内部错误！\nError Code:500!");

break;

case 503:

alert("服务不可用！\nError Code:503!");

break;

default:

alert("请求返回异常！\nError Code:"+xmlHttpReq.status);

break;

}

}

}

}

}

在写的过程中遇到xmlHttpRequest对象的status返回状态码为0，网上大部分说法是0表示为请求目标地址直接返回成功状态(即此时0也表示成功状态，但不等同于返回200的成功状态，200才是真正正常的成功状态。出现此种返回0的状态，很可能是Ajax跨域导致，比如直接运行静态Html页面，请求已发布的工程，由于该静态页面未在此发布的工程中，此时就属于跨域，返回状态码0，将此静态页面拷贝到发布的工程目录并以http方式访问，返回200的成功状态码)

参考推荐：