AJAX客户端说明,XMLHttpRequest对象

  在CommunityServer中运用了自己的AJAX机制,没有借助其他的辅助控件。其中客户的XMLHttpRequest对象的封装,就足以让人大饱眼福,在一般的浏览器其都能够运行AJAX。下面我们来学习学习这个咚咚,希望能给更多的人带来帮助。

  首先当然是要了解一下浏览器中的XMLHttp对象了:

  XMLHTTP方法:

  备注:客户机可以使用XMLHTTP对象发送任意的HTTP请求,接受HTTP应答,还可以对应答的XML文档进行解析。

  Open方法:初始化一个Msxml2.XMLHTTP请求,指定HTTP请求方式、URL以及鉴定信息。

  语法:

  Open( bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword )

  参数介绍:

  bstrMethod: 数据传送方式,即GET或POST。

  bstrUrl: 服务网页的URL。

  varAsync: 是否同步执行。缺省为True,即同步执行,但只能在DOM中实施同步执行。用中一般将其置为False,即异步执行。

  bstrUser: 用户名,可省略。

  bstrPassword:用户口令,可省略。

  Send方法:发送HTTP请求到服务器,返回应答。

  语法:

  oXMLHttpRequest.send(varBody)

  说明:此方法是否同步取决于Open方法的varAsync参数。如果设为True则为同步,调用立刻返回,如果设为False调用直到整个应答被接收了才返回。

  setRequestHeader( bstrHeader, bstrvalue )

  bstrHeader:HTTP 头(header)

  bstrvalue: HTTP 头(header)的值

  如果Open方法定义为POST,可以定义表单方式上传:

  xmlhttp.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded")

  XMLHTTP属性:

  onreadystatechange:在同步执行方式下获得返回结果的事件句柄。只能在DOM中调用。

  responseBody: 结果返回为无符号整数数组。

  responseStream: 结果返回为IStream流。

  responseText : 结果返回为字符串。

  responseXML: 结果返回为XML格式数据。

  运用这个原理也可以做网络小偷程序,网络爬虫应该就是应用这个东西来完成的吧,不过我没有做过,可能在不久的将来会制作个来玩玩,这里我们最主要的是看看CS中是如何封装他的:

  1//Ajax Start

  2/**////<summary>

  3///创建回调对象,如果存在window.XMLHttpRequest()对象,则返回此对象,如果是IE则搜索Msxml2.XMLHTTP各个版本及Microsoft.XMLHTTP并创建对象返回。

  4///</summary>

  5function Ajax_GetXMLHttpRequest() {

  6    if (window.XMLHttpRequest) {

  7        return new XMLHttpRequest();

  8    } else {

  9        if (window.Ajax_XMLHttpRequestProgID) {

  return new ActiveXObject(window.Ajax_XMLHttpRequestProgID);

  } else {

  var progIDs = ["Msxml2.XMLHTTP.5.0", "Msxml2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];

  for (var i = 0; i < progIDs.length; ++i) {

  var progID = progIDs[i];

  try {

  var x = new ActiveXObject(progID);

  window.Ajax_XMLHttpRequestProgID = progID;

  return x;

  } catch (e) {

  }

  }

  }

  }

  return null;

  }

  /**////<summary>

  ///Ajax回调。

  ///</summary>

  ///<param name="type">调用服务端函数所在的类包括命名空间(如:NExplus.Controls.SiteHeader)。</param>

  ///<param name="id">客户端所对应的标记的ID(如:<div id="ID"></div>)。</param>

  ///<param name="method">服务端(方法)函数名称(被AjaxMethod标记)。</param>

  ///<param name="args">传到服务器的字符串。</param>

  ///<param name="clientCallBack">同步或异步回调。</param>

  ///<param name="debugRequestText">调试/请求字符串。</param>

  ///<param name="debugResponseText">调试/输出字符串。</param>

  ///<param name="debugErrors">调试的错误信息。</param>

  ///<param name="includeControlValuesWithCallBack">是否和控件及其值一起回调。</param>

  ///<param name="url">Url地址。</param>

  function Ajax_CallBack(type, id, method, args, clientCallBack, debugRequestText, debugResponseText, debugErrors, includeControlValuesWithCallBack, url) {

  if (!url)

  {

  url = window.location.href;

  url = url.replace(/\#.*$/, '');//去除URL中标签部分,即"#"之后的字符串。

  //加入参数Ajax_CallBack并设为true,说明是AJAX回调。

  if (url.indexOf('?') > -1)

  url += "&Ajax_CallBack=true";

  else

  {

  if (url.substr(url.length - 1, 1) == "/")

  url += "default.aspx";

  url += "?Ajax_CallBack=true";

  }

  }

  var x = Ajax_GetXMLHttpRequest();//取得XMLHttpRequest对象。

  var result = null;

  if (!x) {

  result = { "value":null, "error": "NOXMLHTTP"};

  if (debugErrors) {

  alert("error: " + result.error);

  }

  if (clientCallBack) {

  clientCallBack(result);

  }

  return result;

  }

  x.open("POST", url, clientCallBack ? true : false);//以Post方式打开对象,这样在服务端就可以用Request.Form获取参数。

  x.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");

  if (clientCallBack) {

  //如果同步,判断状态,输出错误消息。

  x.onreadystatechange = function() {

  var result = null;

  if (x.readyState != 4) {

  return;

  }

  if (debugResponseText) {

  alert(x.responseText);

  }

  try

  {

  var result = eval("(" + x.responseText + ")");

  if (debugErrors && result.error) {

  alert("error: " + result.error);

  }

  }

  catch (err)

  {

  if (window.confirm('The following error occured while processing an AJAX request: ' + err.message + '\n\nWould you like to see the response?'))

  {

  var w = window.open();

  w.document.open('text/plain');

  w.document.write(x.responseText);

  w.document.close();

  }

  result = new Object();

  result.error = 'An AJAX error occured.  The response is invalid.';

  }

  clientCallBack(result);

  }

  }

  var encodedData = "Ajax_CallBackType=" + type;

  if (id) {

  encodedData += "&Ajax_CallBackID=" + id.split("$").join(":");

  }

  encodedData += "&Ajax_CallBackMethod=" + method;

  if (args) {

  for (var i in args) {

  encodedData += "&Ajax_CallBackArgument" + i + "=" + encodeURIComponent(args[i]);

  }

  }

  //如果加入控件,则加入控件数据。

  if (includeControlValuesWithCallBack && document.forms.length > 0) {

  var form = document.forms[0];

  for (var i = 0; i < form.length; ++i) {

  var element = form.elements[i];

  if (element.name) {

  var elementValue = null;

  if (element.nodeName == "INPUT") {

  var inputType = element.getAttribute("TYPE").toUpperCase();

  if (inputType == "TEXT" || inputType == "PASSWORD" || inputType == "HIDDEN") {

  elementValue = element.value;

  } else if (inputType == "CHECKBOX" || inputType == "RADIO") {

  if (element.checked) {

  elementValue = element.value;

  }

  }

  } else if (element.nodeName == "SELECT") {

  elementValue = element.value;

  } else if (element.nodeName == "TEXTAREA") {

  elementValue = element.value;

  }

  if (elementValue) {

  encodedData += "&" + element.name + "=" + encodeURIComponent(elementValue);

  }

  }

  }

  }

  //如果是调试,则弹出发送的数据。

  if (debugRequestText) {

  alert(encodedData);

  }

  x.send(encodedData);//向服务器发送数据。

  if (!clientCallBack) {

  if (debugResponseText) {

  alert(x.responseText);

  }

  result = eval("(" + x.responseText + ")");

  if (debugErrors && result.error) {

  alert("error: " + result.error);

  }

  }

  delete x;

  return result;

  }

  //Ajax End

  其他的不用多说明了,看注释应该就差不多了,如果有不对的地方请批评指教,谢谢!