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,今天突然想起来,于是参考网上的资料重新写了一遍,在此整理并记录下来,以备以后查看使用,也希望对初学者有所帮助!
示例代码如下:
<!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"> 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; } } } } } </script> </head> <body> <input type="text" id="txt" name="txt" value="" onkeyup="tiplist(this,'post');" /><br/><br/> <div id="downlist" style="width:200px;height:300px;background:gray;"></div> </body> </html>
在写的过程中遇到xmlHttpRequest对象的status返回状态码为0,网上大部分说法是0表示为请求目标地址直接返回成功状态(即此时0也表示成功状态,但不等同于返回200的成功状态,200才是真正正常的成功状态。出现此种返回0的状态,很可能是Ajax跨域导致,比如直接运行静态Html页面,请求已发布的工程,由于该静态页面未在此发布的工程中,此时就属于跨域,返回状态码0,将此静态页面拷贝到发布的工程目录并以http方式访问,返回200的成功状态码)
参考推荐:
AJAX - 向服务器发送请求 (W3School)
版权所有: 本文系米扑博客原创、转载、摘录,或修订后发表,最后更新于 2017-12-17 11:31:51
侵权处理: 本个人博客,不盈利,若侵犯了您的作品权,请联系博主删除,莫恶意,索钱财,感谢!
大概意思:那么麻烦还不用jquery