简单AJAX函数

简易Ajax GET 请求教程

最新推荐文章于 2025-12-05 11:24:16 发布

原创最新推荐文章于 2025-12-05 11:24:16 发布 · 280 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #xmlhttprequest #服务器 #url #javascript #function

javascript 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个简单的Ajax GET请求脚本实现，通过该脚本可以实现网页内容的异步加载。文章详细解释了如何创建XMLHttpRequest对象，并设置其请求方式、URL及回调函数。此外，还介绍了如何根据请求的状态来更新页面内容。

/*---------------- '通用简单Ajax脚本函数(过程) 'GET方式请求，失败返回false '传递参数为请求地址链接:aUrl，显示区域ID:aShow '2008-3-28 ------------------*/ function ajax(aUrl,aShow){ var xmlObj = false; try { xmlObj=new XMLHttpRequest; } catch(e) { try { xmlObj=new ActiveXObject("MSXML2.XMLHTTP"); } catch(e2) { try { xmlObj=new ActiveXObject("Microsoft.XMLHTTP"); } catch(e3) { xmlObj=false; } } } if (!xmlObj) return false; var url,show; if (aUrl) url = aUrl; else url = ""; if (!document.getElementById(aShow)){ alert(aShow + "不存在，请检查程序！"); return false; }else{ show=aShow } xmlObj.open("GET", url, true); if(aEvent){ xmlObj.onreadystatechange = aEvent; }else{ xmlObj.onreadystatechange = function ajax_exec() { if (xmlObj.readyState < 4) { document.getElementById(show).innerHTML = "数据加载中..."; } if (xmlObj.readyState == 4) { if (xmlObj.status != 200){ document.getElementById(show).innerHTML = "加载出错：" + xmlObj.statusText; return false; } var htmlResponse = xmlObj.responseText; document.getElementById(show).innerHTML = htmlResponse; //将响应返回至显示的区域 return true; } } } xmlObj.send(null); } /* onreadystatechange: 每个状态改变是都会触发这个事件处理器，通常会调用一个javascript函数 readState: 请求状态 0＝未初始化,1＝正在加载,2＝已加载,3＝交互中,4＝完成 responseText: 服务器的响应，表示为一个串　 responsexml: 服务器的响应，表示为xml．这个对象可以解析为一个DOM对象 status: 服务器的http状态码（200对应ok，404对应not found）　 statusText: 服务器的http状态码相应文本 */