AJAX

1.什么是AJAX？

AJAX即“Asynchronous Javascript And XML”（异步的JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互。AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。AJAX描述了一种主要使用脚本操作HTTP的Web应用架构，AJAX应用的主要特点是使用脚本操纵HTTP和Web服务器进行数据交换，不会导致页面重载。

image-20210906214959511

对AJAX的印象：

AJAX是异步的JavaScript和XML;

AJAX是一种用于创建更好更快以及交互性更强的Web应用程序的技术;

AJAX是一种独立于Web服务器软件的浏览器技术;

AJAX不是一种新的编程语言，而是一种技术;

AJAX 使用 JavaScript 在 web 浏览器与 web 服务器之间来发送和接收数据（前端后台交互）;

AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求）。

2.HTTP

​ 超文本传输协议(HyperText Transfer Protocol)规定了Web浏览器如何从Web服务器获取文档和向Web服务器提交表单内容，以及Web服务器如何响应这些请求和提交。通常，HTTP并不在脚本的控制下，只是当用户单击链接，提交表单和输入URL时才发生。但是，用JavaScript代码操纵HTTP是可行的。

  1. HTTP请求
    HTTP请求方法或动作
    正在请求的URL
    请求头集合，其中可能包含身份验证信息(可选)
    请求体(可选)
  2. HTTP响应
    一个数字和文本组成的返回码，用来显示请求的成功和失败
    一个响应头集合
    响应体

3.XMLHttpRequest

浏览器在XMLHttpRequest类上定义了它们的HTTP API,这个类的每个实例都表示一个独立的请求/响应对，并且这个对象的属性和方法允许指定请求细节和提取响应数据。

很多年前Web浏览器就开始支持XMLHttpRequest，并且其API已经到了W3C指定标准的最后阶段。同时W3C正在指定“2级XMLHttpRequest”标准草案。

XMLHttpRequest对象是AJAX的基础,XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。目前所有浏览器都支持XMLHttpRequest。

3.1.XMLHttpRequest使用方法
1.创建XMLHTTPRequest对象
var request = new XMLHttpRequest();
2.使用open方法设置和服务器的交互信息

open()
参数：
1.指定HTTP方法或动作，这个字符串不区分大小写，通常大家用大写字母来匹配HTTP协议。

取值可以为：GET/POST/HEAD/DELETE/OPTIONS/PUT

GET:用于常规请求，适用于URL完全指定请求资源，请求对服务器没有任何副作用，服务器的响应是可缓存的

POST:用于HTML表单，它在请求主体中包含额外数据，且这些数据常存储到服务器上的数据库中。相同URL的重复POST请求从服务器得到的响应可能不同，同时不应该缓存使用这个方法的请求。

2.URL,请求的主题，是相对于文档的URL。跨域请求会报错。

3.Boolean类型的值，如果值为false代表同步请求，send()方法将阻塞直到请求完成。如果这个参数是 true 或省略，请求是异步的。

request.open('get','https://api.muxiaoguo.cn/api/lishijr/')
3.设置requestHeader()

在AJAX中，如果需要像 HTML 表单那样 POST 数据，需要使用 setRequestHeader() 方法来添加 HTTP 头。

然后在 send() 方法中规定需要希望发送的数据：setRequestHeader()方法需要在open()和send()方法之间调用。

  • 语法
request.setRequestHeader(属性名称, 属性值);
  • 常用的数据格式(编码可带可不带)
发送json格式数据
request.setRequestHeader('Content-type', 'application/json; charset=utf-8');
发送表单数据
request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=utf-8');
发送纯文本(不指定Content-type时，此是默认值)
request.setRequestHeader('Content-type', 'text/plain; charset=utf-8');
发送html文本
request.setRequestHeader('Content-type', 'text/html; charset=utf-8');
4.设置发送的数据，开始和服务器端交互
send()
参数：

请求主体内容，如果没有，为null，或者省略。

request.send(); //调用send()之后,请求就会发送到服务器
5.取得响应，注册事件

发送请求后，会收到响应，收到响应后，XHR对象的以下属性会被填充上数据。

  • responseText：作为响应体返回的文本。

  • responseXML：如果响应的内容类型是"text/xml"或"application/xml"，那就是包含响应数据的 XML DOM 文档。

  • status：响应的 HTTP 状态。

  • statusText：响应的 HTTP 状态描述。

  • readyState：返回HTTP请求状态
    0 open()尚未调用 UNSENT
    1 open()已调用 OPENED
    2 接收到头信息 HEADERS_RECEIVED
    3 接收到响应主体 LOADING
    4 响应完成 DONE

  • readystatechange 请求状态改变事件
    当readyState值改变为4或服务器的响应完成时，所有的浏览器都触发该事件

6.如果请求完成，并且响完成，可以获取到响应数据
<button οnclick="getRequest()">发送请求</button>
<script>
  function getRequest() {
    // 1.创建XMLHttpRequest对象
    var request = new XMLHttpRequest();
    // 2.使用open方法设置和服务器的交互信息
    request.open('get', 'https://api.muxiaoguo.cn/api/lishijr');
    // 3.如果默认可不设置requestHeader
    // 4.发送请求
    request.send();
    // 5.如果请求完成，并且响应完成，获取到响应数据
    request.onreadystatechange = function () {
      if (request.readyState === 4 && request.status === 200) {
        // console.log(request.responseText);
        // 转换为JSON对象
        console.log(JSON.parse(request.responseText));
      }
    }
  }
</script>
7.响应解码

1.MIME类型为text/plain,text/html,text/css 文本类型时，可以使用responseText属性解析
2.MIME类型为XML文档类型时，使用responseXML属性解析
3.如果服务器发送对象，数组这样的结构化数据作为其响应，他应该传输JSON编码的字符串数据。通过responseText接受到它，可以把它传递给JSON.parse()方法来解析。

3.2.常用请求使用
  • 使用get发送有参请求
<!-- https://api.muxiaoguo.cn/api/tianqi?city=长沙&type=1 -->
<button οnclick="getParams()">获取有参get请求</button>
<script>
  function getParams() {
    var request = new XMLHttpRequest()
    // 第一种形式 拼接字符串
    // request.open('get','https://api.muxiaoguo.cn/api/tianqi?' + 'city=' + '苏州' + '&' + 'type=' + '1');
    // 第二种形式 传递序列化后的参数
    var params = {
      city: '苏州',
      type: 1
    }
    // // 参数序列化 要先引入QS序列化工具
    var qs = Qs;
    request.open('get','https://api.muxiaoguo.cn/api/tianqi?' + qs.stringify(params));
    request.send();
    console.log(qs.stringify(params));
    request.onreadystatechange = function () {
      if (request.readyState === 4 && request.status === 200) {
        console.log(request.responseText);
      }
    }
  }
</script>
  • 使用post发送无参请求
<!-- https://api.muxiaoguo.cn/api/Gushici -->
<button οnclick="postNo()">post无参</button>
<script>
  function postNo() {
    var request = new XMLHttpRequest()
    request.open('post','https://api.muxiaoguo.cn/api/Gushici');
    request.send();
    request.onreadystatechange = function () {
      if (request.readyState === 4 && request.status === 200) {
        console.log(request);
      }
    }
  }
</script>
  • 使用post发送有参请求
<!-- 使用行学天下登录接口 http://139.196.172.209:8888/user/login-->
<button οnclick="login()">登录</button>
<script>
  function login() {
    var request = new XMLHttpRequest();
    request.open('post','http://139.196.172.209:8888/user/login');
    var params = {
      password: "123321",
      username: "admin1"
    }
    // 登录接口Content-type为json格式
    request.setRequestHeader('Content-type','application/json;charset=utf-8');
    request.send(JSON.stringify(params))
    request.onreadystatechange = function () {
      if (request.readyState === 4 && request.status === 200) {
        console.log(request.responseText);
      }
    }
  }
</script>
4.AJAX的封装
//针对行学天下系统 在引入util.js之前 要引入qs
var qs = Qs;
// 替换成自己的swagger地址
var baseURL = 'http://139.196.172.209:8888';
//1.提供登录方法，提供获取token方法
// user = {username:'',password:''}
function login(user) {
  var httpRequest = new XMLHttpRequest();
  httpRequest.open('post', baseURL + '/user/login');
  // 设置请求头部
  httpRequest.setRequestHeader('Content-Type', 'application/json');
  // 最终传递的数据
  httpRequest.send(JSON.stringify(user));
  //接受响应
  httpRequest.onreadystatechange = function () {
    if (httpRequest.readyState === 4 && httpRequest.status === 200) {
      //处理响应数据
      var res = httpRequest.responseText;
      var token = JSON.parse(res).data.token;
      //保存到sessionStorage中
      sessionStorage.setItem('token', token);
    }
    if (httpRequest.readyState === 4 && httpRequest.status === 500) {
      console.log('错误：', httpRequest.responseText);
    }
  }
}
//2.myAjax对象，对象里有get方法，postForm方法，postJSON方法
var myAjax = {
  get: function (url, params, success, error) {
    var httpRequest = new XMLHttpRequest();
    httpRequest.open('get', baseURL + url + "?" + qs.stringify(params));
    // httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    //认证
    httpRequest.setRequestHeader("Authorization", sessionStorage.getItem('token'));
    //发送请求
    httpRequest.send();
    httpRequest.onreadystatechange = function () {
      if (httpRequest.readyState === 4 && httpRequest.status === 200) {
        success(JSON.parse(httpRequest.responseText));
      }
      if (httpRequest.readyState === 4 && httpRequest.status === 500) {
        error(JSON.parse(httpRequest.responseText));
      }
    }
  },
  postForm: function (url, params, success, error) {
    var httpRequest = new XMLHttpRequest();
    httpRequest.open('post', baseURL + url);
    httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    //认证
    httpRequest.setRequestHeader(" Authorization", sessionStorage.getItem('token'));
    //发送数据
    httpRequest.send(qs.stringify(params));
    httpRequest.onreadystatechange = function () {
      if (httpRequest.readyState === 4 && httpRequest.status === 200) {
        success(JSON.parse(httpRequest.responseText));
      }
      if (httpRequest.readyState === 4 && httpRequest.status === 500) {
        error(JSON.parse(httpRequest.responseText));
      }
    }
  },
  postJSON: function (url, params, success, error) {
    var httpRequest = new XMLHttpRequest();
    httpRequest.open('post', baseURL + url);
    httpRequest.setRequestHeader('Content-Type', 'application/json');
    //认证
    httpRequest.setRequestHeader(" Authorization", sessionStorage.getItem('token'));
    //发送数据
    httpRequest.send(JSON.stringify(params));
    httpRequest.onreadystatechange = function () {
      if (httpRequest.readyState === 4 && httpRequest.status === 200) {
        success(JSON.parse(httpRequest.responseText));
      }
      if (httpRequest.readyState === 4 && httpRequest.status === 500) {
        error(JSON.parse(httpRequest.responseText));
      }
    }
  }
};
# ajax # javascript # http
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

HAS2024：华为云以系统性创新加速千行万业智能化升级

avatar 华为云开发者联盟
cover

数仓的两种轻量级数据交换格式：json与jsonb

avatar 华为云开发者联盟
cover

如何使用云数据库GaussDB管理平台进行实例安装？

avatar 华为云开发者联盟