关闭

ajax

658人阅读 评论(0) 收藏 举报

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>

<script type='text/javascript'>

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>

<div id='console'></div>

</body>

</html>

 

 

 

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

 

 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:296740次
    • 积分:3853
    • 等级:
    • 排名:第8228名
    • 原创:52篇
    • 转载:187篇
    • 译文:0篇
    • 评论:12条
    文章分类
    最新评论