本篇为《JavaScript&jQuery交互式Web前端开发》第八章阅读笔记
一般在看书的时候都会把一些要点记下来作为以后回顾的笔记，第八章讲的是Ajax和JSON，记录的都是比较基础概念的内容。
1、Ajax是一种无须刷新整个页面就能为页面中的某一部分加载数据的技术。数据通常会以JavaScript对象表示法（JacaScript Object Notation，JSON）的格式来进行发送。
2、将新内容加载到页面某一部分的能力可以提升用户体验，因为这样用户就可以不必等待整个页面的重新加载。这会导致所谓的单页面Web应用（基于Web的工具，虽然运行在浏览器中，但感觉上更像软件应用）的崛起。
3、Ajax的例子：1)实时搜索 2)Twitter上展示用户自己的信息 3)商品添加到购物车 4)注册表单时的脚本校验
4、【页面正在加载时】同步处理模型：当浏览器发现script标签时，它通常会停止处理页面的其余部分，直至这段脚本被加载并处理完毕。异步处理（非阻塞）模型：使用Ajax，浏览器可以向服务器请求一些数据，并且一旦数据请求发出，就可以继续加载页面，处理用户与页面之间的交互。浏览器无须等待第三方数据就可以展示页面。如果服务器响应并返回了数据，就会触发一个事件（就想页面加载完毕后会触发load事件一样）。
5、【页面已经加载完毕后】正常情况下，页面加载完毕后，如果还想要更改用户所能看到的内容，通常就需要刷新整个页面，因此用户必须等待浏览器下载并渲染整个页面。使用Ajax后哦，用户可以继续和页面的剩余部分交互。这是通过侦听事件（比如用户点击或提交表单）并使用异步请求向服务器请求新内容来完成。
6、浏览器会使用XMLHttpRequest对象来创建Ajax请求。服务器响应浏览器的请求之后，同一个XMLHttpRequest对象会继续处理返回的结果。
7、需要处理Ajax请求并及时响应。 .open()/.send() .onload/.status。Ajax请求的响应通常以HTML/XML/JSON三种格式来表示。
8、JSON数据看上去像是p92对象字面量，但它其实仅仅是纯文本数据（并不是对象）。JSON数据是以.json的拓展名来保存的。
9、JSON中，键应该放在双引号中（而不是单引号）中。JSON.stringify()将js对象转换成JSON格式字符串（也就是对象的序列化），JSON.parse()将JSON数据转换为浏览器可以使用的js对象（也就是对象的反序列化）
10、 JSON对象是一个全局对象，无须创建它的实例就可以使用它。
11、Ajax能够顺利地消费来自你自己服务器的数据，但是基于安全考量，浏览器不允许加载来自其他域名的Ajax响应（即跨域请求）。变通的方法有三种：1)web服务器上的代理（在服务器上创建文件来收集来自远程服务器的数据，网站的其他页面会向这个文件请求数据） 2)JSONP（有时也写作JSON-P，需要在页面中添加一个script元素，由该元素来从其他服务器加载JSON数据。其之所以有效是因为script元素的脚本并没有受到限制） 3)跨来源资源共享（需要在http头中添加额外的信息，借此让浏览器和服务器知道他们可以直接进行通信）
12、p375JSONP工作原理（从浏览器和服务器两个角度看，浏览器需要两处js，服务器需要padding）：使用JSONP时，并不需要使用JSON对象的parse()或stringify()方法，因为数据是以脚本文件（而非字符串）的形式返回的，自然会被视为对象。注意比较p372/p376。
13、jQuery提供了很多方法来处理Ajax请求，包含创建请求（.load()方法则可以运行在选择器上，能将新的HTML内容加载到选中的元素中，是最简单的获取数据的方法p381，同时注意load的目标url里如果有id，则必须在#前面加一个空格p380；对于其他方法5个（18/19点中提到），不会自动使用返回的数据更新匹配元素，因此$符号后面并没有跟着选择器；）和处理响应（使用.load()方法时，从服务器返回的HTML会被插入一个jQuery选择器中；对于其他方法，需要指定当数据以jqXHR对象的形式返回时该如何进行处理）两个过程。
14、jqXHR= jQuery XMLHttpRequest。jQuery有一个叫做jqXHR的对象，在处理从服务器返回的数据时，该对象能提供很多便利（而且jQuery允许链式调用，所以可以用多种方法来为返回的数据运行不同的代码）。
15、$.get()使用HTTP GET请求数据（也就是向服务器请求数据，常见的是获取商品信息p383）/$.post()使用HTTP POST更新服务器上的数据（也就是向服务器发送数据，常见的为提交用户表单p385）
16、.serialize()方法：选择表单中的所有信息，将它们添加到一个可以发送给服务器的字符串中，编码不能用于查询字符串的字符
17、Ajax请求有时不会抛出异常，因此需要链式调用三个方法来处理成功失败问题。.done()在成功时触发/.fail()在没有成功完成时触发/.always()请求完成时触发，无论成功与否都会触发
18、jQuery提供了4个简写方法来处理特定类型的Ajax请求（$.get()/$.post()/$.getJSON()/$.getScript()）
19、$.ajax()方法允许你更好地控制Ajax请求。jQuery的所有Ajax简写方法内部都使用了这个方法。
design by LiShu 联系我