Ajax???? ???Ajax??

1
Ajax??????? Ajax??
2
4.1 XMLHttpRequest??

• ?????????XMLHttpRequest??,??Ajax?????????????,??
  ?????????????,??????????????
• ??????????GET?POST??????????????????????,???????
  ?????????????????????
• ???????Ajax????????????

3
4.1 XMLHttpRequest??

• XMLHttpRequest???????IE5????ActiveX?????,??Mozil
  la 1.0?Netscape7?Safari1.2?Opera7.60????????
• XMLHttpRequest???IE?????IE???????????
• XMLHttpRequest???????,?????????HTTP??????,?????H
  TTP?????????????

4
4.2 ??XMLHttpRequest??

• ??XMLHttpRequest??
• ?IE7?Firefox?safari?Opera???????JavaScript???
• var xmlRequet new XMLHttpRequest()
• ?IE5/6????
• var xmlRequest new ActiveXObject(Microsoft.XML
  HTTP)
• ??,JavaScript?????,????????,???????????
• ??XMLHttpRequest????????,??????

5
4.2 ??XMLHttpRequest??

• ????XMLHttpRequest??
• ??????,?????XMLHttpRequest??
• ????
• ????
• ?????
• ?????????????,????,????????????????

6
4.2 ??XMLHttpRequest??

• ????XMLHttpRequest??
• ????XMLHttpRequest???,????onreadystatechange????
  ???????????,???????????????readyState?????,???????
  ??
• ?????
• ??readystatechange???????????
• ??readyState??,??????????
• ???????,????????????????????,??????????????
• ???????,???????
• ????
• ?????
• readystatechange??????????????,?????????XMLHttpR
  equest???

7
4.2 ??XMLHttpRequest??

• readyState??
• readyState?????XMLHttpRequest?????/?????????????
  ??XMLHttpRequest?????5???????
• 0???????????,??????,?????open??
• 1??????????????,?????send??
• 2????????send ??,????????????????
• 3??????????????,???????????????,???????????
• 4????????????

8
4.2 ??XMLHttpRequest??

• XMLHttpRequest????????

XMLHttpRequest????? XMLHttpRequest?????
?? ??
Onreadystatechange ????????????????
readyState ?????0????1??2??3????4???
responseBody(?IE7) ???????????HTTP??
responseText ???????HTTP??
responseXML ??XML DOM????HTTP??
Status ??HTTP???
statusText ??????HTTP????????
9
4.2 ??XMLHttpRequest??
XMLHttpRequest????? XMLHttpRequest?????
?? ??
Abort ????
getAllResponseHeaders ??HTTP????????
getResponseHeader ??????HTTP???
Open ????????,?????????,???????URL,????????(false)????(true)????
Send ????????
setRequestHeader ?????HTTP????
10
4.2 ??XMLHttpRequest??

• ??XMLHttpRequest????
• ??????????????????????????,????,????????????,???
  ???????????????

11
4.2 ??XMLHttpRequest??
// index.htm lthtmlgt ltmeta http-equiv"Pragma"
CONTENT"no-catch"gt ltmeta http-equiv"Expires"
CONTENT"-1" /gt ltheadgt ltscript type"text/javascri
pt" src"XHRequest.js"gtlt/scriptgtlt/headgt ltbodygt Aja
x???? lttable border0 cellpadding0 cellspacing0
style"font-size10pt"gt lttrgtlttd aligncentergt
lttable border0 cellpadding2 cellspacing0
style'font-size10pt' aligncentergt lttrgt
lttdgtlta href"" onclick "sendRequest('Contacts')
return false"gt??????lt/agtlt/tdgt lttdgtlta
href"" onclick "sendRequest('Calendar')return
false"gt??????lt/agtlt/tdgt lttdgtlta href""
onclick "sendRequest('Adverts')return
false"gt??????lt/agtlt/tdgt lt/trgtlttrgt lttdgtlta
href"" onclick "sendRequest('delContacts')retu
rn false"gt??????lt/agtlt/tdgt lttdgtlta href""
onclick "sendRequest('delCalendar')return
false"gt??????lt/agtlt/tdgt lttdgtlta href""
onclick "sendRequest('delAdverts')return
false"gt??????lt/agtlt/tdgt lt/trgtlt/tablegt lt/tdgtlt/tr
gt lttrgtlttd id"box1" height60gtlt/tdgtlt/trgt lttrgtlttd
id"box2" height50gtlt/tdgtlt/trgt lttrgtlttd id"box3"
height50gtlt/tdgtlt/trgt lt/tablegt lt/bodygt lt/htmlgt
12
4.2 ??XMLHttpRequest??
// XHRequest.js var xHRObject false if
(window.XMLHttpRequest) xHRObject new
XMLHttpRequest() else if (window.ActiveXObject)
xHRObject new ActiveXObject("Microsoft.XMLHT
TP") function sendRequest(data) if
(data'delContacts')
box1.innerHTML'' else if (data'delCalendar
') box2.innerHTML'' else if
(data'delAdverts') box3.innerHTML''
else var bodyofrequest getBody(data)
xHRObject.open("POST",
"display.php", true)
xHRObject.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded")
xHRObject.onreadystatechange getData
xHRObject.send(bodyofrequest)
function getBody(data) var argument
"value" argument encodeURIComponent(data)
return argument function getData() if
(xHRObject.readyState 4 xHRObject.status
200) var serverText xHRObject.responseTex
t if(serverText.indexOf('' ! -1))
element serverText.split('')
document.getElementById(element0).innerHTML
element1
13
4.2 ??XMLHttpRequest??
lt?php //display.php switch(_REQUEST'value')
case 'Contacts' echo
"box1ltbrgtltbgtContactslt/bgtltbrgtAnhui, Hefei,USTC"
break case 'Calendar' dt
gmdate("M d Y His") echo
"box2ltbrgtltbgtCalendarlt/bgtltbrgt dt"
break case 'Adverts' source
"logo.gif" echo "box3ltbrgtltbgtAdvertlt/bgtltb
rgtltimg src'source 'gt" break case
'delContacts' echo "box1 "
break case 'delCalendar' echo
"box2nbsp" break case
'delAdverts' echo "box3nbsp"
break ?gt
14
4.2 ??XMLHttpRequest??

• ????????????1,???????2

?2
?1
15
4.3 ????

• ??????
• ?????????????
• XMLHttpRequest??????
• ???????
• ??xHRObject.onreadystatechange getData
• ??xHRObject.onreadystatechange getData()
• ?????,?JavaScript?
• ??????????,????????????????????
• ?????,???????????????

16
4.3 ????

• ????
• XMLHttpRequest????????????????????????,?????????
  ?????,???????????????,???????,??????????????????
  ?????????????????????
• IE?????XMLHttpRequest??????????????????HTTPREFER
  ER,???????????URL/??(?????????????)?
• ????Referer?????????????IE?????????Referer??????
  ???????,???????Cookie?,???/??????cookie?,?????????
  ?????

17
4.3 ????

• ????IE????
• ????????,???????????,????????????????????????
• ????,??????,????????????????????,???????????????
  ????
• ltmeta http-equivPragma CONTENTno-catch /gt
• ltmeta http-equivExpires CONTENT-1 /gt
• ???????????????????XMLHttpRequest??,??????GET??,?
  ?IE????????,??????????

18
4.3 ????

• ?????????
• ??????????????????
• ?GET?????querystring,????????, querystring????????
  ???querystring???????
• xHRObject.open(GET,display.php?id
  Number(new Date)value data, true)
• ?????????querystring??????,?????????????

19
4.3 ????

• ??HTTP???If-Modified-Since????????
• xHRObject.open(GET, display.php?valuedata,
  true)
• xHRObject.setRequestHeader(If-Modified-Since,
  Sat,1, Jan 2000 000000 GMT)
• ??????,???????
• ??POST ?????????????????
• ????,????????????,?3???????????????

20
4.3 ????

• ??????
• ???Ajax???,???????????????????????????????,?????
  ?????
• ?XMLHttpRequest???,??????IE??Mozilla??????????,?
  ??????????????XMLHttpRequest?????????????
• ActiveX???????IE???????
• ??HTTPjihe document.all???IE???
• ??????Firefox???XMLHttpRequest???
• IE??????,?Mozilla??????
• ???IE??,?????????MSXML?

21
4.4 POST??

• ??POST????GET??,??????IE?????????,??Ajax????????
  ??????
• ?GET????POST??,?????
• ?querystring??
• ????????
• ?????????????send??????????/?,?querystring??,???v
  alueContents??????URL?,????URL???

22
4.4 POST??

• ?4.2??????POST??
• function sendRequest(data)
• if (data'delContacts')
  box1.innerHTML''
• else if (data'delCalendar')
  box2.innerHTML''
• else if (data'delAdverts')
  box3.innerHTML''
• else var bodyofrequest getBody(data)
• xHRObject.open(POST,
  display.php, true) //GET??POST,??querystring??
• xHRObject.setRequestHeader("Content
  -Type", "application/x-www-form-urlencoded")
• xHRObject.onreadystatechange
  getData
• xHRObject.send(bodyofrequest)
• function getBody(data)
• var argument "value"
• argument encodeURIComponent(data)
  //???????,???????
• return argument

23
4.4 POST??

• POST???GET?????
• POST???GET?????????,????2GB,?GET???????,IE???2083?
  ??,Opera?4050???,Netscape4?8192???
• GET??????ASCII???????????POST??????,?????????
• ????
• ?????????????????,??????,??GET??
• ????????????????,???????,?POST???

24
4.5 ??Ajax??

• ??????
• ??????????????XMLHttpRequest??????????????????
• ?????,????DOM????JavaScript??,SRC??????????JavaS
  cript????????????????????
• ??
• ???????
• ????????????????,??????SRC??
• ????????????

25
4.5 ??Ajax??

• ??
• ??????????,??????,???????3????????
• ????,???????????????,??????????????????

26
4.5 ??Ajax??

1. ??????ScriptLoader.htm?HTML??

// ScriptLoader.htm lthtml xmlns"http//www.w3.org
/1999/xhtml" gt ltheadgt ltscript
type"text/javascript" src"ScriptLoader.js"gtlt/scr
iptgt lt/headgt ltbodygt ?????????ltbr/gt ??1ltinput
id"range name"range" value"1" type"radio"
onclick"retrieveInfo('1')" /gtltbr/gt ??2ltinput
id"Radio1" name"range" value"2" type"radio"
onclick"retrieveInfo('2')" /gtltbr/gt ??3ltinput
id"Radio2" name"range" value"3" type"radio"
onclick"retrieveInfo('3')"/gtltbr/gt lt/bodygt lt/htmlgt

27
4.5 ??Ajax??

1. ????ScriptLoader.js???

// ScriptLoader.js function retrieveInfo(data)
var newScript document.createElement("script")
newScript.src "script" data ".js"
document.body.appendChild(newScript)
28
4.5 ??Ajax??

1. ????3???,??Script1.js, Script2.js, Script3.js

//Script1.js alert ("?????1")
//Script2.js alert ("?????2")
//Script3.js alert (????3")
29
4.5 ??Ajax??

1. ????ScriptLoader.htm??,???????,???????????

30
4.5 ??Ajax??

• ??
• ????????
• var newScript document.createElement(script)
  // ??Script??
• newScript.src script data .js
  // ??SRC ??
• document.body.appendChild(newScript)
  // ???????body???

31
4.5 ??Ajax??

• ??
• ??
• ???????????,??????????
• ????????????????????
• ??
• IE?????????????????
• ????GET??,????POST??
• ?????????????????

32
4.5 ??Ajax??

• ???cookie
• ????
• ???????????
• ltimggt????src??????,?????querystring????????
• ????????,?????????cookie??????????
• ???????????????????????????????,????????????????
  ?,????????????????

33
4.5 ??Ajax??

• ??
• ????????????????,????????????????????????????,??
  ?????????????cookie,????????????cookie???????

34
4.5 ??Ajax??

1. ??Cataloque.htm

lthtml xmlns"http//www.w3.org/1999/xhtml"
gt ltheadgt ltscript type"text/javascript"
src"ImageLoader.js"gtlt/scriptgt lt/headgt ltbody
onload"createImage()" style"font-size10pt"gt ltb
gtBooklt/bgtltbr/gt ltimg id"cover" src"ajax.jpg"
/gt ltbr /gtltbr /gt ltbgt?? lt/bgtltspan id"authors"gt
??lt/spangt ltbr /gtltbgtISBN lt/bgtltspan
id"ISBN"gt97-7-123456lt/spangt ltbr /gtltbgt??
lt/bgtltspan id"price"gt50.20?lt/spangt ltimg
id"secret" src"onebyone.gif" /gtltbr /gtltbr
/gt ltinput type"button" onclick"showCookie()"
value"??cookie" /gt lt/bodygt lt/htmlgt
35
4.5 ??Ajax??

1. ??ImageLoader.js??

function createImage() var bookid
document.getElementById("ISBN").innerHTML var
img document.getElementById("secret")
img.src "relayInfo.php?bookid" bookid
img.width 0 img.height 0 function
showCookie() var cookie getCookieInfo("Anonym
ousID") alert(cookie) function
getCookieInfo(cookie) RegularXp "(? )?"
cookie "()?" var RegularXpExtract
new RegExp(RegularXp) if (RegularXpExtract.te
st(document.cookie)) return
decodeURIComponent(RegExp"1") else
return null
36
4.5 ??Ajax??

1. ??relayInfo.php

lt?php if (_COOKIEAnonymousID)
tempCookie _COOKIE"AnonymousID"
setcookie("AnonymousID", tempCookie."BOOKID"._
GET"bookid", time()3600) else
random_id (rand()9999999) tempCookie
"USERID" .random_id."BOOKID" .
_GET"bookid" setcookie("AnonymousID",
tempCookie."BOOKID"._GET"bookid",
time()3600) ?gt
37
4.5 ??Ajax??

• ????
• ?????,???
• ??Cataloque.htm, ?
• ???
• ????cookie,
• ???????,??
• Cookie??
• ?????,???
• ?,cookie??????

38
4.5 ??Ajax??

• ????
• ?????,???????????scr?????????
• ???????????createImage,?????????ISBN?ltspangt??????(
  ????????cookie?),??Ajax.jpg??
• var bookid document.getElementById(ISBN).inn
  erHTML
• var img document.getElementById(secret)
• ??,?????????????querystring?????ISBN???src???
• img.src "relayInformation.php?bookid"
  bookid
• img.width 0
• img.height 0

39
4.5 ??Ajax??

• ???????????cookie??????????cookie,????????ID(?????
  ????)????ISBN?????cookie,??cookie?????????
• if (_COOKIEAnonymousID)
• tempCookie _COOKIE"AnonymousID"
• setcookie("AnonymousID", tempCookie."BOOKID
  "._GET"bookid", time()3600)
• else
• random_id (rand()9999999)
• tempCookie "USERID" .random_id."BOOKID
  " . _GET"bookid"
• setcookie("AnonymousID", tempCookie."BOOKID
  "._GET"bookid", time()3600)

40
4.5 ??Ajax??

• ????showCookie()??????????,Ajax??????????????????,
  ???ID????????,????????????????

41
4.5 ??Ajax??

• ??
• ??
• ????????????,?????
• Cookie???????,???4KB
• ????GET??,????POST???

42
4.5 ??Ajax??

• ????
• ????????????????????????????????,?????????,??????
  ?,?????????????0????????????????????????????????,?
  ???????????????????????