JavaScript客户端
( S* [( C( B/ W* P5 J1 k# r5 P, b) W3 v' z
本教程旨在为您示范如何用WebdavClient Javascript类对您的AutoCAD WS账户中的文件和文件夹执行各种操作。使用这个JavaScript类，您可以——
+ a3 P7 H" T# ~# K+ ?% `" ?; c: n- T" P2 N4 w
1.连接到一个AutoCAD WS账户上( A: ]% w9 O2 I- I$ `- T4 R
, \/ c5 n9 b: z5 ^ 2.查询账户文件/文件夹结构
' P2 J! J5 _' r" m' T- H0 |4 X8 |, V0 g
4 w! Y% s0 r" ~/ N( [$ t 3.执行不同的文件操作，例如复制、粘贴、重命名、创建文件夹
+ `1 q: ]/ F/ S% c3 x3 m9 ^2 h) x( _8 q- k @! Y5 n) C) y
4.上传和下载文件: a, T) ]+ m! |- a0 S" ^; l t
6 u v$ J f4 I( O3 _ h
5.查询文件元数据，例如最后修改、权限、缩略图( d- f- U( D" L/ a6 ^0 `% Z
# e+ b" `7 x$ J- r
在WS在线编辑器中启动图纸文件
4 i' s! U7 e# n, ` W" {1 \# e( }- }
WebdavClient JS类依靠标准的WebDAV协议来和AutoCAD WS服务进行通信。C++、C#、Java和JavaScript等多种编程语言都支持这个基于http的行业协议。点击这里观看使用C#语言访问AutoCAD WS的教程。这个教程示范了如何在JavaScript中执行上述操作。我们还在下方嵌入了可供下载的客户端源代码。点击这里下载这个示范样例的完整源代码。9 Q, k# G; `& @# {# L# B
/ o$ x! {+ `' @! Y" C 构造器
7 ~8 M7 Z2 U/ O, P' m b
$ e+ f K9 W$ Y& @ WeddavClient类构造器需要三个参数：
% q$ j1 S8 r7 W/ h- ^ ^, _( a6 \" s0 [5 N
1. url：Webdav服务器地址。例如，如果您要连接到AutoCAD WS服务器，就用 “https://dav.autocadws.com”。
8 q3 k; H+ z9 f! `+ b2 y+ H. f) \% ~4 q9 u, q
2. 用户名：您在Webdav服务器中的账户名
# u! y5 P1 L# S) L* |& u. J9 ^2 A. Y8 u! D, { ?0 f5 R
3. 密码：您在Webdav服务器中的账户密码
1 ?3 [; ~5 k/ Y: E, i, ^: \2 U: T$ P
下面的代码创建出新的WebdavClient类，连接到AutoCAD WS Webdav服务器，使用的用户名是“someuser”，密码是“123456”。
q! A1 p4 y) j i
j- m' }) A" z# S) s& [- L( c var client = new WebdavClient(’https://dav.autocadws.com’, ’someuser’, ’123456’);
% I) N, p1 [+ M8 F) f: x9 o1 C: J7 m0 z: B0 _/ ^! E7 f
PROPFIND% o2 o% n7 C8 g0 }
, Q3 ^4 s, J! j' T' [ ~5 J PROPFIND方法用来在AutoCAD WS账户中检索关于文件和文件夹的信息。8 i' T$ V3 ?( x# {. U* L+ ~9 T0 H8 G
+ o2 p2 F2 B- o" c' i. d N% i
PROPFIND函数接收三个参数：% g, A' H1 P3 n, F# [1 p
: A! s0 ^/ W2 N* Q: A v1 H 1. 处理器：一种可定义onError回调函数和onSuccessan回调函数的对象，这两种函数分别在请求过程中出错时和成功完成请求时调用。; N+ x; p4 s& J) a+ M% O
" A! d& W+ ]$ I0 |: Y
2. 路径：我们想检索信息的文件夹/文件的相对路径。% z3 L. X0 M" N
3 ]: R. Q! d4 l& l" i
3. 深度：表示该方法是仅适用于资源(深度=“0”)、仅适用于资源及其内部成员(深度=“1”)，还是适用于资源及其所有成员(深度=“无限”)。
& V3 F7 h1 f( V+ N* I' ~7 o
L4 q7 K8 O) v8 g* s9 W) x 下列代码向服务器发送PROPFIND请求，以获取直接位于‘/Site’文件夹下的所有文件/文件夹的信息。
6 c# r" T) p$ u+ e, ~$ |
7 i4 \$ x$ C& e0 G9 U: I //A handler the implements onSuccess and onError functions" V% O( f7 N; R/ b6 s" B; c- ~
. |% R s0 h: m5 s( a3 v1 z
var handler = new PropfindHandler();
4 G) X3 A4 L1 q8 Q1 ]; y. {' ]; y
4 l2 \( X: r$ q% v/ W4 T. l' I5 F // request properties of all files/folders residing directly under the ’Site’ folder.3 K( { M6 N& h% C; z/ t t9 N
: L* D3 ?3 s$ }" d1 o client.PROPFIND(handler, ’/Site’, 1);9 F# i% [+ F8 u1 O$ U- `) w
5 m8 l; G' S1 k% V2 K% x 这个范例使用了PropfindHandle。我们稍后就展示该对象的代码。但是在这之前我们应该看看来自Webdav服务器的响应。服务器返回了一个含有文件/文件夹信息的XML。下面是这种XML的一个示例：" @/ x4 O) c: i w8 i1 s U" F
! c' `/ _: D1 N( P) L ^
. r8 v8 ?9 Z" |2 I6 m! g- r% H) h* |# b6 [1 E/ h5 M5 S% K; J" g
( C" S1 @; K+ c4 |& k
& ~. N2 X( _) }. A- f
- z4 U" t7 P4 e. [( U: C& |0 z ]6 c( V/ p
/Site/filea.dwg
" L; f& g+ k) g2 F# s
( l6 A+ K9 u6 ]4 B
- ]' |# D( _+ R' H, d- H% p: a6 n( t3 e( _7 m; N- Y
HTTP/1.1 200 OK
/ x3 k$ j' K; t' C% J5 L
6 a1 i7 r! e3 N' w9 _% a
4 ^# l) M2 K: R6 b. F0 m. g
4 p% m/ e# ~* f3 ~% r 2011-12-01T17:42:21-08:00
7 p" T) \5 J" K; j) G. s9 D3 E9 J
filea.dwg5 n0 q5 }7 V+ D( v3 D0 ~# v& ~6 n
! E: u, J7 }$ Y+ y( Z3 t
( h- [/ M$ a4 `, z& h
0 }, V4 A1 g* K+ Y1 u
# x/ J9 ^; q# B4 ~* E; O% X
6 H/ H3 T+ Z! f ' }9 l" o9 e4 {
7 D7 d& T2 @- E) j6 i0 d2 y0 }8 e' B
9 Q1 {$ S2 m% {( a R! G# t
- X: v+ V2 C) D) \; P
/Site/fileb.dwg
; I9 K) |6 \( e( U: b! u3 T4 e- h1 K! L- V# @2 l
. B9 j' v. K' D& V" y% L- E1 J& M! k, _8 {# X4 M
HTTP/1.1 200 OK1 o( ^0 Q" q- C% M
0 j) }+ R4 ]; W6 ?6 S. K1 N
' s U0 Z* ~9 K/ G( j" K, b2 ~! k% C: s d# R( W- X k5 Z5 P
2011-12-01T17:42:21-08:00
0 c- } i! |8 p+ @
4 Y. d) @# ~! w* O. |. ^ fileb.dwg
l$ o6 h6 r6 X" B7 [9 Y9 H( e$ h% \
& K5 `5 M: q4 x$ h
$ @0 \0 `+ I8 A V: A
, e! _1 U' S1 y/ G4 C6 K% P
7 D) k( R9 G; R' G% {' f- m! B
7 S' s; x0 e- Z c' ^0 `' Z6 {9 w% z4 ?4 j5 U1 l3 K6 K
+ b/ J- c) `5 x3 y
/ X$ W. e& X! s& {% S 如您所见，每个文件/文件夹均返回到“d:response”标签中。在这种情况下，服务器返回“filea.dwg”和“fileb.dwg”这两个文件的信息。服务器注明了每个文件的创建日期和文件名。
9 W5 @" k6 p* U2 {9 D
5 _8 P. _; ], X' K0 @ 您可能希望处理器的onSuccess函数能够解析已返回的XML，并对检索到的信息进行某些处理。
; M5 I0 ~' Q: B, Y# Q8 G
{6 W$ [1 y; c( O 下面的代码展示的是非常简单的PropfindHandler，它显示了一个警告消息框，在出错的情况下这个消息框里含有状态代码，在成功的情况下则含有服务器返回的文件/文件夹名称：
- N9 y) d% |& T0 f3 K' b6 U5 S
; ], ~" W6 _' O, |4 z* T. Q function PropfindHandler()+ f: J, z4 {3 _& n( S. M/ R- M! q) }
; l( c6 C+ i0 k* U5 O7 a0 Q; i; W {
6 j5 O6 g9 d; Y
7 A7 _- l) k& G- f; C1 K F) Y! H }
2 h# s" E5 Z* F2 ]0 E) V' [6 t. B& F c" e. D# T
PropfindHandler.prototype.onSuccess = function(result)* B) {( R$ z/ O: s% X* E5 K! \! i
% E: _7 s: V3 X7 l7 i
{3 F8 |" r: z R9 ?$ k
; i$ y( n; G$ o- i var names = ’’;
' s1 b# S; }* m: e' Z, r2 z
4 ^$ a! t) M' @/ A. a // each file/folder is defined within a ’response’ tag% n4 k$ M# A+ ~
4 B7 r5 `2 e4 i6 z$ k O. c- Z var items = this.getElementByTagName(result.content, ’d’, ’response’);; c( `% {/ [+ {( \
9 r, m' |7 \, ^! B for (i = 0; i < items.length; i++)
' f1 e9 C. L! i0 {! u% e. _6 ^8 I
4 d4 n- F0 _- M {$ H0 ^$ I5 J8 P+ ]/ C: B
( A3 [6 u0 J6 F1 k% L var props = this.getElementByTagName(items, ’d’, ’prop’)[0];# o( E) ?3 p% i
0 f6 ?8 ]5 u, E" L
var displayNameTag = this.getElementByTagName(props, ’d’, ’displayname’)[0];2 q. y3 P v/ g5 T4 @+ J; \; o
+ R/ s4 i8 I+ @8 r- c/ M; V- r var displayName = displayNameTag.childNodes[0].nodeValue;
- Z" s; l9 n) E7 d
# w) W5 X- Q* ^2 [- x7 X- x" j/ x names += displayName + ’/n’;
/ u- H( C1 I- M% x- J- ?8 U& H" \* |6 v' y5 c$ X
}. O6 S0 z: Q3 S/ Q5 ]0 g
8 _. S# y) p$ A; P3 U; c# J
alert(names);# W9 `0 ? p3 r% B+ l$ l4 r9 I
, l" l! z" E: g6 S5 }' C' K
};7 v# u Z/ L7 L
- S& D7 }& G# t% v- p! L4 @ PropfindHandler.prototype.onError = function(result)
+ T& S( h0 A! c5 A: ?3 }. f- r2 C4 I: K5 y$ _% e5 l% g# [/ g: v
{+ ~" G' Y; @0 E# }1 B+ \6 d
1 @6 \; ?% Q$ P# ? alert(result.status);- \5 b7 h- @, n- S7 f6 m' A
( o, ^4 c) W4 |: U
}
1 g- m; N5 y3 r) R( D& d: x8 x2 r; O/ |) F/ n9 T3 Q' m5 n
如果以“someuser”为用户名的这个账户中包含文件夹“site”，而文件夹中有“filea.dwg”和“fileb.dwg”这两个文件，那么用户会看到一个消息框，其中显示了以下文件名：
/ _9 _& P3 E" i9 f* j0 T6 i( c* q" ?& `
filea.dwg
$ J- R5 e. H5 u
4 H M- B; L$ @7 h fileb.dwg* E0 @" v. ]8 h% U+ I2 L, [" H
) ]9 C( X# \. w9 j* X. _9 W
复制、移动、删除
: {/ y# R" @$ x1 [, G7 J# Y u$ I, d
复制、移动和删除的调用方式和PROPFIND方法一样，只是传递的参数有所不同。
$ D0 x& m, y. r& A' n6 B
. }. N9 x/ S) J) j5 v' v: U8 k 它们都接收一个处理器对象，这一点与PROPFIND方法相似，但是在这种情况下没有需要解析的已返回信息。但是您应使用onSuccess和onError回调函数来了解请求是否已成功完成，并在出错时接收状态代码。- S9 S; {% x$ C9 w+ L1 x
4 {$ Y& R" u* ?& b* ^7 ~ Y 下列代码：2 j' C& V7 ]) H) Z. a
5 }& B! F) P- b 1. copies ‘/Site/filea.dwg’ to /OtherSite/fileb.dwg’4 r& M6 |5 h* }. D4 U& N
2 M1 Q! N W p+ S$ I& j$ t 2. moves ‘/Site/filec.dwg’ to /OtherSite/filed.dwg’7 c$ n# V6 [. Z: b8 \( D7 d ^
8 q$ t4 T3 P M6 m* l m- p
3. deletes ‘/Site/filee.dwg’' M3 o$ w. [& K4 z k1 a9 J( H
* }0 A' t* L+ w+ p var handler = new FSHandler();4 w) I/ m) L/ Q( |, r
$ l6 o; S0 U5 l% t+ r$ p' v var overwrite = true;
& [* G- Q9 ?, Y7 ^% u" D5 i
0 d$ W0 P# {1 b- D client.COPY(handler, ’/Site/filea.dwg’, ’/OtherSite/fileb.dwg’, overwrite);& z, i0 L! I- P) t$ _
& R1 g& v" H$ t+ k+ }( d; A
client.MOVE(handler, ’/Site/filec.dwg’, ’/OtherSite/filed.dwg’, overwrite);) i: O, u" Y7 M# U% G2 E) N F
2 D- U0 g1 V7 h; f
client.DELETE(handler, ’/Site/filee.dwg’);2 h8 u" |8 w. [# ~- q8 G7 V- r
+ Y f/ g6 L6 e 下面的代码显示了FSHandler对象，这个对象显示的消息框在成功完成请求的情况下将显示“success”，在出错的情况下则显示“error”和状态代码。" P3 I7 G7 H- |8 e Y
" }+ P( \- v' L function FSHandler()" R7 {0 H" M" D& U8 G/ ]! \
0 x, ?' t1 J% f( h% i! ~
{
/ I2 y1 F% n2 A
6 F+ [% U+ m( T- {& C+ j }
2 I o. O* T& s8 n" R$ k3 p u0 _' x
FSHandler.prototype.onSuccess = function(result)' B, _3 v0 S' o
0 B: J( \$ X" x! a9 N7 y" h {
$ v+ D7 f' v/ I+ D9 F) x: N* e
0 y: F+ \6 b' r- |* U9 L! ]$ [" g alert(’success’);+ \' T% o' M! y; A
0 {8 y& ?8 g( I4 z };3 u& z" j7 G) O4 A
: b# N" X# `: p; o# u$ \ FSHandler.prototype.onError = function(result)
/ {! _0 E* }% y! \# ^
' M& m7 E! b0 A; ?4 G {3 `7 h2 q0 }# G* p* G
2 T8 D3 c8 I# K7 h" N
alert(’error: ’ + result.status);0 L }' l4 M8 X+ ^' ^- q
' d& c& a2 x6 ^; w9 S' m5 g4 K4 O$ C }
1 T8 k6 v5 r5 B) ?7 j9 ?, e, y2 t
, a" v/ _- e8 h5 P; d 同域策略和proxy.php0 O7 m$ G6 ^' ~/ A8 `+ s
2 B+ N3 G( p' j) e6 ] 同源策略可阻止从一个源加载的文档或脚本获取或设置来自另一个源的文档的属性。
! j5 x4 y7 X- r! {7 G& z
9 I/ \2 `* S6 ]$ i2 R2 |0 C4 H 这意味着我们不能将Webdav请求发送到与JS文件位于不同域的服务器上。
+ N( I% f- y7 i0 d8 }( E0 d x! g" N* I
这是一个问题，因为Webdav服务器可能位于与客户端不同的域中。我们将会用php代理服务器绕过这个问题。1 i; P d7 Y9 D2 r! K
( e, ?6 ~/ Q5 X# \; M
这个代理服务器应该与客户端位于同一个域。请求将被发送到代理服务器上，然后代理服务器把请求发送给Webdav服务器，再把应答返回到客户端。下面这行php文件信息定义了真正的Webdav服务器地址：
3 K0 @. N% D0 X' O3 h
. K) I9 x0 c. P0 }. o" g% E $real_destination_host = "https://dav.autocadws.com";; {& m( Z: J) V
) ^% c! d) k3 P 您必须确保您的服务器已完成了运行php文件所需的配置。
* k, d& E9 S, s
/ u& @/ i6 g# }1 U+ l 点击这里获取指南，以了解如何安装和配置PHP 5，使之能够与Apache一起在Windows下运行。
$ V) ^$ F7 Z5 |$ o
; X+ F: Y. z4 r 在AutoCAD WS编辑器中启动图纸文件! ^3 T# h5 l# n% A) e& e2 C! g
/ R* Y8 k) N6 u* e9 y( g 要在AutoCAD WS的在线编辑器中打开图纸文件，只需调用客户端OpenDrawing方法，以便用目标账户传递图纸文件的路径：! h/ k( p# `" S# B$ l, `3 D% y* d: ^
% G; b6 I8 ?# p* I2 b8 x% W0 n+ q) U
client.OpenDrawing(’/Site/filea.dwg’); ~7 K9 a( h0 H( I
3 A/ Q( ^1 c+ K6 [
上传文件
- J( O8 ~1 r8 z4 \0 x! K
5 S' {" F: q! R6 V; @% T. _ 您或许想实施一种方式，让用户可以在他的本地文件系统上选择一个文件，然后上传到Webdav服务器上。& y3 q/ X! O9 H6 d# T
) S- R' P6 o' r. P- a# d 有些浏览器无法支持您访问用户的文件系统，所以有时候不一定能用javascript实施这项功能。
" W% D3 L) X' k
( J7 D3 g' [3 ]& p( V 在我们的样例中，我们用SWFUpload库来添加上传功能。( L* G {! M. O, ?
: C$ `3 O a& ?& E/ Z7 X$ J
SWFUpload是一个小型的JavaScript/Flash库，它使您可以在您的html里轻松添加“上传”(Upload)按钮。Flash代码通过Flash的ExternalInterface类来与JS代码通信。如需了解关于SWFUpload的更多信息及示例，请访问SWFUpload网站. j& [# A: }& u
- Z# w% H: Y: W$ H: A( J 以上来自 欧特克AU技术社区http://au.autodesk.com.cn |
发表于 2011-9-6 22:23