转行前端自我学习养成记之js学习记录篇——《DOM编程艺术》学习记录三

异步加载Ajax

边看边写，边写边改，边改边总结，终于到这本书的最后一章了，书中给的标题是——综合示例。这一章将前面所有章节学过的知识进行汇总练习，通过设计一个完整网页来实践。由于之前章节的练习都动手码过，所以一开始并不是很难，最难得要数Ajax这部分了

书中在第7章简单的提了下Ajax的概念，配合一个简单的例子。简单来说就是不用重复加载页面就能显示新页面的内容（新页面跟调用页面的文件需在同一个文件夹地址）。

当时在看第七章的时候，因为主要精力还是DOM操作的练习，所以也就是简单的扫了一眼，没深究。在最后一章，因为是全书的末尾了，所以想着也该来掌握Ajax这个神奇的艺术了。

应用Ajax关键就是定义一个XMLHttpRequest对象，通过这个对象就能调用相应的open（），send（）等方法。由于浏览器的兼容性，所以还需要做一个判断，if（window.XMLHttpRequest）为true，直接创建对象var obj=new XMLHttpRequest（）；如果为false（即浏览器不兼容，）则要通过var obj=new ActiveXObject("Microsoft.XMLHTTP")创建对象。一般情况下，主流浏览器都能直接创建，除了IE比较早的版本。

创建对象之后，要想异步成功，对于readyState这个属性的判断尤为重要，readyState属性值有5个（0~4），

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

直到值为4，表示请求成功并响应之后，执行相应的异步操作（赋值或者其他JS-DOM操作），操作结束之后，将会在当前页面看到异步请求的页面的相应内容，而不需要刷新整个页面。对于内容比较庞大加载比较慢的网页（比如含有很多图片或视频等），异步加载可以更快相应，不需要频繁刷新页面，体验更好。

通过open（method，URL，async）方法，可以获取文本字符串（responseText）或者XML对象数据（responseXML），一开始大部分情况下使用responseText。method分‘POST’‘GET’两种，暂时的理解是GET可以从缓存中读数据，量小，不稳定，POST可读数据量大，稳定，也可读用户密码等不确定数据（感觉有点类似提交表单里的POST方法）。

请求数据之后，在利用send（）方法发送数据到服务器，参数可为空，也可以是字符串（string）或变量（variable）。暂时还不是很理解这个方法的具体意义。

最基本的Ajax步骤主要是：

1 创建XMLHTTPRequest对象

2 监听readyState状态，onreadystatechange，并执行函数

3 当请求状态完成（readyState=4），通过open（）方法请求数据

4 请求回来的数据：字符串（responseText）或XML对象数据（responseXML）进行操作，赋值给页面的元素或者别的操作。

5 send（）对服务器发送数据。

2018.04.30更新：

Ajax请求支持同域请求与跨域请求。请求的内容与发送请求的页面在同一个服务器上，是同域（同源），不在同一个服务器，则是跨域。同域请求，open（）方法的URL用相对地址，跨域请求，open（）的URL使用绝对地址。

跨域请求时，setRequestHeader（）方法被禁用，getResponseHeader（）返回空。

跨域请求，后端代码需设置头部文件Access-Control-Allow-Origin为请求页面的地址，即允许页面的跨域请求。