Ajax初体验

最新推荐文章于 2025-06-26 09:12:36 发布

shdhenghao3

最新推荐文章于 2025-06-26 09:12:36 发布

阅读量718

点赞数

CC 4.0 BY-SA版权

文章标签： ajax xmlhttprequest 浏览器 microsoft function browser

本文链接：https://blog.youkuaiyun.com/shdhenghao3/article/details/7949775

<!-- index.php -->
<html>
<head>
<script type="text/javascript">
/*
 * 初始化XMLHttpRequest:判断当前浏览器是否为IE，从而得知使用哪个方法进行初始化
*/

   function createXMLHttp(){
    var request;
    var browser = navigator.appName; 					//得到当前浏览器
    if(browser == "Microsoft Internet Explorer"){ 			//如果是IE浏览器就用新建一个ActiveObject
     request = new ActiveXObject("Microsoft.XMLHttp");
    }else{								//非IE浏览器
     request = new XMLHttpRequest();
   }
    return request;
   }

 var xhr = createXMLHttp();

  function HelloShow(){
   var url = "hello.php?name=" + document.forms[0].name.value;		//跳转路径
   xhr.open("GET",url,true);						//跳转
   xhr.onreadystatechange = getHello;					//使用onreadystatechange设置回调函数getHello
   xhr.send();								//发送请求
  }

  function getHello(){
	  /*
	    XMLHttpRequest状态表
	    取值	状态			描述
	    0 	未初始化  	已经创建XMLHttpRequest对象，但还没有初始化
	    1 	发送			已经调用该对象的open()方法，并且该对象已经准备好把请求发送发送到服务器
	    2 	发送         	 已经通过send()把请求发送到服务器，但是还没收到响应
	    3  	正在接收  	已经接收到响应，但是消息体部分还没有完全接收
	    4 	已加载      	响应已经完全接收
	    */
   if(xhr.readyState == 4){					//判断XMLHttpRequest状态
    var helloStr = xhr.responseText; 				//设置heloStr为响应值
    document.getElementById("show").innerHTML = helloStr; 	//返回响应值到id为show的div标签中
   }

  }
  </script>
</head>
<body>
	<form>
		name:<input type="text" name="name" value="" οnblur="HelloShow()">  <!--失去焦点时触发  -->
	</form>
	<div id="show"></div>							<!-- 接受返回信息 -->
</body>
</html>

<!-- hello.php -->
<?php header("Content-Type:text/html;charset=gb2312");
  $str =$_GET['name'];
  echo "hello $str";
?>