Ajax学习-01

AJAX 概念介绍

“JavaScript 对我们而言能力有限”，我们目前所了解到的 Web 所提供的 API 都只停留在“单机游戏”的阶段。

例如：

• 无法在实现用户登录功能时，当用户输入邮箱地址显示用户对应的头像

• 无法在实现用户注册功能时，当用户输入邮箱或者用户名就提示是否存在

• 无法在实现留言板功能时，实时看到最新的用户留言

总结：

• 过去写的页面都是模拟的数据，刷新后页面数据还原
• 学习完 AJAX 可以做真实的网络应用，可以和服务器交互

什么是 AJAX

• AJAX (Asynchronous Javascript And XML) 异步的 JavaScript 和 XML
• AJAX 就是浏览器提供的一套 API
• 可以通过 JavaScript 调用 AJAX 提供的 API，从服务器获取数据，并把数据动态渲染到网页上
• AJAX 中的核心对象是 XMLHttpRequest
• 至于 XML：最早在客户端与服务端之间传递数据时所采用的数据格式就是 XML
  

应用场景

• 按需获取数据
  • 百度地图加载
  • 留言及评论等功能
• 对用户数据校验
  • 注册时，验证用户名或邮箱等是否已经被注册
• 自动更新页面内容
  • 邮件提醒、消息提醒
• 提升用户体验，无刷新的体验

请求响应

请求响应过程
我们在浏览器地址栏中输入 www.baidu.com 是如何看到百度的？
我们在浏览器地址栏输入 http://192.168.1.1:8080/，是如何看到我的计算机中的网页的？

1. 用户在浏览器地址栏输入我们需要访问的网站网址（URL）
2. 浏览器向服务器发送请求(HTTP 请求)，告知服务器要获取的内容(请求)
3. 服务端处理浏览器发送的请求，并把处理的结果返回(HTTP 响应)给浏览器(响应)
4. 浏览器将服务端返回的结果呈现到界面上
5. AJAX 请求服务器的过程跟上面类似，只不过发送请求接收响应都是由 XHR 对象完成

常用的两种请求方式
向服务器发请求，最常用的两种方式：

• GET方式：
  • 浏览器地址栏输入URL，按回车
  • 点击a标签，跳转到另一个页面
  • method属性等于get的表单提交（注意，如果表单没有指定method，则method的值默认为get）
• POST方式：
  • method属性等于post的表单提交

AJAX 使用步骤

AJAX API 中核心提供的是一个 XMLHttpRequest 类型，所有的 AJAX 操作都需要使用到这个类型。
使用 AJAX 的过程可以类比平常我们访问网页过程,使用Ajax的时候必须用到服务器才能有效果

// 1. 创建一个 XMLHttpRequest 类型的对象 —— 相当于打开了一个浏览器
var xhr = new XMLHttpRequest();
// 2. 打开与一个网址之间的连接 —— 相当于在地址栏输入访问地址
xhr.open('GET', 'http://127.0.0.1:8080/time');
// 3. 通过连接发送一次请求 —— 相当于回车或者点击访问发送请求
xhr.send(null);
// 4. 当接收到数据的时候
xhr.onload = function () {
  // 通过 xhr 的 responseText 获取到响应的响应体
  console.log(this.responseText)
};

AJAX 发送 get 请求

• get 请求
  • get 字面意思获取，一般用户从服务器获取数据
• 代码实现

// 1. 创建一个 xhr 对象
var xhr = new XMLHttpRequest();
// 2. 设置请求的方式和路径
xhr.open('GET', 'http://127.0.0.1:8080/time');
// 3. 发送请求
xhr.send(null);
// 4. 注册事件
xhr.onload = function () {
    // 通过 xhr 的 responseText 获取到响应的响应体
  	console.log(this.responseText)
}

在发送Ajax请求的时候，比如A、B两个网页文件或接口地址都属于同一个服务器上的资源，则请求URL可以省略前面的IP和端口，直接用/time 即可。浏览器在解释 /time 的时候，会自动补充完整的URL。

// 1. 创建一个 xhr 对象
var xhr = new XMLHttpRequest();
// 2. 设置请求的方式和路径

//  注意，下面的URL接口就是简化后的写法。
xhr.open('GET', '/time');

// 3. 发送请求
xhr.send(null);
// 4. 注册事件
xhr.onload = function () {
    // 通过 xhr 的 responseText 获取到响应的响应体
  	console.log(this.responseText)
}

get 请求传参

URL 携带查询字符串

• 格式：http://www.baidu.com/s?q=word&sug=5017
• 查询字符串(querystring)：
  • URL中问号后面携带的就是 get 请求传参的数据，叫做查询字符串
  • 格式：q=word&sug=5017
• 浏览器限制 URL 的长度 （不同浏览器限制的大小不同）
  • 查询字符串只适合传输少量数据
• 代码演示：

// 1. 创建一个 xhr 对象
var xhr = new XMLHttpRequest();
// 2. 设置请求的方式和路径
xhr.open('GET', '/query-get?id=2&name=zhangsan&age=23');
// 3. 发送请求
xhr.send(null);
// 4. 注册事件
xhr.onload = function () {
    // 通过 xhr 的 responseText 获取到响应的响应体
  	console.log(this.responseText)
}

缓存问题

缓存问题指的是：两次或多次 AJAX GET 请求同一个 URL ，IE浏览器在第二次请求的时候，并不会从新向服务器发请求，而是直接使用上次请求的结果。

var xhr = new XMLHttpRequest()
xhr.open('GET', '/time')
xhr.send(null)
xhr.onload = function () {
  console.log(this.responseText)
  // => 每次得到的结果都是相同的
}

解决方案

让每次请求的URL都不同
不同的查询字符串会被浏览器认为是不同的地址，浏览器会忽略客户端缓存。

// 创建一个xhr对象
var xhr = new XMLHttpRequest()
// 设置请求的方式和路径
xhr.open('GET', '/time?t=' + Date.now())
// 发送请求
xhr.send(null)
// 注册事件
xhr.onload = function () {
	// 通过 xhr 的 responseText 获取到响应的响应体
  console.log(this.responseText)
}

AJAX 发送 post 请求

post 把传递的数据封装在 HTTP 请求数据中，以键/值的形式出现，可以传输大量数据，对数据量没有限制，也不会显示在 URL 中。

• 字面意思是把数据提交给服务器
• post 请求，必须调用setRequestHeader方法设置 Content-Type
  • 请求头中的 Content-Type，告诉服务器发送过去的数据的格式
• 发送的数据
  • send方法的参数就是post方式发送给服务器的数据。（和get不同）
• 代码演示

var xhr = new XMLHttpRequest()
// open 方法的第一个参数的作用就是设置请求的 method
xhr.open('POST', '/query-post')
// 设置 Content-Type 为 application/x-www-form-urlencoded，这行代码代表表单数据类型的提交
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 需要提交到服务端的数据可以通过 send 方法的参数传递
// 格式：name=zhangsan&age=18
xhr.send('name=zhangsan&age=18')
xhr.onload = function () {
    console.log(this.responseText)
}

Ajax的get 和 post方式请求的区别

• GET
  • 字面意思：获取内容
  • 浏览器对 URL 的长度有限制，只能在 url 上携带少量的数据
  • 在IE浏览器中会有缓存
• POST
  • 字面意思：提交数据
  • 适合发送大量数据
  • 可以实现上传文件
  • post请求不会缓存

onload 和 onreadystatechange

• onload 是 HTML5 以后新增的方便获取响应的事件
• 过去获取浏览器返回内容的时候使用的是 onreadystatechange

在通过Ajax向服务器发送请求的过程中，XMLHttpRequest对象的状态会发生多次变化。由于 readystatechange 事件是在 xhr 对象状态变化时触发（不单是在得到响应时），也就意味着这个事件会被触发多次。测试，看onreadystatechange事件是否触发了多次：

var xhr = new XMLHttpRequest()
// open 方法的第一个参数的作用就是设置请求的 method
xhr.open('POST', '/query-post')
// 设置 Content-Type 为 application/x-www-form-urlencoded，这行代码代表表单数据类型的提交
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 需要提交到服务端的数据可以通过 send 方法的参数传递
// 格式：name=zhangsan&age=18
xhr.send('name=zhangsan&age=18')
// 更改事件为onreadystatechange
xhr.onreadystatechange = function () {
    console.log('事件被触发了')
}

了解了onreadystatechange事件，我们不禁会思考XMLHttpRequest对象到底有哪些状态呢？又用什么表示XMLHttpRequest对象的状态呢？
xhr 对象的状态

• 有5种
• 用readyState属性表示，详见下表

readyState	状态描述	说明
0	UNSENT	代理（XHR）被创建，但尚未调用 open() 方法。
1	OPENED	open() 方法已经被调用，建立了连接。
2	HEADERS_RECEIVED	send() 方法已经被调用，并且已经可以获取状态行和响应头。
3	LOADING	响应体下载中， responseText 属性可能已经包含部分数据。
4	DONE	响应体下载完成，可以直接使用 responseText。

• 代码演示xhr对象的几种状态

var xhr = new XMLHttpRequest()；
// 创建对象后，先打印一次XHR对象的状态，此时状态值为0
console.log(xhr.readyState);

// 添加事件onreadystatechange，每当XHR对象的状态发生变化的时候，就会触发这个事件
// 比如
// xhr对象的状态从0-->1，会触发下面的事件
// xhr对象的状态从1-->2，会触发下面的事件
// xhr对象的状态从2-->3，会触发下面的事件
// xhr对象的状态从3-->4，会触发下面的事件
xhr.onreadystatechange = function () {
    console.log(this.readyState); 
    // 输出1/2/3/4
}

// open 方法的第一个参数的作用就是设置请求的 method
xhr.open('POST', '/query-post')
// 设置 Content-Type 为 application/x-www-form-urlencoded，这行代码不用死记硬背，去复制即可
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 需要提交到服务端的数据可以通过 send 方法的参数传递
// 格式：name=zhangsan&age=18
xhr.send('name=zhangsan&age=18')

• 时间轴
  下面的图展示了一次Ajax请求，从开始到完整的接收到服务器返回的数据的过程。

• 通过理解每一个状态值的含义得出一个结论：一般我们都是在 readyState 值为 4 时，执行响应的后续逻辑。

xhr.onreadystatechange = function () {
  if (this.readyState === 4) {
    // 后续逻辑......
  }
}

// 或者写成下面的形式
xhr.onreadystatechange = function () {
  if (this.readyState !== 4) return;
  // 后续逻辑......
}

服务器返回的数据量如果非常大，会分块返回，每次返回一部分，当返回的数据发生变化时，也会触发onreadystatechange事件，并且此时的readyState值为3