原生态js实现ajax的get和post的方法介绍
自从有了jquery以后,使用ajax已经变的相当简单了。
但有时候为了追求简洁,可能项目中不需要加载jquery这种庞大的js插件。
但又要使用到ajax这种功能该如何办呢?
实现ajax之前必须要创建一个 XMLHttpRequest 对象。
如果不支持创建该对象的浏览器,则需要创建 ActiveXObject,具体方法如下:
1 2 3 4 5 6 7 | var xmlHttp; function createxmlHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp=new XMLHttpRequest(); } |
一、下面使用上面创建的xmlHttp实现最简单的ajax get请求:
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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'); } } } |
二、使用上面创建的xmlHttp实现最简单的ajax post请求:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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'); } } } |
原生态js方法实现全选复制功能 wamp2.5配置多端口虚拟主机的方法