Ajax（简述）

Ajax

Ajax简介

• Ajax 全称为：“Asynchronous JavaScript and XML”(异步JavaScript 和 XML)

  使用Ajax，我们可以无刷新状态更新页面，并且实现异步提交，提交了用户体验。

• Ajax其实质是利用浏览器提供的一个特殊的一个特殊的对象（XMLHttpRequest）异步地向服务器发送请求

• 服务器返回部分数据，浏览器让你去利用这些数据对页面做部分的更新，整个过程，页面无刷新，不打断用户的操作。

同步和异步

同步

• 同步方法表明调用一旦开始，调用者必须等待方法执行完成，才能继续执行后续方法。

异步

• 不同步，各干各的
• 同步方法表明，方法一旦开始，立即返回，调用者无需等待其中方法执行完成就可以继续执行后续方法。

同步请求和异步请求

同步请求

• 发起表单的需求，是同步的，必须等待服务器响应回来结果后，才可以继续向后执行，响应回来的内容，会将整个网页内容覆盖掉。

异步请求

• 异步的向服务器发送请求，服务器返回内容，可以实现对网页做局部更新

• 异步请求如何实现？

  在浏览器中提供XMLHttpReques 对象 ， 可以使用此对象向服务器代理发送请求，这样的请求是异步的，服务器响应方式与之没有任何区别，响应的内容不会覆盖整个网页。响应内容会被XMLHttpReques 对象接收 ，就可以在js中局部更新网页内容

• 使用XMLHttpRequest对象向另一个服务发送请求是可以发送过去的，但是浏览器不允许在当前服务页面接收另一个服务器响应的内容。

创建XMLHttpRequest对象

• XMLHttpRequest对象：发送请求到服务器并获得返回结果
• 所有现代浏览器 都内建了XMLHttpReqest对象，通过一行简单的JavaScript代码，我们就可以创建XMLHttpRequest对象
• new XMLHttpRequest（）；

XMLHttpRequest

• JavaScript对象XMLHttpRequest是整个Ajax技术的核心，它提供了异步发送请求的能力
• 常用方法

• 常用属性
  • onreadystatechange：事件，指定回调函数
  • readystate：XMLHttpRequest的状态信息
  • responseText：获得响应的文本内容

Get方式

• xmlhttp.open("GET","testServlet?name="+userName,true)
• xmlhttp.send()；

axios框架

• 下载axios文件https://unpkg.com/axios/dist/axios.min.js

• 导入项目

• get请求

  axios.get(‘/user?ID=12345’).then(function (response) {
  console.log(response);
  })

• post请求

  axios.post(‘/user’, “name1=value1&name2=value2”)
  .then(function (response) {
  console.log(response);
  })

• 响应结果格式

  axios.get(‘/user/12345’)

  ​ .then(function(response) {
  console.log(response.data);//后端返回数据,默认为json格式
  console.log(response.status);
  console.log(response.statusText);
  console.log(response.headers);
  console.log(response.config);
  });

JSON

• JSON(JavaScript Object Notation)是一种轻量级的数据交换格式

  • 数据在键值对中
  • 数据由逗号分隔
  • 大括号保存对象
  • 方括号保存数组

  语法：

  JSON 键值对是用来保存JS对象的一种方式，和JS对象的写法也大同小异，键/值对组合中的键名写在前面并用双引号" " 包裹，使用冒号：分隔，然后紧接着值：

  {"firstName": "John"}
{“name”:”value”,”sex”:”男”}

• 向服务器放松cookie数据设置

  axios.defaults.withCredentials = true；