`

Ajax 入门Demo

AjaxJavaScript浏览器PHPHTML 
阅读更多 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> Ajax 入门简介 </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">

<script language="javascript" type="text/javascript">
//将下面js代码贴到此位置 
</script>
 </HEAD>
 <BODY>
	<button onclick="callServer();">测试</button>
	<div id="show"></div>
 </BODY>
</HTML>

 

js代码：

var xmlHttp = false;
try {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	
  } catch (e2) {
    xmlHttp = false;
  }
}

if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
  xmlHttp = new XMLHttpRequest();
}

function callServer() {
  // Build the URL to connect to
  //var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state);
  var url="test.html";
  // 连接到服务url
  xmlHttp.open("GET", url, true);
  // 设置回调方法
  xmlHttp.onreadystatechange = updatePage;
  // Send the request
  xmlHttp.send(null);
}
//回调方法
function updatePage() {
	//如果解析已经完成
  if (xmlHttp.readyState == 4) {
    var response = xmlHttp.responseText;
    document.getElementById("show").innerText = response;
  }
}

 

 readyState的五种状态

 

(0)未初始化
 此阶段确认XMLHttpRequest对象是否创建，并为调用open()方法进行未初始化作好准备。值为0表示对象已经存在，否则浏览器会报错－－对象不存在。
 
(1)载入
 此阶段对XMLHttpRequest对象进行初始化，即调用open()方法，根据参数(method,url,true)完成对象状态的设置。并调用send()方法开始向服务端发送请求。值为1表示正在向服务端发送请求。
 
(2)载入完成
 此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据，并不能直接在客户端使用。值为2表示已经接收完全部响应数据。并为下一阶段对数据解析作好准备。
 
(3)交互
 此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody、responseText或responseXML属性存取的格式，为在客户端调用作好准备。状态3表示正在解析数据。
 
(4)完成
 此阶段确认全部数据都已经解析为客户端可用的格式，解析已经完成。值为4表示数据解析完毕，可以通过XMLHttpRequest对象的相应属性取得数据。

分享到：
| Ajax 入门简介
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics