headfirst ajax源代码,《Head First Ajax》读书笔记

告诉浏览器一旦加载页面就运行初始化js函数initPage，则

window.οnlοad=initPage;

Ajax应用必须要求JavaScript。

对字符串进行转码，使之成为合法的url。使用

escape(url);

即可完成转码，例如

escape("calculate 1+2*3/4 & 5^5>1");

输出

calculate%201+2*3/4%20%26%205%5E5%3E1

得到一个请求对象(兼容所有浏览器)

function createRequest(){

try{

request=new XMLHttpRequest(); //在Safari、Firefox、Opera中可以，但不支持IE

}catch(tryMS){ //若是IE，则上述代码异常

try{

request=new ActiveXObject("Msxml12.XMLHTTP");

}catch(otherMS){

try{

request=new ActiveXObject("Microsoft.XMLHTTP");

}catch(failed){ //若都没有，则返回空

request=null;

}

}

}

return request;

}

注意，上述工具函数中，定义的request是没有var修饰的。JavaScript规定，如果在函数中没有var修饰的变量则成为全局变量，当该函数至少运行一次后，你可以在全局范围内找到一个叫做request的变量。另一方面，考察下面代码

function get(){

a={name:"Tom"}

return a;

}

var b=get();

var c=get();

console.log(b===a); //false

console.log(c===a); //true

但是

function get(){

a={name:"Tom"}

return a;

}

var b=get();

var c=get();

var d=get();

console.log(b===a); //false

console.log(c===a); //false

console.log(d===a); //true

这似乎说明了，如果函数中声明一个全局对象并返回，则最后一个调用该函数的变量得到该全局对象的引用，而其他调用该函数的变量则得到副本。

一个通常的请求流程：GET

request=createRequest();

var url="http://....?"+escape("A=a&B=b"); //编码数据

request.open("GET",url,true); //true代表是异步过程

request.onreadystatechange=callback; //设置回调函数(直接写函数名即可)

request.send(null);

如果是一个POST方法，则

request=createRequest();

var url="http://...."; //不需要编码数据，不需要？问号

request.open("POST,url,true); //true代表是异步过程

request.onreadystatechange=callback; //设置回调函数(直接写函数名即可)

data=escape("A=a&B=b"); //数据放这里

request.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //非常重要，设置首部，表示数据是"key1=value1&key2=value2"形式。

request.send(data); //发送数据

注意上面的onreadystatechanged的属性，它是用来设置回调函数。每次服务器响应，就会改变请求对象request的readyState属性，触发回调函数，这就是说，此处的回调函数可能不止调用一次。我们希望当服务器处理完全后再执行回调逻辑，那么就要在回调函数中判断readyState的值，只有当它等于4时才表示服务器处理完全。

回调函数看起来像是这样

function callback(){

if(request.readyState==4&&request.status==200){

.....

}

}

上述中，readyState属性等于4代表服务器处理完全，status属性200代表OK，服务器认为一切正常。

readyState=1 请求准备好可以发送(初始)

readyState=2 服务器正在处理

readyState=3 部分数据已下载到请求对象中，但是还没有完全弄好还不能使用

readyState=4 请求处理完毕，响应数据可以开始使用

服务器返回的数据都存储在request.responseText中，同时，如果服务器发回的是XML的数据，则request.responseXML中会存储一个XML的DOM(当然在request.responseText也有XML的朴素文本)

使用CSS控制页面的变化，即用JavaScrip来动态改变元素的class，使得CSS选择器可以匹配并更改元素的显示

document.getElementById('element').className="CSS_Class_Name";

禁用按钮

document.getElementById('button').disabled=true;

获取输入焦点

document.getElementById('button').select();

document.getElementById('button').focus();

元素设置title属性，则当鼠标移动该元素上面的时候就会弹出悬浮框提示。

函数的this指向问题(仅在非IE时)。在下面的例子中，this指向不同的元素

按钮1

按钮2

....

function myOnClick(){

console.log(this.id);

};

document.getElementById('b1').οnclick=myOnClick;

document.getElementById('b2').οnclick=myOnClick;

那么，点击两个按钮后，分别在控制台输出“b1”、“b2”字样。这是因为该函数被赋给不同的元素，那么他们的this指针也就指向相应元素的实体。

但是，如果是(注意里myOnClick有括号，而上面的例子中没有括号)onclick="myOnClick()"> 按钮1 ，那么输出结果就不一定了，this此时不是指向该元素本身，我们会在下面看到。

在上一条中，因为document.getElementById('b1').onclick=myOnClick;，我们说b1这个元素是myOcClick函数的拥有者，所以其内的this指向b1元素。但是在如下语句中

按钮

myOnClick内的指针将不再指向b1元素，因为此时它是调用者而不是拥有者。你可以看到很大的不同：myOnClick后面有括号。这就是说，其调用时，会把onclick这个字符串送入eval中计算直接执行，而不是调用click()本身。

函数的this指向问题(在IE时)。在IE中，哪怕下面的代码：

按钮1

按钮2

....

function myOnClick(){

console.log(this.id);

};

document.getElementById('b1').οnclick=myOnClick;

document.getElementById('b2').οnclick=myOnClick;

其中myOnClick的this都不会指向具体某个元素，而是指向IE事件框架。为了能够获取点击的是哪一个元素，我们可以使用attachEvent、addEventListener提供的一个参数来取得。具体见后。

给元素指定多个触发函数(如oncick)，则以最后一个为准。

在支持DOM LEVEL 2(如Mozilla的浏览器)的JavaScript中，可以给元素设置addEventListener，使得对于一个触发事件可以触发多个回调函数。

document.getElementById("button1").addEventListener("click",callback,isCapture);

document.getElementById("button1").addEventListener("mouseover",callback,isCapture);