www.baike369.com
百科369 > Ajax教程 > XMLHttpRequest(XHR)对象身份验证(open()方法)

XMLHttpRequest(XHR)对象身份验证(open()方法)


XMLHttpRequest(XHR)对象身份验证(open()方法)

在构建应用程序的过程中,经常希望对某些资源的访问加以约束,如特殊的目录或者文件。一种在Web服务器上可能实现的简单身份验证形式称为HTTP基本验证。

XMLHttpRequest对象支持HTTP身份认证,是在于它允许采用参数形式将用户名和密码规范传递给open()方法:

xhr.open("GET","bankaccount.php",true,"AjaxLogin","onemillion$");

当然,如果担心传输期间的密码嗅探,将需要确保在SSL上运行这样的请求。而且,最好不要在请求中硬编码这些值,而是通过Web表单向用户收集这些数据。

当open()方法接收到通过参数传递的凭证时,所有浏览器在进行第一次请求时,都不会自动向服务器发送这些凭证。但是,在所有情况下,不管用任何方法一旦确认了身份认证,就像期望的那样,将会调用onreadystatechange()方法,同时readyState也会等于4。

考虑到在XHR中如何处理HTTP身份认证存在的不一致性,建议不要这样做,我们可以使用自己的用户凭证检查形式。但如果因为某些原因而必须使用它,就应当在浏览器中通过运行test.html文件彻底测试所支持的身份认证状态。


实例

1. test.html文件的源代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>XMLHttpRequest(XHR)对象身份验证(open()方法)实例-www.baike369.com</title>
<script type="text/javascript"> 
function encodeValue(val)
{
  var encodedVal;
  if (!encodeURIComponent)
  {
    encodedVal = escape(val);
    /* fix the omissions */
    encodedVal = encodedVal.replace(/@/g, '%40');
    encodedVal = encodedVal.replace(/\//g, '%2F');
    encodedVal = encodedVal.replace(/\+/g, '%2B');
  }
  else
  {
    encodedVal = encodeURIComponent(val);
    /* fix the omissions */
    encodedVal = encodedVal.replace(/~/g, '%7E');
    encodedVal = encodedVal.replace(/!/g, '%21');
    encodedVal = encodedVal.replace(/\(/g, '%28');
    encodedVal = encodedVal.replace(/\)/g, '%29');
    encodedVal = encodedVal.replace(/'/g, '%27');
  }
  /* clean up the spaces and return */
  return encodedVal.replace(/\%20/g,'+'); 
}
function createXHR()
{
  try { return new XMLHttpRequest(); } catch(e) {}
  try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } catch (e) {}
  try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } catch (e) {}
  try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {}
  try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {}
  return null;
}
function sendRequest()
{
  var username = document.getElementById('txtUser').value;
  var password = document.getElementById('txtPass').value;
  var url = "http://www.baike369.com/code.php";
  var xhr = createXHR();
  if (xhr)
  {
    xhr.open("GET", url, true, username, password);
    xhr.onreadystatechange = function(){handleResponse(xhr);}; 
    xhr.send(null);
  }
  return false;
}
function handleResponse(xhr)
{
  if (xhr.readyState == 4 && xhr.status == 200)
  {
    var responseOutput = document.getElementById("responseOutput");
    responseOutput.innerHTML = "<h3>reponseText</h3>" + xhr.responseText;
    responseOutput.style.display = "";
  }
}
window.onload = function () 
{ 
  document.requestForm.requestButton.onclick = function () { return sendRequest(); };
};</script> 
</head>
<body>
<h3><span style="color: #000000; text-decoration: none;">Login</span></h3>
Use AjaxLogin/thepassword for the correct login.
<div style="width: 500px;">
  <form name="requestForm" action="#">
  <table>
  <tr>
  <td style="font-weight:bold;">Username: </td>
  <td><input type="text" id="txtUser" name="txtUser" /></td>
  </tr>
  <tr>
  <td style="font-weight:bold;">Password: </td>
  <td><input type="password" id="txtPass" name="txtPass" /></td>
  </tr>
  <tr>
  <td colspan="2" align="center">
    <input type="submit" id="requestButton" name="requestButton" value="Login" />
  </td>
  </tr>
  </table>
  <br />
  <div id="responseOutput" class="results" style="display:none;">&nbsp;</div>
  </form>
  </div>
</body>
</html>

2. code.php文件的源代码如下:

<?php
header("Cache-Control: no-cache");
header("Pragma: no-cache");
print "You are logged in";
?>

3. 显示效果如下:

XMLHttpRequest(XHR)对象身份验证(open()方法)实例

Copyright© 2011-2016 www.baike369.com All Rights Reserved