ajax：利用XMLHttpRequest建立到服务器的连接并处理返回信息

最新推荐文章于 2023-02-15 22:07:33 发布

原创最新推荐文章于 2023-02-15 22:07:33 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#xmlhttprequest #ajax #服务器 #safari #function #opera

网络程序设计同时被 2 个专栏收录

11 篇文章

订阅专栏

Javaweb

2 篇文章

订阅专栏

这篇博客详细介绍了如何使用XMLHttpRequest对象实现AJAX功能，包括在不同浏览器中的兼容处理，以及通过GET方法发送请求并接收服务器响应，实现实时更新页面内容。通过示例代码展示了从用户输入获取数据，向服务器发送请求，并将返回信息显示在页面上的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<script language="javascript" type="text/javascript">
　　function ajaxFunction()
　　{
　　var xmlHttp;
　　try
　　{
　　// Firefox,Opera 8.0+,Safari
　　xmlHttp=new XMLHttpRequest();
　　}
　　catch (e)
　　{
　　// Internet Explorer
　　try
　　{
　　xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
　　}
　　catch (e)
　　{
　　try
　　{
　　xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
　　}
　　catch (e)
　　{
　　alert("您的浏览器不支持AJAX！");
　　return false;
　　}
　　}
　　}

/*以上浏览器类型的判定项也可等价为：

try{

　　if( window.ActiveXObject ){

　　for( var i = 5; i; i-- ){

　　try{

　　if( i == 2 ){ //IE

　　xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" ); }

　　else{

　　xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );

　　xmlhttp_request.setRequestHeader("Content-Type","text/xml");

　　xmlhttp_request.setRequestHeader("Charset","gb2312"); }

　　break;}

　　catch(e){

　　xmlhttp_request = false; } } }

　　else if( window.XMLHttpRequest ) //Firefox,Opera 8.0+,Safari

　　{ xmlhttp_request = new XMLHttpRequest();

　　if (xmlhttp_request.overrideMimeType)

　　{ xmlhttp_request.overrideMimeType('text/xml'); } } }

　　catch(e){ xmlhttp_request = false; }

*/
xmlHttp.onreadystatechange=function()
　　{
　　if(xmlHttp.readyState==4&&xmlHttp.status==200)//xmlHttp.status标示HTTP连接的状态
　　{
　　document.myForm.time.value=xmlHttp.responseText;
　　}
　　}
xmlHttp.open("GET","http://",true);
　　xmlHttp.send(null);
if(document.myForm.username.value.length==0)

alert(xmlHttp.responseText);
　　}
　　</script>
</head>
　　<body>
　　<form name="myForm" onSubmit="return ajaxFunction()" >
　　用户： <input type="text" name="username" >
　　时间： <input type="text" name="time" >
<input type="submit" name="button" value="提交">
　　</form>
　　</body>
　　</html>

//改进后，可实现与服务器的实时交互

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
　　<script type="text/javascript">
<!--
var str=new String();
str="";
　　function ajaxFunction()
　　{
　　var xmlHttp;
　　try
　　{
　　// Firefox,Opera 8.0+,Safari
　　xmlHttp=new XMLHttpRequest();
if (xmlhttp_request.overrideMimeType)
　　  {
      xmlhttp_request.override.MimeType('text/xml');
   }

　　}
　　catch (e)
　　{
　　// Internet Explorer
　　try
　　{
　　xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
　　}
　　catch (e)
　　{
　　try
　　{
　　xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
　　}
　　catch (e)
　　{
　　alert("您的浏览器不支持AJAX！");
　　return false;
　　}
　　}
　　}
　　xmlHttp.onreadystatechange=function()
　　{
　　if(xmlHttp.readyState==4)
　　{
/*var str=new String();
str=xmlHttp.responseText;
var file=new ActiveXObject("Scripting.FileSystemObject");
var f=file.CreateTextFile("C:\\Users\\chen\\Desktop\\0.xml",true);
f.Write(str);
f.Close();*/
str=xmlHttp.responseText;
//alert(str);
document.getElementById("show").innerHTML=str;
//window.setTimeout("afxFunction()",1000*60);

　　}
　　}
var url="http://chen-pc:8080/ajax/response.jsp";//请求内容，自编辑
url=url+"?uid="+document.myForm.id.value;
//alert(url);

　　xmlHttp.open("GET",url,true);
　　xmlHttp.send(null);
//window.setTimeout("afxFunction()",1000*60);

　　}

-->
　　</script>
</head>
　　<body>

　　<form name="myForm" method="get" action="#" >
ID: <input type="text" name="id"><br>
<input type="button" name="button" value="获取信息" onclick="ajaxFunction();"><br><br>
<div id="show">学籍信息：</div>
　　</form>
　　</body>
　　</html>