10/10/2018, 09:28
Bắt đầu học AJAX.
AJAX Công nghệ Web 2.0
PHP Code:
<script type="text/javascript">
var rootdomain="http://"+window.location.hostname
function ajaxinclude(url) {
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.open('GET', url, false) //get page synchronously
page_request.send(null)
writecontent(page_request)
}
function writecontent(page_request){
if (window.location.href.indexOf("http")==-1 || page_request.status==200)
document.write(page_request.responseText)
}
</script>
<script type="text/javascript">
//ajaxinclude("afile.htm")
</script>
or:
<script type="text/javascript">
//ajaxinclude(rootdomain+"/includes/afile.htm")
</script>
<a href="#" onClick="ajaxinclude('
http://ddth.com/showthread.php?t=106924');"> Dien dan tin hoc</a>
Bài liên quan
Điều này có lợi gì :
Thứ nhất nó sẽ tăng tốc độ load trang lên vì không phải load lại các thành phần khác của trang.
Thứ 2 sẽ tiết kiệm đc băng thông của host.
Yêu cầu đặt ra là tất cả các đc trên trang phải có url tuyệt đối hoặc là phải cùng chung một host để các thành phần như hình , flash, hiển thị đc.
Vậy điều này đc thực hiện như thế nào? và làm sao để có thể làm đc điều đó, topic này mở ra với mục đích cung cấp, chia sẽ những hiểu biết ít ỏi của Conan trong máy ngày tìm hiểu AJAX.
<div id="noidung"></div>
function loadContent()
{
document.getElementById('noidung').innerHTML ='noi dung tra ve tu server';
}
window.XMLHttpRequest --->new XMLHttpRequest()
page_request = new ActiveXObject("Msxml2.XMLHTTP")
page_request = new ActiveXObject("Microsoft.XMLHTTP")
tùy theo trường hợp bạn lấy dữ liệu hay gởi dữ liệu mà bạn sử dụng phương thức GET or POST
page_request.open('GET', url, false)
Sau khi server trả về nội dung của tài liệu được yêu cầu chúng ta cần phải lưu nội dung trả về vào đối tượng request:
page_request.send(null) // empty nội dung của đt request
writecontent(page_request) // gi nội dung trả về vào đối tượng request
Vậy là lúc này đối tượng request của bạn sẽ chứa thông tin về nội dung trả về từ phía server, việc còn lại của bạn chỉ là định dạng và hiển thị nội dung trả về:
page_request.responseText
Vì AJAX là một thứ còn rất mới mà bài viết tiếng việt thì chỉ nói đại khái chung chung , không đi sâu và thực tế mổ xẻ code nên đọc không hiểu là mấy, những kiến thức mà mình có được chỉ là giai đoạn đầu tìm hiểu về AJAX nên sẽ có rất nhiều cái không đúng , nếu conan rất vui nếu các bạn góp ý về những cái không đúng trong bài viết trên.
Thanks so much .
1. onChange
2. onBlur
3. onFocus
để thực hiện bạn sử dụng Event thứ nhất ' onChange ' của form
Khi bạn chỉnh sữa xong thì lúc đó sẽ là onChange="Update(this.value);"
còn trong chương trình AJAX thì bạn sẻ sử dụng phương thức POST cho đối tượng request. Nếu dữ liệu ít thì nên sử dụng phương thức Get, phương thức POST phù hợp với dữ liệu lớn.
Luồng xử lý như sau:
User click chọn bài hát => đưa vào db theo session id => hiển thị lên trình nghe flash và Play.
Bạn có thể hướng dẫn dùm tôi cách xử lý trong trường hợp này ?
<html> <head> <title>Example page: instant edit AJAX-style</title> <script type="text/javascript"> <!-- //script by yvoschaap.com //freely usable //optional link back would be very web 2.0 :) function datosServidor() { }; datosServidor.prototype.iniciar = function() { try { // Mozilla / Safari this._xh = new XMLHttpRequest(); } catch (e) { // Explorer var _ieModelos = new Array( 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP' ); var success = false; for (var i=0;i < _ieModelos.length && !success; i++) { try { this._xh = new ActiveXObject(_ieModelos[i]); success = true; } catch (e) { // Implementar manejo de excepciones } } if ( !success ) { // Implementar manejo de excepciones, mientras alerta. return false; } return true; } } datosServidor.prototype.ocupado = function() { estadoActual = this._xh.readyState; return (estadoActual && (estadoActual < 4)); } datosServidor.prototype.procesa = function() { if (this._xh.readyState == 4 && this._xh.status == 200) { this.procesado = true; } } datosServidor.prototype.enviar = function(urlget,datos) { if (!this._xh) { this.iniciar(); } if (!this.ocupado()) { this._xh.open("GET",urlget,false); this._xh.send(datos); if (this._xh.readyState == 4 && this._xh.status == 200) { return this._xh.responseText; } } return false; } var urlBase = "update.php"; var formVars = ""; var changing = false; function fieldEnter(campo,evt,idfld) { evt = (evt) ? evt : window.event; if (evt.keyCode == 13 && campo.value!="") { elem = document.getElementById( idfld ); remotos = new datosServidor; nt = remotos.enviar(urlBase + "?fieldname=" +escape(elem.id)+ "&content="+escape(campo.value)+"&"+formVars,""); //remove glow noLight(elem); elem.innerHTML = nt; changing = false; return false; } else { return true; } } function fieldBlur(campo,idfld) { if (campo.value!="") { elem = document.getElementById( idfld ); remotos = new datosServidor; nt = remotos.enviar(urlBase + "?fieldname=" +escape(elem.id)+ "&content="+escape(campo.value)+"&"+formVars,""); elem.innerHTML = nt; changing = false; return false; } } //edit field created function cambia(actual) { if(!changing){ width = widthEl(actual.id) + 20; height =heightEl(actual.id) + 2; if(width < 100) width = 150; if(height < 40) actual.innerHTML = "<input id=\""+ actual.id +"_field\" style=\"width: "+width+"px; height: "+height+"px;\" maxlength=\"254\" type=\"text\" value=\"" + actual.innerHTML + "\" onkeypress=\"return fieldEnter(this,event,'" + actual.id + "')\" onfocus=\"highLight(this);\" onblur=\"noLight(this); return fieldBlur(this,'" + actual.id + "');\" />"; else actual.innerHTML = "<textarea name=\"textarea\" id=\""+ actual.id +"_field\" style=\"width: "+width+"px; height: "+height+"px;\" onfocus=\"highLight(this);\" onblur=\"noLight(this); return fieldBlur(this,'" + actual.id + "');\">" + actual.innerHTML + "</textarea>"; changing = true; } actual.firstChild.focus(); } //find all span tags with class editText and id as fieldname parsed to update script. add onclick function function editbox_init(){ if (!document.getElementsByTagName){ return; } var spans = document.getElementsByTagName("span"); // loop through all span tags for (var i=0; i<spans.length; i++){ var spn = spans[i]; if (((' '+spn.className+' ').indexOf("editText") != -1) && (spn.id)) { spn.onclick = function () { cambia(this); } spn.style.cursor = "pointer"; spn.title = "Click to edit!"; } } } //crossbrowser load function function addEvent(elm, evType, fn, useCapture) { if (elm.addEventListener){ elm.addEventListener(evType, fn, useCapture); return true; } else if (elm.attachEvent){ var r = elm.attachEvent("on"+evType, fn); return r; } else { alert("Please upgrade your browser to use full functionality on this page"); } } //get width of text element function widthEl(span){ if (document.layers){ w=document.layers[span].clip.width; } else if (document.all && !document.getElementById){ w=document.all[span].offsetWidth; } else if(document.getElementById){ w=document.getElementById(span).offsetWidth; } return w; } //get height of text element function heightEl(span){ if (document.layers){ h=document.layers[span].clip.height; } else if (document.all && !document.getElementById){ h=document.all[span].offsetHeight; } else if(document.getElementById){ h=document.getElementById(span).offsetHeight; } return h; } function highLight(span){ span.parentNode.style.border = "2px solid #D1FDCD"; span.parentNode.style.padding = "0"; span.style.border = "1px solid #54CE43"; } function noLight(span){ span.parentNode.style.border = "0px"; span.parentNode.style.padding = "2px"; span.style.border = "0px"; } //sets post/get vars for update function setVarsForm(vars){ formVars = vars; } addEvent(window, "load", editbox_init); --> </script> <style type='text/css'> body{ font-family: verdana; font-size: .9em; } input, textarea, pre{ font-family: verdana; font-size: inherit; font-family: inherit; } label{ width: 110px; } #userName, #userName_field{ font-size: 14px; } #cityName, #cityName_field{ font-size: 14px; background-color: #333; color: #fff; } #blogTitle, #blogTitle_field{ font-size: 24px; } #blogText, #blogText_field{ width: 240px; } #lorumText, #lorumText_field{ width: 500px; } </style> </head> <body> <script type="text/javascript"> setVarsForm("pageID=profileEdit&userID=11&sessionID=28ydk3478Hefwedkbj73bdIB8H"); </script> <!-- digg image --> <div style="float:right; padding: 10px;"><a href="http://digg.com/programming/Simple_AJAX_inline_text_update_2.0_" target="_new"><img src="digg.gif" border="0"></a></div> <label>Your name:</label> <span id="userName" class="editText">John Doe</span><br /> <label>Your city:</label> <span id="cityName" class="editText">Rotterdam, NL</span> <hr /> <h1><span id="blogTitle" class="editText">AJAX instant edit script - clean HTML</span></h1> <span id="blogText" class="editText">Welcome to my blog. Today i created this instant update script. Click here to try! If you like it you can download and view the source at: yvoschaap.com. Have fun and success.</span> <p>Message of the day:<strong><span id="messageDay" class="editText">Time Spend Wishing, Is Time Wasted</span></strong></p> <hr> <span id="lorumText" class="editText">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut faucibus commodo lacus. Donec egestas magna et risus.<br /> <br /> Etiam velit tellus, sagittis eget, pretium eu, sagittis ut, sem. Aliquam est. Nam condimentum. In massa ligula, varius in, aliquet vehicula, facilisis id, ante. Sed purus. Vestibulum tempus facilisis lectus. Phasellus convallis, lorem in bibendum convallis, nunc nisl fringilla sem, ut nonummy turpis nunc sed risus. Aliquam bibendum semper ipsum. <br /> <br /> In hac habitasse platea dictumst. Maecenas vulputate, nisl nec tempus rutrum, tortor ligula interdum urna, eget porttitor risus sem eu odio. <br /> <br /> Nullam vel leo sed enim sodales euismod. Phasellus volutpat purus sit amet erat. Nulla ut enim. Nullam tempus enim eget lacus. Nulla a nibh eu enim bibendum bibendum. Nunc justo. Vivamus sagittis sollicitudin lacus. Duis lacinia nisi et lectus. Etiam ac felis et est sagittis aliquam. Duis vitae nulla. Nam sed nibh. Mauris fermentum sodales nulla. Nam fringilla. In hac habitasse platea dictumst. Aliquam erat volutpat. Fusce consectetuer. <br /> </span> <p></p> <hr> <em>note: editted text fields in this example do not save!</em><br /> <em><a href="http://www.yvoschaap.com/index.php/weblog/ajax_inline_instant_update_text_20">Back to article</a></em> </body> </html>