Ajax入门（二）

一、Ajax概述（前端中局部会用，用户名的验证什么的）

我们只希望获取页面的局部数据，而不是整页刷新，这个时候就需要用ajax来实现功能了（不刷新页面与后台交互数据）。

ajax能实现按需加载而不是整页刷新。

（点击获取数据的按钮时，通过局部按需加载方式，向后台发送请求，后台返回一个字符串。这种效果就是ajax实现的）

目前主流的数据格式是json(JavaScript对象表示法)

ajax的优缺点：

优点：按需获取数据，提升系统性能。（要什么拿什么）

缺点：异步获取数据，不利于搜索引擎优化。

二、Ajax原理

我们之前是如何向服务器发送请求的？

1.在浏览器中直接输入网址。

2.a标签实现的页面跳转。

3.表单提交。

4.postman模拟http请求。

Ajax的原理是通过XMLhttpRequest对象向服务器发送请求。

后台程序：

router.get('/', async (ctx) => {

    await ctx.render('index')  //响应模板

})

router.get('/data', async (ctx) => {

    await ctx.render('hello') //响应数据

index.html中点击按钮之后向服务器发送请求，获取hello数据。

let xhr = new XMLhttpRequest();

xhr.open('get','/data')    //open方法可以用来规定请求的类型。

xhr.send();                    //发送请求

获取响应：（下面的事件）//（可以监听一个属性readystate，如果这个属性readystate变化，就会触发这个事件，readystate的值可以理解为是数字，0：请求未初始化，1：服务器连接已建立，2：请求已接收，3：请求处理中，4：请求已完成，且响应已就绪）

xhr.onreadystatechange = function(){

if（xhr.readystate === 4 && xhr.status ==200）{

alert(xhr.responseText)

}

}

用回调函数的方式，promise可以实现异步获取数据，ajax函数的封装next（）

了解XML以上的概念就行。