课程咨询 :15265420612
QQ:2720475033

  • 一日精通Ajax技术

    发布:烟台java培训机构      来源:烟台java培训机构      时间:2015-12-12

  • 一日精通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"

    { ; }

    //IE5+

    if(xhttp == null) try { xhttp = new ActiveXObject("Microsoft.XMLHTTP"

    atch(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的各作操作封装为一个类

上一篇:关于 XML 的十种观点

下一篇:XML入门的常见问题

最新开班日期  |  更多

java--名企定制班

java--名企定制班

开班日期:8月31日

java--零基础脱产班

java--零基础脱产班

开班日期:8月31日

java--在职提升班

java--在职提升班

开班日期:8月31日

java--精品业余班

java--精品业余班

开班日期:8月31日

2001-2017 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56