Ajax 入门Demo

最新推荐文章于 2023-02-21 09:10:34 发布

最新推荐文章于 2023-02-21 09:10:34 发布 · 358 阅读

文章标签：

#Ajax #JavaScript #浏览器 #PHP #HTML #ViewUI

javaScript & ajax 专栏收录该内容

18 篇文章

订阅专栏

<!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对象的相应属性取得数据。