前端之家收集整理的这篇文章主要介绍了
AJAX 的基本框架,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
//创建XMLHttpRequest对象
function getXMLHttpRequest()
{
http_request = false;
if(window.XMLHttpRequest)
{
http_request = new XMLHttpRequest();
if(http_request.overrideMimeType)
http_request.overrideMimeType("text/xml");
}
else
{
if(window.ActiveXObject)
{
try
{
http_request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e)
{
}
}
}
}
return http_request;
}
//发送请求
/*
@http_request 异步请求对象
@url 请求位置
@method 请求方法
@content 请求内容 eg. param1=xxx1¶m2=xxx2
@callBack 请求回调
*/
function send_request(http_request,url,method,content,callBack)
{
if(!http_request)
{
alert('无法创建异步请求对象!');
return;
}
http_request.onreadystatechange = callBack;
if(method.toUpperCase() == 'GET')
{
http_request.open(method,true);
http_request.setRequestHeader('Content-Type','text/html;charset=UTF-8');
}
else if(method.toUpperCase == 'POST')
{
http_request.open(method,'application/x-www-form-urlencoded');
}
else
{
alert('请求方法出错!');
return;
}
http_request.send(content);
}
//返回文本的
function getWebContent()
{
var webConReq = getXMLHttpRequest();//ajax不支持跨跨域访问
send_request(webConReq,'./servlet/testServlet','get',null,function()
{
if(webConReq.readyState == 4)
{
if(webConReq.status == 200)
{
var doc = webConReq.responseText;
if(doc)
{
document.getElementById("pageCon").innerHTML = doc;
}
}
else
{
alert('请求失败!');
}
}
}
);
}
//返回xml
function getXml()
{
var webConReq = getXMLHttpRequest();//ajax不支持跨跨域访问
send_request(webConReq,'./NewFile.xml',function()
{
if(webConReq.readyState == 4)
{
if(webConReq.status == 200)
{
var doc = webConReq.responseXML;
if(doc)
{
var root = doc.getElementsByTagName("items")[0];
var items = root.getElementsByTagName("item");
var html = '';
for(var i=0;i<items.length;i++)
{
html += "id:" + items[i].getAttribute('id');
html += " name:" + items[i].getAttribute('name');
}
document.getElementById("xml").innerHTML = html;
}
}
else
{
alert('请求失败!');
}
}
}
);
}
<a href="javascript:getWebContent();">异步获取页面</a>
<font id="pageCon"></font><br>
<a href="javascript:getXml();">异步XML</a>
<font id="xml"></font>
原文链接:https://www.f2er.com/ajax/165728.html