ajax是什么开发步骤,AJAX入门3-AJAX开发步骤

AJAX开发框架

AJAX实质上也是遵循B/S模式,所以这个框架基本的流程是:

对象

初始化

发送请求

服务器接收

服务器返回

客户端接收

修改客户端页面内容。

只不过这个过程是异步的。

A、初始化XMLHttpRequest对象

1 functioncreateXHR(){2 varxhr;3 try{ //Firefox, Opera, Safari,。。。

4 xhr=newXMLHttpRequest();5 }catch(e){6 try{//IE

7 xhr=new ActiveXObject("Microsoft.XMLHTTP");8 }catch(e){}9 }10 }11 returnxhr;12 }

B、指定响应处理函数

指定当服务器返回信息时客户端的处理方式。只要将相应的处理函数名称赋给XMLHttpRequest对象的onreadystatechange属性就可以了.比如:

XMLHttpReq.onreadystatechange = processResponse;

注意:这个函数名称不加括号,不指定参数。也可以用Javascript函数直接量方式定义响应函数。比如:

XMLHttpReq.onreadystatechange = function() { };

// 处理返回信息的函数

function   processResponse() {

}

C、发出HTTP请求

向服务器发出HTTP请求了。这一步调用XMLHttpRequest对象的open和send方法。

http_request.open('GET', 'http://www.example.org/some.file', true);

http_request.send(null)

按照顺序,open调用完毕之后要调用send方法。send的参数如果是以Post方式发出的话,可以是任何想传给服务器的内容。

注意

:

如果要传文件或者

Post

内容给服务器,必须先调用

setRequestHeader

方法,修改

MIME

类别。如下:

http_request.setRequestHeader

(

Content-

Type

,

application

/x-www-form-

urlencoded

);

这时资料则以查询字符串的形式列出,作为send的参数,例如:

name=value&anothername=othervalue&so=on

D、处理服务器返回的信息

处理响应处理函数都应该做什么。

1 首先,它要检查XMLHttpRequest对象的readyState值,判断请求目前的状态。参照前文的属性表可以知道,readyState值为4的时候,代表服务器已经传回所有的信息,可以开始处理信息并更新页面内容了。如下:2 if (http_request.readyState == 4) {3 //信息已经返回,可以开始处理

4 } else{5 //信息还没有返回,等待

6 }7 服务器返回信息后,还需要判断返回的HTTP状态码,确定返回的页面没有错误。所有的状态码都可以在W3C的官方网站上查到。其中,200代表页面正常。8 if (http_request.status == 200) {9 //页面正常,可以开始处理信息

10 } else{11 //页面有问题

12 }

E、动态显示信息

XMLHttpRequest对成功返回的信息有两种处理方式:

responseText:将传回的信息当字符串使用;

responseXML:将传回的信息当XML文档使用,可以用DOM处理。

数据格式提要

在服务器端 AJAX 是一门与语言无关的技术。在业务逻辑层使用何种服务器端语言都可以。

从服务器端接收数据的时候,那些数据必须以浏览器能够理解的格式来发送。服务器端的编程语言只能以如下 3 种格式返回数据:

•HTML

•XML

•JSON

解析 HTML

HTML由一些普通文本组成。如果服务器通过XMLHttpRequest发送HTML, 文本将存储在responseText属性中。

插入HTML代码最简单的方法是更新这个元素的innerHTML属性。

HTML 小结

优点:

•从服务器端发送的 HTML 代码在浏览器端不需要用 JavaScript 进行解析。

•HTML 的可读性好。

•HTML 代码块与 innerHTML 属性搭配,效率高。

缺点:

•若需要通过 AJAX 更新一篇文档的多个部分,HTML 不合适

•innerHTML 并非 DOM 标准。

XML小结

优点:

•XML 是一种通用的数据格式。

•不必把数据强加到已定义好的格式中,而是要为数据自定义合适的标记。

•利用 DOM 可以完全掌控文档。

缺点:

如果文档来自于服务器,就必须得保证文档含有正确的首部信息。若文档类型不正确,那么 responseXML 的值将是空的。

•当浏览器接收到长的 XML 文件后, DOM 解析可能会很复杂

JSON 小结

优点:

•作为一种数据传输格式,JSON 与 XML 很相似,但是它更加灵巧。

•JSON 不需要从服务器端发送含有特定内容类型的首部信息。

缺点:

•语法过于严谨

•代码不易读

HTML/XML/JSON对比小结

1、若应用程序不需要与其他应用程序共享数据的时候, 使用 HTML 片段来返回数据时最简单的

2、如果数据需要重用, JSON 文件是个不错的选择, 其在性能和文件大小方面有优势

3、当远程应用程序未知时, XML 文档是首选, 因为 XML 是 web 服务领域的 “世界语”

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值