module6-01-Ajax 基础
一、Ajax概述
-
在AJAX之前JS的能力有限，所以web提供的API都处于不联网状态
-
因为数据存在放服务端，无法通过已知的API获取
1.1 已知发送请求的方式
-
地址栏输入地址，回车，刷新
-
特定元素href和src属性
-
表单提交
-
问题：
-
这些操作都无法利用自己的js代码进行响应（操作）
-
1.2 需求
-
可以对服务端发送请求，并根据返回做出响应
1.3 Google Suggest
-
AJAX最早出现在2005年的google suggest
1.4 应用
-
比如搜索相关关键字
二、体验Ajax
2.1 jquery方法的应用
-
$.ajax()
-
参数：一个对象
-
① url：服务器地址
-
② type：get / post
-
③ dataType：传回来的数据
-
④ success：若成功返回什么方法
-
⑤ data：筛选的数据，用对象包裹
-
2.2 原生Ajax
（1）发送步骤
-
① 创建XMLHttpRequest类型的对象
-
new XMLHttpRequest()
-
-
② 准备发送，打开与一个网址之间的连接
-
xhr.open(type, url)
-
-
③ 执行发送动作
-
xhr.send()
-
-
④ 指定xhr状态变化事件处理函数
-
xhr.onreadyStatechange
-
函数里面this指向xhr，xhr.readyState === 4即成功
-
-
（2）xhr对象
-
标准浏览器有XMLHttpRequest()
-
IE6浏览器只有new ActiveXObject('Microsoft.XMLHttp')
-
建议使用浏览器兼容写法来判断使用哪一种
（3）open方法
-
本质上XMLHttpRequest就是JavaScript在Web平台中发送HTTP请求的手段，所以我们发出去的请求仍然是HTTP请求，也符合HTTP约定的格式
-
语法：xhr.open(method, url)
-
method有：GET、POST、PUT、DELETE
（4）send方法
-
用于发送HTTP请求
-
语法xhr.send(body)
-
body是xhr请求中要发送的数据体，根据请求头中的类型进行传参
-
如果是get方法的话，把值写在url后面，然后send一个null或者不传参
-
比如get的话是在url后面?name=harry&age=19
-
body的话是在xhr.send('name=harry&age=19')
-
（5）setRequestHeader方法
-
必须在open和send之间调用
-
语法：xhr.setRequestHeader(header, value)
-
header：一般设置“Content-Type”，传输数据类型，即服务器需要我们传送的数据类型
-
value：具体的数据类型，常用“application/x-www-form-urlencoded”或者“application/json”
（6）响应状态分析
-
xhr.readyState属性
-
xhr.onreadystatechange事件
-
每次状态改变了之后就会触发一次建议等到readyState为4的时候进行数据采集
-
2.3 同步和异步
-
在Ajax中默认是异步进行的，可以通过Ajax.open()的第三个参数设置为false来设置成同步
-
因为如果同步执行ajax，在send之前，代码都不会在ajax完成之前进行，所以监听响应状态事件要写在open和send之间
三、Ajax接受的数据
3.1 xml数据格式
-
一种数据描述手段，表现为类似于html双标签的代码
-
缺点：
-
① 元数据占用的数据量比较大，不利于大量数据的网络传输
-
② 在其他语言中，比如js，解析内部数据时，方法比较复杂，不方便使用
-
3.2 JSON
-
一种数据描述手段，类似于JS对象字面量的方式，但是还有一些差别
-
服务端采用JSON格式返回数据，客户端按照JSON格式解析数据
（1）JS对象字面量与JSON的区别
-
① JSON数据不需要存到变量中
-
② 结束时候不用添加分号
-
③ JSON数据中的属性名必须加引号
（2）JSON对象
-
在JS中JS是一个内置对象，里面主要有两个方法stringify、parse
-
① JSON.stringify()：
-
把数据转换为JSON格式的字符串
-
-
② JSON.parse()
-
把JSON格式的字符串转换为JS对象
-
（3）注意
-
不管是JSON也好还是XML，只是在AJAX请求过程中用到，并不代表他们与AJAX之间有必然的练习，它们只是数据协议
-
不管服务端采用的是XML还是JSON，本质上都是将数据返回给客户端
-
服务端应该根据响应内容的格式设置一个合理的Content-Type
3.3 json-server服务
-
通过`npm -g install json-server可以下载
-
通过
json-server --watch db.json可以运行 -
运行成功会开辟一个端口来提供服务使用
四、封装Ajax函数
① 确定传入参数
② 兼容IE6写法
③ 根据method判断url是否要拼接data，然后open
④ 如果是post则添加请求头，然后send
