浏览器操作、AJAX、跨域

# window对象不但充当全局作用域，而且表示浏览器窗口
// 获取浏览器窗口的内部宽度和高度(IE<=8不支持)
// 内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高
// 对应的，还有一个outerWidth和outerHeight属性，可以获取浏览器窗口的整个宽高
window.innerWidth;
window.innerHeigth;

# navigator
// navigator对象表示浏览器的信息，最常用的属性包括
navigator.appName                  //浏览器名称
navigator.appVersion               //浏览器版本
navigator.language                 //浏览器设置的语言
navigator.platform                 //操作系统类型
navigator.userAgent                //浏览器设定的User-Agent字符串
// navigator的信息可以很容易地被用户修改，所以JavaScript读取的值不一定是正确的
// 所以不要使用下面这种判断方式
var width;
if (getIEVersion(navigator.userAgent) < 9) {
    width = document.body.clientWidth;
} else {
    width = window.innerWidth;
}
// 充分利用 || 和 undefined 来做浏览器兼容
var width = window.innerWidth || document.body.clientWidth;

# screen对象表示屏幕的信息，常用的属性有
screen.width                //屏幕宽度，以像素为单位
screen.height               //屏幕高度，以像素为单位
screen.colorDepth           //返回颜色位数，如8、16、24

# location
http://www.example.com:8080/path/index.html?a=1&b=2#TOP
location.protocol;              // 'http'
location.host;                  // 'www.example.com'
location.port;                  // '8080'
location.pathname;              // '/path/index.html'
location.search;                // '?a=1&b=2'
location.hash;                  // 'TOP'
location.assign('/discuss');    // 加载一个新页面
location.reload();              // 重新加载

# document对象表示当前页面
// 由于HTML在浏览器中以DOM形式表示为树形结构，document对象就是整个DOM树的根节点
document.title = '努力学习JavaScript!';
var div1 = document.getElementById('div1');     //定位唯一的一个DOM节点
div1.tagName;                                   //div
div1.children;                                  //所有直属子节点 .length获取节点数组长度
div1.parentElement;                             //父节点
div1.firstElementChild;                         //第一个子节点
div1.lastElementChild;                          //最后一个子节点
div1.innerHTML;
div1.innerText;
p.style.fontSize = '20px';                      //设置css样式，驼峰
document.getElementsByTagName('div');           //返回一组DOM节点
document.getElementsByClassName('class1');      //返回一组DOM节点
// 如果服务器设置cookie时使用httpOnly，那么cookie将不能被js读取
// 为了安全起见，建议服务器设置httpOnly
document.cookie;

# appendChild
/*  
    只是移动，并不是添加
    操作前：
    <div id="div2">bbbb</div>
    <div id="div1">aaaa</div>
    操作后：
    <div id="div1">aaaa
        <div id="div2">bbbb</div>
    </div>
*/
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
div1.appendChild(div2);
// 添加
var div3 = document.createElement('div');
div3.id = 'div3';
div3.innerText = 'cccc';
div1.appendChild(div3);
// 添加样式
var s = document.createElement('style');
s.setAttribute('type', 'text/css');
s.innerHTML = 'div { color: red }';
document.getElementsByTagName('head')[0].appendChild(s);
// 把newElement插入指定的referenceElement之前
parentElement.insertBefore(newElement, referenceElement);
// 在DOM树中删除子节点div2，其实还是保存在内存中，可以随时恢复removed
var removed = div1.removeChild(div2);

# 文件
// enctype="multipart/form-data" method="post"
// 或使用 HTML5 File API File和FileReader两个主要对象
<input type="file">

# AJAX(Asynchronous JavaScript and XML)
// 同源策略 域名要相同 协议要相同(http和https不同) 端口号要相同
var request;
if (window.XMLHttpRequest) {
    request = new XMLHttpRequest();
} else {    //兼容低版本IE
    request = new ActiveXObject('Microsoft.XMLHTTP');
}

# 跨域
// JSONP 
// 服务端代理转发(如:/proxy?url=http://www.sina.com.cn)
/*
   CORS 需要浏览器支持HTML5并且服务端同意 Access-Control-Allow-Origin:你的域名或*
   包括GET、HEAD和POST
   POST的Content-Type类型仅限application/x-www-form-urlencoded、multipart/form-data和text/plain
   并且不能出现任何自定义头（例如，X-Custom: 12345）
   对于PUT、DELETE以及其他类型如application/json的POST请求
   在发送AJAX请求之前，浏览器会先发送一个OPTIONS请求（称为preflighted请求）
   OPTIONS /path/to/resource HTTP/1.1
   Host: bar.com
   Origin: http://my.com
   Access-Control-Request-Method: POST
   服务器必须响应并明确指出允许的Method，符合要求才会发送，否则会抛出一个错误
   HTTP/1.1 200 OK
   Access-Control-Allow-Origin: http://my.com
   Access-Control-Allow-Methods: POST, GET, PUT, OPTIONS
   Access-Control-Max-Age: 86400
*/

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

# window对象不但充当全局作用域，而且表示浏览器窗口

// 获取浏览器窗口的内部宽度和高度(IE<=8不支持)

// 内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高

// 对应的，还有一个outerWidth和outerHeight属性，可以获取浏览器窗口的整个宽高

window.innerWidth;

window.innerHeigth;

# navigator

// navigator对象表示浏览器的信息，最常用的属性包括

navigator.appName //浏览器名称

navigator.appVersion //浏览器版本

navigator.language //浏览器设置的语言

navigator.platform //操作系统类型

navigator.userAgent //浏览器设定的User-Agent字符串

// navigator的信息可以很容易地被用户修改，所以JavaScript读取的值不一定是正确的

// 所以不要使用下面这种判断方式

var width;

if (getIEVersion(navigator.userAgent) < 9) {

width = document.body.clientWidth;

} else {

width = window.innerWidth;

}

// 充分利用 || 和 undefined 来做浏览器兼容

var width = window.innerWidth || document.body.clientWidth;

# screen对象表示屏幕的信息，常用的属性有

screen.width //屏幕宽度，以像素为单位

screen.height //屏幕高度，以像素为单位

screen.colorDepth //返回颜色位数，如8、16、24

# location

http://www.example.com:8080/path/index.html?a=1&b=2#TOP

location.protocol; // 'http'

location.host; // 'www.example.com'

location.port; // '8080'

location.pathname; // '/path/index.html'

location.search; // '?a=1&b=2'

location.hash; // 'TOP'

location.assign('/discuss'); // 加载一个新页面

location.reload(); // 重新加载

# document对象表示当前页面

// 由于HTML在浏览器中以DOM形式表示为树形结构，document对象就是整个DOM树的根节点

document.title = '努力学习JavaScript!';

var div1 = document.getElementById('div1'); //定位唯一的一个DOM节点

div1.tagName; //div

div1.children; //所有直属子节点 .length获取节点数组长度

div1.parentElement; //父节点

div1.firstElementChild; //第一个子节点

div1.lastElementChild; //最后一个子节点

div1.innerHTML;

div1.innerText;

p.style.fontSize = '20px'; //设置css样式，驼峰

document.getElementsByTagName('div'); //返回一组DOM节点

document.getElementsByClassName('class1'); //返回一组DOM节点

// 如果服务器设置cookie时使用httpOnly，那么cookie将不能被js读取

// 为了安全起见，建议服务器设置httpOnly

document.cookie;

# appendChild

只是移动，并不是添加

操作前：

操作后：

<div id="div1">aaaa

</div>

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

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

div1.appendChild(div2);

// 添加

var div3 = document.createElement('div');

div3.id = 'div3';

div3.innerText = 'cccc';

div1.appendChild(div3);

// 添加样式

var s = document.createElement('style');

s.setAttribute('type', 'text/css');

s.innerHTML = 'div { color: red }';

document.getElementsByTagName('head')[0].appendChild(s);

// 把newElement插入指定的referenceElement之前

parentElement.insertBefore(newElement, referenceElement);

// 在DOM树中删除子节点div2，其实还是保存在内存中，可以随时恢复removed

var removed = div1.removeChild(div2);

# 文件

// enctype="multipart/form-data" method="post"

// 或使用 HTML5 File API File和FileReader两个主要对象

# AJAX(Asynchronous JavaScript and XML)

// 同源策略域名要相同协议要相同(http和https不同) 端口号要相同

var request;

if (window.XMLHttpRequest) {

request = new XMLHttpRequest();

} else { //兼容低版本IE

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

}

# 跨域

// JSONP

// 服务端代理转发(如:/proxy?url=http://www.sina.com.cn)

CORS 需要浏览器支持HTML5并且服务端同意 Access-Control-Allow-Origin:你的域名或*

包括GET、HEAD和POST

POST的Content-Type类型仅限application/x-www-form-urlencoded、multipart/form-data和text/plain

并且不能出现任何自定义头（例如，X-Custom: 12345）

对于PUT、DELETE以及其他类型如application/json的POST请求

在发送AJAX请求之前，浏览器会先发送一个OPTIONS请求（称为preflighted请求）

OPTIONS /path/to/resource HTTP/1.1

Host: bar.com

Origin: http://my.com

Access-Control-Request-Method: POST

服务器必须响应并明确指出允许的Method，符合要求才会发送，否则会抛出一个错误

HTTP/1.1 200 OK

Access-Control-Allow-Origin: http://my.com

Access-Control-Allow-Methods: POST, GET, PUT, OPTIONS

Access-Control-Max-Age: 86400

唐晓锋–BLOG

This is just a personal note.

发表评论取消回复

发表评论 取消回复

发表评论取消回复