ajax

来源：互联网发布：做淘宝客服心得2000字编辑：程序博客网时间：2024/04/27 14:46

《AJAX In Action》

Code Down: http://www.manning.com/crane.

Ajax (Asynchronous JavaScript + XML)

For example DOM

window.onload=function(){

var hello=document.getElementById('hello');

hello.className='declared';

var empty=document.getElementById('empty');

addNode(empty,"reader of");

addNode(empty,"Ajax in Action!");

var children=empty.childNodes;

for (var i=0;i<children.length;i++){

children[i].className='programmed';

}

empty.style.border='solid green 2px';

empty.style.width="200px";

}

function addNode(el,text){

var childEl=document.createElement("div");

el.appendChild(childEl);

var txtNode=document.createTextNode(text);

childEl.appendChild(txtNode);

}

For example

document.getElementsByTagName("UL")

For example

function addListItemUsingInnerHTML(el,text){

el.innerHTML+="<div class='programmed'>"+text+"</div>";

}

Create XmlhttpRequest

function getXMLHTTPRequest() {

var xRequest=null;

if (window.XMLHttpRequest) {

xRequest=new XMLHttpRequest();

}else if (typeof ActiveXObject != "undefined"){

xRequest=new ActiveXObject

("Microsoft.XMLHTTP");

}

return xRequest;

}

var READY_STATE_UNINITIALIZED=0;

var READY_STATE_LOADING=1;

var READY_STATE_LOADED=2;

var READY_STATE_INTERACTIVE=3;

var READY_STATE_COMPLETE=4;

var req;

function sendRequest(url,params,HttpMethod){

if (!HttpMethod){

HttpMethod="GET";

}

req=getXMLHTTPRequest();

if (req){

req.onreadystatechange=onReadyStateChange;

req.open(HttpMethod,url,true);

req.setRequestHeader

("Content-Type", "application/x-www-form-urlencoded");

req.send(params);

}

function onReadyStateChange(){

var ready=req.readyState;

var data=null;

if (ready==READY_STATE_COMPLETE){

data=req.responseText;

}else{

data="loading...["+ready+"]";

}

//... do something with the data...

}

For Example

<html>

<head>

var req=null;

var console=null;

var READY_STATE_UNINITIALIZED=0;

var READY_STATE_LOADING=1;

var READY_STATE_LOADED=2;

var READY_STATE_INTERACTIVE=3;

var READY_STATE_COMPLETE=4;

function sendRequest(url,params,HttpMethod){

if (!HttpMethod){

HttpMethod="GET";

}

req=initXMLHTTPRequest();

if (req){

req.onreadystatechange=onReadyState;

req.open(HttpMethod,url,true);

req.setRequestHeader

("Content-Type", "application/x-www-form-urlencoded");

req.send(params);

}

function initXMLHTTPRequest(){

var xRequest=null;

if (window.XMLHttpRequest){

xRequest=new XMLHttpRequest();

} else if (window.ActiveXObject){

xRequest=new ActiveXObject

("Microsoft.XMLHTTP");

}

return xRequest;

}

function onReadyState(){

var ready=req.readyState;

var data=null;

if (ready==READY_STATE_COMPLETE){

data=req.responseText;

}else{

data="loading...["+ready+"]";

}

toConsole(data);

}

function toConsole(data){

if (console!=null){

var newline=document.createElement("div");

console.appendChild(newline);

var txt=document.createTextNode(data);

newline.appendChild(txt);

}

window.onload=function(){

console=document.getElementById('console');

sendRequest("data.txt");

}

</script>

</head>

<body>

</body>

</html>

Early Ajax solutions using IFrames are described at http://developer.apple.com/internet/webcontent/iframe.html.