原生JS实现ajax
Posted caidan1995
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生JS实现ajax相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" type="text/css" rel="stylesheet"> <script type="text/javascript"> /* *AJAX方法封装：2013年11月22日 *参数说明： *type//请求方法 *async//true表示异步读取文件 *url//url路径 *data//发送数据 *timeout//设置超时时间 *contentType//写入header头，表示请求类型 *beforeSend//ajax请求之前调用方法，如果该函数返回false，将会阻止AJAX请求 *success//响应成功时调用方法(XHR.status===200) *complete//请求完成后回调函数 (请求成功或失败之后均调用)。 **/ (function(){ var httpRequest=(function(){ try{ /*****FF,Google等*****/ return function(){ return new XMLHttpRequest(); }; }catch(e){ try{ /*****IE某些版本*****/ return function(){ return new ActiveXObject("Msxml2.XMLHTTP"); }; }catch(e){ try{ /*****其他IE版本*****/ return function(){ return new ActiveXObject("Microsoft.XMLHTTP"); }; }catch(e){ return null; } } } })(); /*暴露ajax方法*/ window.ajax=function (param){ //处理参数 param.type=param.type || "GET"; param.async=param.async || true; param.url=param.url || window.location.href; param.data=param.data || ""; param.timeout=param.timeout || 10000; param.complete=param.complete || function(){}; param.contentType=param.contentType || { "Content-type":"x-www-form-urlencoded" }; //初始化变量 var textStatus=""; var timer=null; //状态函数 var stateChangeFn=function(){ /* *readyState五个状态0:未发送请求，1:已发送请求，2:已经握手，3:正在处理请求，4:请求处理完成 *0：请求未初始化（还没有调用 open()）。 *1：请求已经建立，但是还没有发送（还没有调用 send()）。 *2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。 *3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。 *4：响应已完成；您可以获取并使用服务器的响应了。 */ if(XHR.readyState===4){ if(XHR.status===200){ //响应成功 param.success && param.success(XHR.responseText); textStatus="success"; }else { textStatus=XHR.status; } clearTimeout(timer); param.complete(textStatus); } }; if(httpRequest === null){ //alert("你的浏览器不支持AJAX"); param.complete("error"); return false; }else { XHR=new httpRequest(); } if(param.beforeSend && param.beforeSend()===false){ return false; } //post请求 if(param.type==="POST"){ XHR.open("POST",param.url,param.type); for(var key in param.contentType){ XHR.setRequestHeader(key,param.contentType[key]); } XHR.onreadystatechange=stateChangeFn; XHR.send(param.data); } //get请求 else if (param.type==="GET"){ XHR.open("GET",param.url+"?"+param.data,param.type); XHR.onreadystatechange=stateChangeFn; XHR.send(null); } //设置请求过期时间，十秒超时 timer = setTimeout(function(){//AJAX请求十秒超时 XHR.abort(); param.complete("timeout"); }, param.timeout); } })(); /************分割线************/ window.onload=function(){ ajax({ type:"GET", async:true,//true表示异步读取文件 url:"ajax.txt", data:"a&b",//发送数据 timeout:8000,//8秒超时 contentType:{//请求头信息，只对POST请求有效 "Content-type":"x-www-form-urlencoded" }, beforeSend:function(){//ajax请求之前调用，如果该函数返回false，将会阻止AJAX请求 document.getElementById("beforeSend").innerHTML="开始加载...." }, success:function(msg){//响应成功时调用 document.getElementById("success").innerHTML="返回结果："+msg; }, complete:function(state){//请求完成后回调函数 (请求成功或失败之后均调用)。 document.getElementById("complete").innerHTML="请求完成，状态："+state; } }); } </script> </head> <body> <div id="beforeSend"></div> <div id="success"></div> <div id="complete"></div> </body> </html>
同目录下新建ajax.txt文件，用http访问以上html文件。
以上是关于原生JS实现ajax的主要内容，如果未能解决你的问题，请参考以下文章