AJax技术

一日精通Ajax技巧

字号+ 作者:H5之家 来源:H5之家 2017-03-30 11:05 我要评论( )

写文章:一日精通Ajax技巧(转载)Ajax这个名称怎么来的,本人也不得而之了,大概是(Active Javascript Action Xml)吧,说白一点就是应用了 javascript、xmlht

写文章:一日精通Ajax技巧(转载)
Ajax这个名称怎么来的,本人也不得而之了,大概是(Active Javascript Action Xml)吧,说白一点就是应用了 javascript、xmlhttp和xmldom技巧及网站后台来处理用户的一些把持的方法吧。
那么本人就分三步来阐明如何应用 Ajax 技巧来做开发。
一、用 javascript 把持 xmlhttp 对象
二、服务器部对xmlhttp恳求的响应(PHP典范)
三、xmldom 的应用方法

那费话少讲,先说第一部份:
一、用 javascript 把持 xmlhttp 对象
IE7, Mozilla ,Firefox等浏览器中,javascript是内置有 XMLHttpRequest 这个对象的,但IE5 则没有,需要用如下方法来启动:
//IE 6
try{ xhttp = new ActiveXObject('Msxml2.XMLHTTP'

;} catch(e){ ; }
//IE5
if(xhttp == null) try { xhttp = new ActiveXObject('Microsoft.XMLHTTP'

;} catch(e){ ; }
那考虑不同浏览器的兼容,启动一个xmlhttp一般都要按如下方法:
CODE: [Copy to clipboard] var xhttp = null;
if(window.XMLHttpRequest){ //IE7, Mozilla ,Firefox 等浏览器内置该对象
xhttp = new XMLHttpRequest();

}else if(window.ActiveXObject){ //IE6、IE5
try{ xhttp = new ActiveXObject('Msxml2.XMLHTTP');} catch (e){ ; }

if( xhttp == null) try { xhttp = new ActiveXObject('Microsoft.XMLHTTP');} catch (e){; }

}对于 xmlhttp 的应用,一般遵照如下的次序:
1、初始化 xmlhttp 对象(上文);
2、打开链接
方法
xhttp.open('GET', purl, true);
参数一:用 GET 或 POST 方法发送数据
参数二、恳求网址(只能恳求你服务器上的资源,一般浏览器安全限制不能读取跨域的数据)
参数三、true 表现异步传输(服务器返回信息完成前,你可以进行其它把持),false 表现阻断方法的传输。
3、设定要发送的 http 恳求头
方法:
xhttp.setRequestHeader(key,value);
一般来说,默认要发送的头是:
xhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded'

;
这种表现发送的内容类型的恳求头用于发送文本数据,而且javascript默认是以unicode发送的
还有另外一种情势是:
xhttp.setRequestHeader('Content-Type','multipart/form-data'

;
是表现发送二制情势的数据,由于安全性原因,javascript一般不能用这种方法来发送数据,所以这个头一般没什么用。
假如你的网站开启了应用 refer 参数来防盗链,那么你必需用这个方法指定 Refer 参数,或者假如用户需要登录才干进行某把持,那么要指定 Cookie 的恳求头。
4、send 数据
方法:xhttp.send(postdata);
对于用 get攻手恳求,不需要指定postdata,直接用 test.php?a=a&b=b 这样情势的网址来恳求即可。
假如是post方法,需要用 key1=value2&key2=value2 这样的情势来对数据进行处理,把它合并在 postdata 字串中,然后发送。
留心事项:

javascript默认发送数据的方法是unicode,处理返回的数据必需是utf-8格局,因此,在发送的时候,需要用escape()函数来处理postdata和网址的value,在服务器上必需还原这些value,并把unicode转为页面编码值,因此假如用 jsp 或 asp.net 都会比拟简略,但假如用php处理起来是什么费劲的,等下会教你如何做。

5、确认服务器返回材料完成下载
[1] 假如用阻断的方法来发送恳求,那么直接用 if(xhttp.readyState == 4)就能判定是否完成。
readyState 的具体属性值为:
0 没open
1 没send
2 状态未知
3 正在传送
4 传送完成
当然为了保障起见,还需要加多一重判定
就是 if(xhttp.status == 200)
status 就是 http 协议里的返回头代码
1xx 表现(唉呀,忘记了)
2xx 表现成功的信息
3xx 表现页面转移
4xx 页面不存在
5xx 表现服务器的各种错误
假如你的页面没特别处理,一般用 if(xhttp.status == 200)来确信内容返回是准确的

[2] 假如用异步传输,需要用 onreadystatechange 的事件来监听
xhttp.onreadystatechange = function()
{
//这里来进行上面阻断方法的判定
if(myajax.xhttp.readyState == 4){
if(myajax.xhttp.status == 200){
//要进行的后续把持
}
}
}
6、获取返回成果
属性:
[1]xhttp.responseBody;
[2]xhttp.responseStream;
[3]xhttp.responseXml;
[4]xhttp.responseText;
其中1、2都是二进制的方法,一般很少会用到,4不用看都知道了
假如服务端无意外的话[3]返回的是一个xmldom的对象
二、服务器部对xmlhttp恳求的响应(PHP典范)
为了简化把持,在这里把 xmlhttp的各作把持封装为一个类
CODE: [Copy to clipboard] function DedeAjax(WiteOKFunc){ //WiteOKFunc 为异步状态事件处理函数
//xmlhttp和xmldom对象
this.xhttp = null;
this.xdom = null;
//post或get发送数据的键值对
this.keys = Array();
this.values = Array();
this.keyCount = -1;
//http恳求头
this.rkeys = Array();
this.rvalues = Array();
this.rkeyCount = -1;
//恳求头类型
this.rtype = 'text';
//初始化xmlhttp
if(window.XMLHttpRequest){//IE7, Mozilla ,Firefox 等浏览器内置该对象
this.xhttp = new XMLHttpRequest();
}else if(window.ActiveXObject){//IE6、IE5
try { this.xhttp = new ActiveXObject('Msxml2.XMLHTTP');} catch (e) { }
if (this.xhttp == null) try { this.xhttp = new ActiveXObject('Microsoft.XMLHTTP');} catch (e) { }
}
this.xhttp.onreadystatechange = WiteOKFunc;
//rs: responseBody、responseStream、responseXml、responseText
//以下为成员函数
//--------------------------------
//初始化xmldom
this.InitXDom = function(){
var obj = null;
if (typeof(DOMParser) != 'undefined') { // Gecko、Mozilla、Firefox
var parser = new DOMParser();
obj = parser.parseFromString(xmlText, 'text/xml');
} else { // IE
try { obj = new ActiveXObject('MSXML2.DOMDocument');} catch (e) { }
if (obj == null) try { obj = new ActiveXObject('Microsoft.XMLDOM'); } catch (e) { }
}
this.xdom = obj;
};
//增加一个POST或GET键值对
this.AddKey = function(skey,svalue){
this.keyCount ;
this.keys[this.keyCount] = skey;
this.values[this.keyCount] = escape(svalue);
};
//增加一个Http恳求头键值对
this.AddHead = function(skey,svalue){
this.rkeyCount ;
this.rkeys[this.rkeyCount] = skey;
this.rvalues[this.rkeyCount] = svalue;
};
//清除当前对象的哈希表参数
this.ClearSet = function(){
this.keyCount = -1;

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 按钮调用ajax函数的同时执行php代码

    按钮调用ajax函数的同时执行php代码

    2017-03-30 12:00

  • ajax文件下载异步处理

    ajax文件下载异步处理

    2017-03-29 13:03

  • WEB开发 Eclipse mash up RIA web2.0 Python Apache AJAX Javas

    WEB开发 Eclipse mash up RIA web2.0 Python Apache AJAX Javas

    2017-03-29 12:01

  • SpringMvc的ajax

    SpringMvc的ajax

    2017-03-29 12:01

网友点评