请求数据的方式

请求数据的方式

ajax

ajax是什么

ajax是前后端进行数据通信的一种方式。它是基于xmlhttprequest对象的，xmlhttprequest可以使用户向服务端进行请求数据和发送数据，并且不会阻塞用户。通过xmlhttprequest对象，用户可以在页面加载完成之后对页面进行局部更新。

ajax的作用

1、ajax是异步操作，提升了用户体验

2、ajax可以实现动态刷新，即在不刷新整个页面的情况下更新局部数据

ajax的get和post请求有几个步骤

首先说明下readystate的5个状态

• 0：初始化，XMLHttpRequest对象还没有完成初始化
• 1：载入，XMLHttpRequest对象开始发送请求
• 2：载入完成，XMLHttpRequest对象的请求发送完成
• 3：解析，XMLHttpRequest对象开始读取服务器的响应
• 4：完成，XMLHttpRequest对象读取服务器的响应完成

status的状态

status是XMLHttpRequest对象的一个属性，表示响应的http状态码

1xx：信息响应类，表示接收到请求并且继续处理
2xx：处理成功响应类，表示动作被成功接收、理解和接受
3xx：重定向响应类，为了完成指定的动作，必须接受进一步处理
4xx：客户端错误，客户请求包含语法错误或者是不能正确执行
5xx：服务端错误，服务器不能正确执行一个正确的请求

常见的http状态码：
200：成功
404：没有发现文件、查询或url
500：服务器产生内部错误

1、get请求的步骤

创建对象、设置请求参数、发送请求、监听请求成功后的状态

//1. 创建一个对象

var request = new XMLHttpRequest()

//2. 设置请求参数
// open()：该方法创建http请求
// 第一个参数是指定提交方式(post、get)
// 第二个参数是指定要提交的地址是哪
// 第三个参数是指定是异步还是同步(true表示异步，false表示同步)
request.open("GET", "filename", true);

//3. 发送请求:不需要任何参数
request.send();

//4. 监听请求成功后的状态变化
// onreadystatechange：请求状态改变的事件触发器（readyState变化时会调用此方法），一般用于指定回调函数
// readyState：请求状态readyState一改变，回调函数被调用，它有5个状态
request.onreadystatechange = function() {
   
  if (this.readyState == 4 && this.status == 200) {
   
    //request.responseText 就是服务器返回的内容了（默认是字符串）
    console.log(request.responseText