[TOC]
# 樣式
## 直接修改樣式表
通過 `document.styleSheets` 獲取樣式表
```javascript
var styles = document.styleSheets;
for(var i in styles){
styles[i].disabled = true; // 修改樣式
}
```
## 位置
### 屏幕坐標
通過 `screenX` 和 `screenY` 屬性來獲取屏幕坐標。屏幕坐標是一種以計算機顯示器的左上角為原點的坐標系。
### 窗口坐標
通過 `clientX` 和 `clientY` 屬性來獲取窗口坐標。窗口坐標是一種以瀏覽器的顯示范圍的左上角為原點的坐標系。這一坐標系與文檔、元素的滾動情況無關，其坐標值僅由內容的顯示位置決定。
### 文檔坐標
通過 `pageX` 和 `pageY` 屬性來獲取元素在文檔中的位置。文檔坐標是一種以文檔頁面的左上角為原點的坐標系。與窗口坐標不同，其坐標值與顯示位置無關，是由元素在整個文檔中的位置決定的。IE 8及更早的版本無法使用這一坐標。
### 在特定元素內的相對坐標
```javascript
function onclick(event){
var x = event.clientX; // 窗口坐標系中鼠標指針的 x 坐標
var y = event.clientY; // 窗口坐標系中鼠標指針的 y 坐標
var r = event.target.getBoundingClientRect(); // 窗口坐標系中被點擊元素的范圍信息
x -= r.left; // 鼠標指針在被點擊元素內部的 x 坐標
y -= r.top; // 鼠標指針在被點擊元素內部的 y 坐標
}
```
## AJAX
### XMLHttpRequest 對象的創建
```javascript
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status === 200){
alert(xhr.responseText);
}
}
}
xhr.open('GET', 'http://xxx');
xhr.send(null);
```
readyState 的含義
readyState | 含義
---|---
0 | open() 尚未被調用
1 | send() 尚未被調用
2 | 服務器尚未返回響應
3 | 正在接收來自服務器的響應
4 | 完成了對來自服務器的響應的接收
### 同步通信
同步通信的話，就不需要對 `onreadystatechange` 事件來處理程序進行設定。在執行了 `send()` 之后該處理將會進入待機狀態，只要在 `send()` 之后繼續書寫對響應的處理操作即可。
### 取消請求
```javascript
var xhr = new XMLHttpRequest();
xhr.abort(); // 取消請求
```
### 跨源限制
對源不用的通信進行限制。源指的是由URL的協議、主機名、端口號所構成的元素。
### JSONP
JSONP 是 JSON with Padding 的簡稱。這里的 Padding 指的是向 JSON 數據中添加函數名。
通過將 `script` 標簽的 `src` 屬性指定為其它域中的 JavaScript 文件并將其載入，如果動態創建 `script` 標簽的話，就能實現對其他域中的數據的動態讀取。
```javascript
function foo(json){
console.log(json)
}
function loadData(){
var elem = document.createElement('script');
elem.src = 'http://api.example.com/some-data&callback=foo';
document.getElementByTagName('head')[0].append(elem);
}
```
JSONP 無法在 POST 請求中使用
### window.postMessage
可以通過 `window.postMessage` 實現安全的跨源通信
```javascript
var frame = document.getElementById("gaFrame");
document.body.onclick=function(){
var sendData={
"name":"deals_list",
"event":"deals_click",
"e_data":"這是發送的數據"
}
frame.contentWindow.postMessage(sendData,"*")
}
var OnMessage = function(e) {
var data=e.data;
ga('send', 'pageview',"/"+data);
}
function init() {
if (window.addEventListener) { // all browsers except IE before version 9
window.addEventListener("message", OnMessage, false);
} else {
if (window.attachEvent) { // IE before version 9
window.attachEvent("onmessage", OnMessage);
}
}
};
init();
```
### XMLHttpRequest Level 2
要進行跨源通信就必須得到服務器端的許可。所以要在響應中包含 Access-Control-Allow-Origin 這一 HTTP 頭部。默認不發送 Cookie，要發送 Cookie 的話要將 withCredentials 設置為 true
