怎么利用ajax异步请求调用服务器上的html静态页面?

这个请求是有区别的，最大的区别就是是否跨域。具体跨域是怎么界定的，你自己去查资料吧。只要记住一点，跨域就是用域来区分的，不管文件是不是在同一个地方。也就是说同一个文件夹也可能会产生跨域问题。

请求本域名下的文件，只要写标准的ajax请求即可。我想基本的写法你是会了的，我这就不写了。但是我建议你去看看原生的怎么写的，因为你了解原生怎么写的，你就不知道jQ只要一个load就干完的事到底干了什么。就像1+1可以得到2，但是你用了两天时间解开的一个方程式也可以得到2，同样是2，但是绝对不一样。

现在来说跨域。只说解决方法。跨域一般情况下有三种解决方法。第一种就是干掉产生跨域的源头——浏览器，修改浏览器的设置就可以了，这个不建议。第二种，是生产环境下最常用的，就是用服务器设置解决。你请求自己的服务器，让自己的服务器去请求别的服务器上的资源，就规避了跨域问题。现在不知道你能用这种方式不。第三种，就是你自己解决，用JSONP解决。最简单的方法，就还是用jQ。在jQ的官方文档里搜索jQuery.ajax()，之后页面内搜索crossDoamin，然后仔细看看就可以了。但是还是建议搜索一下JSONP是什么。

利用回调函数获取服务器返回的结果

JavaScript code

var xmlHttp

function createXMLHttpRequest() {

if(window.XMLHttpRequest) {

xmlHttp = new XMLHttpRequest()

} else if (window.ActiveXObject) {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")

}

}

function routeList(){

createXMLHttpRequest()

url = "manage_action_class.php?"&ran="+Math.random() //后端请求页面

method = "GET" //传输方式

xmlHttp.open(method,url,true)

xmlHttp.onreadystatechange = showList //这里为回调函数

xmlHttp.send(null)

}

function showList(){

if (xmlHttp.readyState == 4){

if (xmlHttp.status == 200){

var text = xmlHttp.responseText //这里获得服务器返回的数据

document.getElementById("route").innerHTML = text //将数据放入html指定div中

}else {

alert("response error code:"+xmlHttp.status)

}

}

}

给出完整解答。期待楼主给分，经过测试，绝对可用！而且修改的部分非常少。

我的思路是，在 title 里面传递url地址，然后当调用把 title 转移给 popup的innerHMTL时，产生ajax请求，请求完成后，修改事件源对象的ajaxContent属性，并用这个属性来保存请求的值，以避免鼠标移动重复请求。

请仔细对比我修改的代码。

顺便提一句：ajax不支持跨域请求，如果是请求自己域内页面，是没有问题的，如果想获得baidu.com首页内容是不可能的，这个时候就只能用iframe来实现了！如果楼主是要跨域请求，那么还是换成iframe.我也提供里一个Iframe函数，只要替换一下调用就可用了。

附上全部代码：

给分！

<script type="text/javascript">

function MQ_QPopup()

{

this.pFontFamily='verdana'

this.pFontSize='12px'

this.pFontColor='#030303'

this.pBgColor='#f8f8f8'

this.pBorder='1px #000000 solid'

var pOpacityIE='80'

var pOpacityFF=0.8

this.init=function()

{ var style="position:absolutez-index:1000visibility:hiddenpadding:3pxword-break:keep-all"

style+="font-family:'"+this.pFontFamily+"'"

style+="font-size:"+this.pFontSize+""

style+="color:"+this.pFontColor+""

style+="background-color:"+this.pBgColor+""

style+="border:"+this.pBorder+""

var html="<div id='MQ_popupLayer' style=\""+style+"\"></div>"

document.write(html)

}

this.doit=function(evt)

{ evt=(evt)?(evt):(window.event)?(window.event):""

var o=(evt.target)?(evt.target):(evt.srcElement)

var mouseX=(evt.x)?(evt.x):(evt.pageX-document.body.scrollLeft)

var mouseY=(evt.y)?(evt.y):(evt.pageY-document.body.scrollTop)

if(o.title!='' &&o.title!=null)

{ o.popupText=o.title

o.title=''

}

else if(o.alt!='' &&o.alt!=null)

{ o.popupText=o.alt

o.alt=''

}

var divPopupText=document.getElementById('MQ_popupLayer')

divPopupText.style.filter="alpha(opacity="+pOpacityIE+")"//ie

divPopupText.style.opacity=pOpacityFF//firefox

if (o.popupText!='' &&o.popupText!=null)

{ divPopupText.style.visibility='visible'

divPopupText.style.left=mouseX+15+document.body.scrollLeft

divPopupText.style.top=mouseY+15+document.body.scrollTop

//divPopupText.innerHTML=o.popupText这里的内容就不用再显示了，去掉

// o.popupText 里面存放请求的URL地址。 把这个地址拿出来用AJAX来请求。

// 为了避免移动鼠标产生的多次请求，把请求完成后的内容放入到 对象的一个属性里面。

// 如果不存在ajaxContent属性，证明还没有产生请求

if(!o.ajaxContent){

new Ajax( o.popupText ,o)

// Iframe( o.popupText ,o)如果是跨域跨请求，用iframe来实现

divPopupText.innerHTML = o.ajaxContent

//否则已经产生过请求，那么直接把内容放到提示框内就可以了。

}else{ divPopupText.innerHTML=o.ajaxContent }

}

else

{ divPopupText.style.left=0

divPopupText.style.top=0

divPopupText.style.visibility='hidden'

}

if(divPopupText.offsetWidth+mouseX>document.body.clientWidth)

divPopupText.style.left=document.body.clientWidth-divPopupText.offsetWidth

if(divPopupText.offsetHeight+mouseY>document.body.clientHeight)

divPopupText.style.top=document.body.clientHeight-divPopupText.offsetHeight

}

}

var MQ_popupObj=new MQ_QPopup()

MQ_popupObj.init()

document.onmousemove=MQ_popupObj.doit

function Ajax(url,obj)

{

var request=null

if( window.XMLHttpRequest ) { request=new XMLHttpRequest()}

else if( window.ActiveXObject ){ request=new ActiveXObject("Microsoft.XMLHttp")}

if(request){

request.open("GET", url , true)

request.onreadystatechange = function(){

if(request.readyState==4 &&request.status==200)

{

obj.ajaxContent =request.responseText

}else{

obj.ajaxContent ="Loading...."

}

}

request.send(null)

}

}

function Iframe(url,obj)

{

obj.ajaxContent='<iframe src="'+url+'" frameborder="0" width="100%" height="100%"></iframe>'

}

</script>

<body>

<center>

<div class="mainborder">

<img src="http://img.baidu.com/img/logo-zhidao.gif" width=50 border=2 title="a.htm">

<!-- 建议楼主在当前目录下写一个静态页面 a.htm 测试一下，绝对可用 -->

</div>

<span id="test"></span>

</center>

</body></html>

---