Ajax异步请求

没错就是这

已于 2022-08-29 16:48:53 修改

阅读量502

点赞数 1

分类专栏：前端知识 JS 文章标签： ajax javascript 前端

于 2022-08-29 16:48:23 首次发布

本文链接：https://blog.csdn.net/m0_48839439/article/details/126548836

版权

前端知识同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

15 篇文章 0 订阅

订阅专栏

全称为Asynchronous Javascript And XML。是指一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互。与Web服务器之间使用异步数据传输（HTTP请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。

一、具体性质：

Ajax是异步的javascript和xml；

创建更好更快的交互性强的web应用程序技术；

是独立于web服务器软件的浏览器技术；

使用javascript在web浏览器与web浏览器之间来发送和接收数据，让前后端交互；

使用HTTP请求使web服务器之间使用异步数据传输。

二、HTTP

使用javascript操纵HTTP：

1) HTTP请求

HTTP请求方法或动作

正在请求的URL

请求头集合，其中可能包含身份验证信息(可选)

请求体(可选)

2) HTTP响应

一个数字和文本组成的返回码，用来显示请求的成功和失败

一个响应头集合

响应体

三、XMLHttpRequest

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

1、XMLHttpRequest的使用方法：

（1）创建XMLHttpRequest对象

var request = new XMLHttpRequest();

（2）使用open方法open()设置和服务器的交互信息

open()参数为：指定HTTP方法或动作、URL、Boolean类型的值。

指定HTTP方法或动作值可为：GET/POST/HEAD/DELETE/OPTIONS/PUT

GET	用于常规请求，适用于URL完全指定请求资源，请求对服务器没有任何副作用，服务器的响应是可缓存的
POST	用于HTML表单，它在请求主体中包含额外数据，且这些数据常存储到服务器上的数据库中。相同URL的重复POST请求从服务器得到的响应可能不同，同时不应该缓存使用这个方法的请求。

URL：是请求的主体，是相对于文档的url，跨域请求会出错。

布尔类型的值：true（或者是此参数省略不写）代表异步请求，false代表同步请求。

request.open('get','https://api.muxiaoguo.cn/api/lishijr?api_key=0b0c3893a95d6987')

（3）设置requestHeader()

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

然后在 send() 方法中规定需要希望发送的数据：setRequestHeader()方法需要在on()和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）发送请求后，获得响应，注册事件

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）如果请求完成，并且响完成，可以获取到响应数据

<script> 
//判断响应是否结束已经完成后获取响应数据
request.onreadystatechange = function () {
      if (request.readyState === 4 && request.status === 200) {
        // 转换为JSON对象
        console.log(JSON.parse(request.responseText));
      }
    }
</script>

所有的步骤一起例子可如下：

<body>
<button onclick="getRequest()">发送请求</button>
<script>
  function getRequest() {
    // 1.创建XMLHttpRequest对象
    var request = new XMLHttpRequest();
    // 2.使用open方法设置和服务器的交互信息
    request.open('get', 'https://api.muxiaoguo.cn/api/lishijr?api_key=0b0c3893a95d6987');
    // 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>
</body>

四、AJAX封装

//封装自己的myAjax，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));
      }
    }
  }
};

没错就是这

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax异步请求

全称为Asynchronous Javascript And XML。是指一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互。与Web服务器之间使用异步数据传输（HTTP请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。......
复制链接

扫一扫