当前位置: 首页 > 图文教程 > 网络编程 > AJAX技术 > AJAX客户端说明,XMLHttpRequest对象

AJAX技术
AJAX 用户注册时的应用实例
ajax readyState的五种状态详解
php AJAX POST的使用实例代码
Ajax 用户名验证是否存在
Ajax+PHP简单基础入门实例教程
AJAX 异步传输数据的问题
ASP AJAX 静态分页
js装载xml文件然后发向服务器的实现代码
完成了AJAX树附原理分析
AJAX 支持搜索引擎问题分析
ajax Suggest类似google的搜索提示效果
Ajax 框架学习笔记
用ajax xml的数据读取的HelloWorld程序
Ajax 表单验证 实现代码
Ajax request response 乱码解决方法
AJAX 随记
ajax 乱码的一种解决方法
ajax session过期问题的几个解决方案
四步学会 Ajax
Ajax异步(请求)提交类 支持跨域

AJAX技术 中的 AJAX客户端说明,XMLHttpRequest对象


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-13   浏览: 45 ::
收藏到网摘: n/a

在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
其他的不用多说明了,看注释应该就差不多了,如果有不对的地方请批评指教,谢谢!