- Kĩ thu t Ajax (Asynchronous Javascript And Xml) giúp cho browser có th g i yêu c u đ n ậ ể ử ầ ế server và nh n response mà không c n reload l i trang web.
- Ngoài ra, request này có th ậ ầ ạ ể đ ượ c th c hi n 1 cách b t đ ng b ( trong quá trình th c hi n request, ng ự ệ ấ ồ ộ ự ệ ườ i dùng v n có ẫ th t ể ươ ng tác v i trang web) ớ.
- Kĩ thu t này s d ng đ i t ậ ử ụ ố ượ ng XMLHttp đ th c hi n các truy v n lên server.
- S d ng l p XMLHttp ử ụ ớ.
- Ta s s d ng javascript đ thao tác trên đ i t ẽ ử ụ ể ố ượ ng XMLHttp..
- T o đ i t ạ ố ượ ng XMLHttp:.
- B ướ c đ u tiên c n ph i th c hi n trong vi c s d ng đ i t ầ ầ ả ự ệ ệ ử ụ ố ượ ng XMLHttp là ph i t o ả ạ nó.
- Đ i v i các trình duy t khác nhau thì vi c t o đ i t ố ớ ệ ệ ạ ố ượ ng này s khác nhau.
- Đ i v i Internet Explorer (IE), đ i t ố ớ ố ượ ng này đ ượ c cài đ t d ặ ướ ạ i d ng 1.
- Do đó, đ t o đ ể ạ ượ c nó, c n ph i th c hi n câu l nh javascript sau: ầ ả ự ệ ệ var oXmlHttp = new ActiveXObject("Microsoft.XMLHttp");.
- Trong đó Microsoft.XMLHttp là lo i đ i t ạ ố ượ ng ActiveXObject c n t o.
- Tuy nhiên, có nhi u phiên b n IE khác nhau nên đ đ i t ề ả ể ố ượ ng XMLHttp cũng có nhi u ề phiên b n khác nhau.
- Microsoft.XMLHttp.
- MSXML2.XMLHttp.
- MSXML2.XMLHttp.3.0.
- MSXML2.XMLHttp.4.0.
- MSXML2.XMLHttp.5.0.
- Đ vi t 1 đo n code t ng quát, có th s d ng cho b t kì phiên b n IE nào, ta s dùng ể ế ạ ổ ể ử ụ ấ ả ẽ câu l nh ệ try … catch.
- Đ i v i các trình duy t : Mozilla Firefox, Safari, và Opera thì câu l nh javascript đ t o ố ớ ệ ệ ể ạ đ i t ố ượ ng XMLHttp gi ng nhau: ố.
- Nh v y, đ t o đ ư ậ ể ạ ượ c đ i t ố ượ ng XMLHttp cho m i trình duy t ta dùng đo n ọ ệ ạ javascript sau:.
- S d ng đói t ử ụ ượ ng XMLHttp.
- Sau khi đã t o đ i t ạ ố ượ ng XMLHttp, ta b t đ u th c hi n vi c t o request đ n server.
- ắ ầ ự ệ ệ ạ ế B ướ c đ u tiên là g i ph ầ ọ ươ ng th c open, dùng đ kh i t o đ i t ứ ể ở ạ ố ượ ng.
- Request Type: là 1 chu i cho bi t lo i request c n th c hi n, có th là GET ho c ỗ ế ạ ầ ự ệ ể ặ POST..
- Async: là 1 giá tr boolean, cho bi t request có đ ị ế ượ c th c hi n 1 cách b t đ ng b ự ệ ấ ồ ộ hay không..
- Tham s này r t quan tr ng, nó xác đ nh cách th c mà javascript th c hi n request.
- Khi ố ấ ọ ị ứ ự ệ đ ượ c thi t l p là ế ậ true, request s đ ẽ ượ c th c hi n 1 cách b t đ ng b , và các đo n ự ệ ấ ồ ộ ạ l nh javascript v n ti p t c đ ệ ẫ ế ụ ượ c th c hi n mà không c n ph i ch response t server.
- ậ ầ ả ặ ử ự ệ ệ ụ ờ ừ N u async là ế false thì các đo n l nh javascript k ti p s không đ ạ ệ ế ế ẽ ượ c th c hi n cho ự ệ đ n khi server g i xong d li u v .
- Ví dụ: Đ th c hi n 1 request yêu c u server tr v n i dung file info.txt n m trên th ể ự ệ ầ ả ề ộ ằ ư m c ch a trang web trên server thì ta th c hi n nh sau: ụ ứ ự ệ ư.
- oXmlHttp.open("get info.txt", true);.
- Đ i t ố ượ ng XMLHttp có 1 thu c tính là ộ readyState, tham s này s thay đ i khi mà ố ẽ ổ request đ ượ c th c hi n và khi client nh n đ ự ệ ậ ượ c response t server.
- Thu c tính này có 5 ừ ộ giá tr nh sau: ị ư.
- 0 (Uninitialized): Đ i t ố ượ ng m i đ ớ ựơ ạ c t o nh ng hàm open ch a đ ư ư ượ c g i.
- ở ề ế ố ạ M i l n thu c tính readyState thay đ i giá tr thì s ki n ỗ ầ ộ ổ ị ự ệ readystatechange đ ượ c phát sinh và hàm x lí s ki n ử ự ệ onreadystatechange đ ượ c g i.
- Do các browser cài đ t đ i ọ ặ ố t ượ ng XMLHttp khác nhau nên đ đ m b o trang web c a mình có th ch y đ ể ả ả ủ ể ạ ượ c trên nhi u browser thì ta ch nên dùng các giá tr sau c a thu c tính readyState ề ỉ ị ủ ộ : 0, 1 và 4 Trong h u h t các tr ầ ế ườ ng h p, ta ch c n xét tr ợ ỉ ầ ườ ng h p thu c tính readyState có giá ợ ộ tr là 4, t c là khi toàn b d li u t server đã g i đ n client.
- oXmlHttp.send(null);.
- Sau khi g i hàm này thì request đ ọ ượ c g i đi, khi toàn b d li u đ ở ộ ữ ệ ượ c nh n v thì hàm ậ ề onreadystatechange s đ ẽ ượ c g i và đây, ta s th c hi n các x lí t ọ ở ẽ ự ệ ử ươ ng ng v i d ứ ớ ữ li u nh n đ ệ ậ ượ c.
- D li u này đ ữ ệ ượ ấ c l y thông qua 1 trong 2 thu c tính ộ responseText ho c ặ responseXML..
- Thu c tính responseText ch a chu i response trong khi responseXML ch a 1 đ i t ộ ứ ỗ ứ ố ượ ng tài li u XML.
- Thu c tính responseXML ch đ ệ ộ ỉ ượ c dùng khi lo i d li u tr v là ạ ữ ệ ả ề.
- Trong tr ườ ng h p yêu c u n i dung file info.txt trong ví d trên thì ta ch c n ợ ầ ộ ụ ỉ ầ dùng thu c tính responseText.
- N u s d ng thu c tính responseXML thì c n tìm hi u thêm v ế ử ụ ộ ầ ể ề DOMDocument vì responseXML chính là 1 đ i t ố ượ ng DOMDocument.
- Có th tìm thông tin v lo i đ i ể ề ạ ố t ượ ng này trong MSDN 2003 v i t khóa “DOMDocument”.
- M t đo n code ví d s d ng thu c tính responseXML ộ ạ ụ ử ụ ộ var xmldoc = httpRequest.responseXML;.
- M t v n đ n a đ ộ ấ ề ữ ượ c đ t ra là, sau khi th c hi n, có th request không thành công.
- Đ gi i quy t tr ể ả ế ườ ng h p b l i, ta dùng 2 thu c tính khác c a l p XMLHttp là ợ ị ỗ ộ ủ ớ status và statusText.
- N u ế status có giá tr là 200 thì request thành công, ng ị ượ ạ c l i, request th t b i, khi đó, thông tin l i s đ ấ ạ ỗ ẽ ượ c ch a trong thu c tính ứ ộ statusText..
- Sau khi nh n response t server (readyState = 4), có th ki m tra request thành công ậ ừ ể ể hay không b ng đo n code.
- Ngoài d li u nh n đ ữ ệ ậ ượ c trong ph n body c a response b ng 2 thu c tính ầ ủ ằ ộ.
- responseText ho c responseXML, ta có th truy xu t đ n d li u trong ph n header ặ ể ấ ế ữ ệ ầ c a response b ng hàm ủ ằ getResponseHeader.
- Cũng có th l y t t c các thông tin t response header nh sau: ể ấ ấ ả ừ ư.
- Trong khi th c hi n request, ta cũng có th thêm các thông tin vào ph n header c a ự ệ ể ầ ủ request, đây có th là các thông tin b t kì.
- oXmlHttp.setRequestHeader("myheader myvalue");.
- $sQuery = "Select * from Customers where CustomerId=".$sID;.
- $sInfo = $aValues['Name']."<br />".$aValues['Address']."<br />"..
- $aValues['City']."<br />".$aValues['State']."<br />"..
- $aValues['Zip']."<br /><br />Phone: ".$aValues['Phone']."<br />"..
- "<a href=\"mailto:".$aValues['E-mail gt;"..
- $aValues['E-mail']."</a>";.
- $sInfo = "Customer with ID $sID doesn't exist.";.
- header() function is used to set the content type of the page.
- <p>Customer ID: <input type="text".
- /></p>.
- <p><input type="button".
- oXmlHttp.open("get GetCustomerData.php?id=".
- oXmlHttp.onreadystatechange = function.
- if (oXmlHttp.readyState.
- if (oXmlHttp.status.
- displayCustomerInfo(oXmlHttp.responseText);.
- oXmlHttp.statusText);.
- Next comes the assignment of the event handler, which checks for a readyState of 4 and then checks the status of the request.
- First, no JavaScript code is required outside of the main page.
- customer ID is ".mysql_insert_id();.
- customer not saved.";.
- <p>Customer Name: <input type="text".
- /><br />.
- Address: <input type="text".
- City: <input type="text".
- State: <input type="text".
- Zip Code: <input type="text".
- Phone: <input type="text".
- E-mail: <input type="text".
- <p><input type="submit".
- Then, the elements of the form are iterated over, building up a string and storing it in sParam , which is then added to the array.
- Thus, concatenating two strings involves first allocating a new string and then copying the contents of the two other strings into it.
- oXmlHttp.open("post", oForm.action, true);.
- oXmlHttp.setRequestHeader("Content-Type",.
- saveResult(oXmlHttp.responseText);.
- oXmlHttp.send(sBody);.
- Next comes the creation and setup of the XMLHttp object.
- When a form is posted from the browser to a server, it sets the content type of the request as application/x-www-form-urlencoded .
- The onreadystatechange event handler is very similar to that of the GET example.
- sBody string is passed to send() so that it will become part of the request body.
- The code you write is much cleaner and the intent of the code is much more apparent than using numerous callback functions with hidden frames.
- The downside is that, unlike hidden frames, there is no browser history record of the calls that were made