javaScript 文档操作 及AJAX

ECMAScript 是一种语言标准，而JavaScript是对ECMAScript标准的一种实现。
JavaScript版本 实际上是说它实现了ECMAScript 标准的哪个版本。
要坚信：JavaScript本身没有问题，浏览器执行也没有问题，有问题的一定是我的代码。
JavaScript中定义的以下几种数据类型
1.Number javaScript 不区分整数和浮点数，统一用Number表示
2.字符串
3.布尔值
4.null 表示一个”空”的值
5.undefind 表示值未定义 ，仅仅在判断函数参数是否传递的情况下有用。
6.数组 ，一组按顺序排列的集合，集合的每个值为元素。JavaScript的数组可以包括任意数据类型。
7.对象 – 一组由键-值组成的无序集合 ，键都是字符串类型，值可以为任意数据类型
8.变量
strict模式 在同一个页面的不同的JavaScript文件中，如果都不用var申明，恰好都使用了变量i，将造成变量i互相影响，产生难以调试的错误结果。
ECMA在后续规范中推出了strict模式，在strict模式下运行的JavaScript代码，强制通过var申明变量，未使用var申明变量就使用的，将导致运行错误。

浏览器
目前主流的浏览器分这么几种：
IE 6-11
Chrome :Google出品的基于Webkit内核浏览器，内置了javaScript 引擎—-V8
Safari –基于Webkit内核的浏览器
Firefox :Mozilla自己研制的Gecko内核和JavaScript引擎OdinMonkey

浏览器对象

JavaScript可以获取浏览器提供的很多对象，并进行操作。
window
window 对象不但充当全局作用域，而且表示浏览器窗口。
window对象有innerWidth和innerHight属性，可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏，工具栏，边框等占位元素后，用于显示网页的净宽高。
navigator
对象表示浏览器的信息。
正确的方法是充分利用JavaScript对不存在属性返回undefined的特性，直接用短路运算符计算：
var width = window.innerWidth || document.body.clientWidth；
screen
对象表示屏幕的信息，常用的属性有：
screen.width：屏幕宽度，以像素为单位
screen.height：屏幕高度，以像素为单位
location
location对象表示当前页面的URL信息。
要加载一个新页面，可以调用location.assign()。如果要重新加载当前页面，调用location.reload()方法非常方便。
document对象表示当前页面，由于HTML在浏览器中以DOM形式表示为树形结构，document对象就是整个DOM树的根节点。
操作DOM
由于HTML文档被浏览器解析后就是一棵DOM树，要改变HTML的结构，就需要通过JavaScript来操作DOM。
始终记住DOM是一个树形结构。
在操作一个DOM节点前，我们需要通过各种方式先拿到这个DOM节点。最常用的方法是document.getElementById()和document.getElementsByTagName()，以及CSS选择器document.getElementsByClassName()。
由于ID在HTML文档中是唯一的，所以document.getElementById()可以直接定位唯一的一个DOM节点。document.getElementsByTagName()和document.getElementsByClassName()总是返回一组DOM节点。要精确地选择DOM，可以先定位父节点，再从父节点开始选择，以缩小范围。

更新DOM
拿到一个DOM节点后，我们可以对它进行更新
可以直接修改节点的文本，方法有两种：
一种是修改innerHTML 属性，不仅可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树。
第二种是修改innerText 或textContent 属性，这样可以自动对字符串进行HTML编码，保证无法设置任何HTML标签。
两者的区别在于读取属性时，innerText不返回隐藏元素的文本，而textContent返回所有文本。
DOM节点的style属性对应所有的CSS，可以直接获取或设置。因为CSS允许font-size这样的名称，但它并非JavaScript有效的属性名，所以需要在JavaScript中改写为驼峰式命名fontSize。
插入DOM
有两个办法可以插入新的节点：
一个是使用appendChild ，把一个子节点添加到父节点的最后一个子节点。
如果我们插入的js节点已经存在于当前的文档树，这个节点首先会从原先的位置删除，再插入到新的位置。
var
list = document.getElementById(‘list’),
haskell = document.createElement(‘p’);
haskell.id = ‘haskell’;
haskell.innerText = ‘Haskell’;
list.appendChild(haskell);

var d = document.createElement(‘style’);
d.setAttribute(‘type’, ‘text/css’);
d.innerHTML = ‘p { color: red }’;
document.getElementsByTagName(‘head’)[0].appendChild(d);

insertBefore
parentElement.insertBefore(newElement,referenceElement);子节点会插入大referenceElement之前。

删除DOM
要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉：
当你遍历一个父节点的子节点并进行删除操作时，要注意，children属性是一个只读属性，并且它在子节点变化时会实时更新
/ 拿到待删除节点:
var self = document.getElementById(‘to-be-removed’);
// 拿到父节点:
var parent = self.parentElement;
// 删除:
var removed = parent.removeChild(self);
removed === self; // true
操作表单
获取值
如果我们获得了一个节点的引用，就可以直接调用value获得对应的用户输入值：

//
var input = document.getElementById(‘email’);
input.value; // ‘用户输入的值’

但是，对于单选框和复选框，value属性返回的永远是HTML预设的值，而我们需要获得的实际是用户是否“勾上了”选项，所以应该用checked判断

提交表单 JavaScript可以以两种方式来处理表单的提交
方式一：通过元素的submit()方法来提交一个表单。

Submitfunction doSubmitForm() { var form = document.getElementById('test-form'); // 可以在此修改form的input... // 提交form: form.submit();}

这种方式的缺点是扰乱了浏览器对form的正常提交。
浏览器默认点击时提交表单，或者用户在最后一个输入框按回车键。
因此，第二种方式是响应本身的onsubmit事件，在提交form时作修改。

Submitfunction checkForm() { var form = document.getElementById('test-form'); // 可以在此修改form的input... // 继续下一步: return true;}

注意要return true来告诉浏览器继续提交，如果return false，浏览器将不会继续提交form，这种情况通常对应用户输入有误，提示用户错误信息后终止提交form。
没有name属性的的数据不会被提交。

AJAX
用JavaScript执行异步网络请求
这就是Web的运作原理：一次HTTP请求对应一个页面。
：AJAX请求是异步执行的，也就是说，要通过回调函数获得响应。
在现代浏览器上写AJAX主要依靠XMLHttpRequest对象。
var request;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else {
request = new ActiveXObject(‘Microsoft.XMLHTTP’);
}
当创建了XMLHttpRequest对象后，要先设置onreadystatechange的回调函数。在回调函数中，通常我们只需通过readyState === 4判断请求是否完成，如果已完成，再根据status === 200判断是否是一个成功的响应
XMLHttpRequest对象的open()方法有3个参数，第一个参数指定是GET还是POST，第二个参数指定URL地址，第三个参数指定是否使用异步，默认是true，所以不用写。

注意，千万不要把第三个参数指定为false，否则浏览器将停止响应，直到AJAX请求完成。如果这个请求耗时10秒，那么10秒内你会发现浏览器处于“假死”状态。
最后调用send()方法才真正发送请求。GET请求不需要参数，POST请求需要把body部分以字符串或者FormData对象传进去。

安全限制

上面代码的URL使用的是相对路径。如果你把它改为’http://www.sina.com.cn/‘，再运行，肯定报错。在Chrome的控制台里，还可以看到错误信息。

这是因为浏览器的同源策略导致的。默认情况下，JavaScript在发送AJAX请求时，URL的域名必须和当前页面完全一致。
完全一致的意思是，域名要相同（www.example.com和example.com不同），协议要相同（http和https不同），端口号要相同（默认是:80端口，它和:8080就不同）。有的浏览器口子松一点，允许端口不同，大多数浏览器都会严格遵守这个限制。
那是不是用JavaScript无法请求外域（就是其他网站）的URL了呢？方法还是有的，大概有这么几种：
一是通过Flash插件发送HTTP请求，这种方式可以绕过浏览器的安全限制，但必须安装Flash,并且跟Flash交互。不过
Flash用起来麻烦，而且现在用的越来越少。
二是通过在同源域名下架设一个代理服务器来转发，JavaScript负责把请求发送到代理服务器：
第三种方式称为JSONP,它有个限制，只能用GET请求，并且要求返回javaScript。这种方式跨域实际上是利用了浏览器允许跨域引用JavaScript资源
JSONP通常以函数调用的形式返回，例如，返回JavaScript内容如下：
foo(‘data’);
这样一来，我们如果在页面中先准备好foo()函数，然后给页面动态加一个