HttpRequest 对象

通过 XMLHttpRequest 对象，您可以在不重新加载整个页面的情况下更新网页中的某个部分。

XMLHttpRequest 对象

XMLHttpRequest 对象是用于幕后与服务器交换数据。

XMLHttpRequest 对象是开发者的梦想，因为您可以：

	在不重新加载页面的情况下更新网页
	在页面已加载后从服务器请求数据
	在页面已加载后从服务器接收数据
	在后台向服务器发送数据

XMLHttpRequest 对象方法

方法	描述
abort()	取消当前的请求。
getAllResponseHeaders()	返回头信息。
getResponseHeader()	返回指定的头信息。
open(method,url,async,uname,pswd)	规定请求的类型，URL，请求是否应该进行异步处理，以及请求的其他可选属性。 method：请求的类型：GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）
send(string)	发送请求到服务器。 string：仅用于 POST 请求
setRequestHeader()	把标签/值对添加到要发送的头文件。

XMLHttpRequest 对象属性

属性	描述
onreadystatechange	存储函数（或函数的名称）在每次 readyState 属性变化时被自动调用。
readyState	存放了 XMLHttpRequest 的状态。从 0 到 4 变化： 0：请求未初始化 1：服务器建立连接 2：收到的请求 3：处理请求 4：请求完成和响应准备就绪
responseText	返回作为一个字符串的响应数据。
responseXML	返回作为 XML 数据响应数据。
status	返回状态数（例如 "404" 为 "Not Found" 或 "200" 为 "OK"）。
statusText	返回状态文本（如 "Not Found" 或 "OK"）。

实例

一个简单的 XMLHttpRequest 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jsrun在线教程(jsrun.net)</title>
<script>
function loadXMLDoc()
{
  if (window.XMLHttpRequest)
  {
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","/statics/demosource/xmlhttp_info.txt",true);
  xmlhttp.send();
}
</script>
</head>
<body>

<h2>使用 XMLHttpRequest 对象</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>

</body>
</html>

创建一个简单的 XMLHttpRequest，从 TXT 文件中检索数据。

通过 getAllResponseHeaders() 检索头信息

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jsrun在线教程(jsrun.net)</title>
<script>
function loadXMLDoc(url)
{
  if (window.XMLHttpRequest)
  {
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      document.getElementById('p1').innerHTML=xmlhttp.getAllResponseHeaders();
    }
  }
  xmlhttp.open("GET",url,true);
  xmlhttp.send();
}
</script>
</head>
<body>

<p id="p1"> getAllResponseHeaders() 函数返回资源的头部信息，例如 length, server-type, content-type, last-modified 等。</p>
<button onclick="loadXMLDoc('/statics/demosource/xmlhttp_info.txt')">获取头部信息</button>

</body>
</html>

检索资源（文件）的头信息。

通过 getResponseHeader() 检索指定头信息

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jsrun在线教程(jsrun.net)</title>
<script>
function loadXMLDoc(url)
{
  if (window.XMLHttpRequest)
  {
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      document.getElementById('p1').innerHTML="Last modified: " + xmlhttp.getResponseHeader('Last-Modified');
    }
  }
  xmlhttp.open("GET",url,true);
  xmlhttp.send();
}
</script>
</head>
<body>

<p id="p1">getResponseHeader() 函数返回指定的资源头部信息，例如 length, server-type, content-type, last-modified 等。</p>
<button onclick="loadXMLDoc('/statics/demosource/xmlhttp_info.txt')">获取 "Last-Modified" 信息</button>

</body>
</html>

检索资源（文件）的指定头信息。

检索 ASP 文件的内容

<!DOCTYPE html>
<html>
<head>
<script>
function showHint(str)
{
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/statics/demosource/gethint.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<h3>Start typing a name in the input field below:</h3>
<form action=""> 
First name: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>Suggestions: <span id="txtHint"></span></p> 

</body>
</html>

当用户在输入字段键入字符时，网页如何与 Web 服务器进行通信。

从数据库中检索内容

<!DOCTYPE html>
<html>
<head>
<script>
function showCustomer(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }  
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getcustomer?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>

<form action=""> 
<select name="customers" onchange="showCustomer(this.value)">
<option value="">Select a customer:</option>
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
</form>
<br>
<div id="txtHint">Customer info will be listed here...</div>

</body>
</html>

网页如何通过 XMLHttpRequest 对象从数据库中提取信息。

检索 XML 文件的内容

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(url)
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
    x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
    for (i=0;i<x.length;i++)
      {
      txt=txt + "<tr>";
      xx=x[i].getElementsByTagName("TITLE");
        {
        try
          {
          txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
          }
        catch (er)
          {
          txt=txt + "<td>&nbsp;</td>";
          }
        }
      xx=x[i].getElementsByTagName("ARTIST");
        {
        try
          {
          txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
          }
        catch (er)
          {
          txt=txt + "<td>&nbsp;</td>";
          }
        }
      txt=txt + "</tr>";
      }
    txt=txt + "</table>";
    document.getElementById('txtCDInfo').innerHTML=txt;
    }
  }
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="txtCDInfo">
<button onclick="loadXMLDoc('/statics/demosource/cd_catalog.xml')">Get CD info</button>
</div>

</body>
</html>

创建一个 XMLHttpRequest 从 XML 文件中检索数据并把数据显示在一个 HTML 表格中。

HttpRequest 对象

HttpRequest 对象

XMLHttpRequest 对象

XMLHttpRequest 对象方法

XMLHttpRequest 对象属性

实例

一个简单的 XMLHttpRequest 实例

通过 getAllResponseHeaders() 检索头信息

通过 getResponseHeader() 检索指定头信息

检索 ASP 文件的内容

从数据库中检索内容

检索 XML 文件的内容

选择支付方式：