Ajax 基础

最新推荐文章于 2025-08-04 12:11:40 发布

我和夏天来了

最新推荐文章于 2025-08-04 12:11:40 发布

阅读量131

点赞数

CC 4.0 BY-SA版权

文章标签： ajax

本文链接：https://blog.csdn.net/weixin_42306249/article/details/118067130

Ajax

AJAX 就是浏览器提供的一套 API，可以通过 JavaScript 调用，从而实现通过代码控制请求与响应。实现通过 JavaScript 进行网络编程。

应用场景
• 按需获取数据
• 对用户数据校验
• 自动更新页面内容
• 提升用户体验，无刷新的体验

免费接口

原生AJAX

发送 ajax 请求步骤－XMLHttpRequest

1、创建 XMLHttpRequest 类型的对象
2、准备发送，打开与一个网址之间的连接
3、执行发送动作
4、指定 xhr 状态变化事件处理函数

// 1.创建一个 XMLHttpRequest 类型的对象 
    var xhr = null;
    // 兼容写法
    if (window.XMLHttpRequest) {
      // 标准浏览器
      xhr = new XMLHttpRequest();
    } else {
      // IE 6 浏览器
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    console.log("UNSENT",xhr.readyState); // 响应状态 0
    // 2.打开一个与网址之间的连接 
    // 设置同步或异步
  xhr.open("GET","https://jsonplaceholder.typicode.com/users",true);
  // xhr.open("GET","https://jsonplaceholder.typicode.com/users",false);
   console.log("OPENED",xhr.readyState); // 响应状态 1
  // 如果设置了同步加载，程序会卡在 send 部分
  xhr.onreadystatechange = function () {
    // 通过判断 xhr 的 readyState ，确定此次请求是否完成
    // if (this.readyState === 2) {
    //   console.log("headers received",xhr.readyState);  // 响应状态 2
    // } else if (this.readyState === 3) {
    //   console.log("loading",xhr.readyState) // 响应状态 3
    //   console.log(xhr.responseText)
    // } 
    if (this.readyState === 4) {
      console.log("请求成功")   // 响应状态 4
    }
  }
  // 3.通过连接发送一次请求
  xhr.send(null);
  // 4.指定 xhr 状态变化事件处理函数 
  
  // Ajax 后面的代码
  console.log("After Ajax");

设置请求头

此方法必须在 open() 方法和 send() 之间调用。

// 设置请求头
// xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.setRequestHeader("Content-Type","application/json");

发送请求

body：在XHR请求中要发送的数据体，根据请求头中的类型进行传参。
如果是 GET 方法，无需设置数据体，可以传 null 或者不传参。

// xhr.send(null);
// xhr.send("name=lily&age=19&class=2");
// xhr.send(`{
//   "name": "lulu",
//   "age": 18,
//   "class": 2
// }`);
xhr.send(JSON.stringify({
  "name": "harry",
  "age": 18,
  "class": 1
}));

readyState 属性

readyState 属性返回一个 XMLHttpRequest 代理当前所处的状态，
由于 readystatechange 事件是在 xhr 对象状态变化时触发（不单是在得到响应时），也就意味着这个事件会被触发多次

在这里插入图片描述
一般我们都是在 readyState 值为 4 时，执行响应的后续逻辑。

xhr.onreadystatechange = function() {
if (this.readyState === 4) {
// 后续逻辑......
}
};

如果数据结构简单，可以直接通过字符串操作（拼接）的方式处理
但是如果数据过于复杂，字符串拼接维护成本太大，就不推荐了，可以使用模版引擎或者 ES6 提供的模板字符串

XMLHttpRequest 2.0

HTML5 中对 XMLHttpRequest 类型全面升级，更易用，更强大

onload / onprogress

• xhr.onload 事件：只在请求完成时触发
• xhr.onprogress 事件：只在请求进行中触发

response 属性

• 以对象的形式表述响应体，其类型取决于 responseType 的值。你可以尝试设置responseType 的值，以便通过特定的类型请求数据。
• responseType 要在调用 open() 初始化请求之后，在调用 send() 发送请求到服务器之前设置方可生效。

var xhr = new XMLHttpRequest();
 xhr.open("GET", "http://localhost:3000/posts");
 
 xhr.responseType = "json";
 
 xhr.onload = function () {
   console.log("load",this.readyState)
 }
 xhr.onprogress = function (e) {
   console.log("progress",this.readyState)
   // 在周期性请求过程中，接收到的数据的个数
   console.log(e.loaded);
   // 接收数据的总个数
   console.log(e.total);
 }
 xhr.send(null);

同步异步

同步：一个人在同一个时刻只能做一件事情，在执行一些耗时的操作（不需要看管）不去做别的事，只是等待
异步：在执行一些耗时的操作（不需要看管）去做别的事，而不是等待

xhr.open() 方法第三个参数要求传入的是一个 boolean 值，其作用就是设置此次请求是否采用异步方式执行

默认为 true 异步，如果需要同步执行可以通过传递 false 实现

如果采用同步方式执行，则代码会卡死在 xhr.send() 这一步

建议
• 为了让这个事件可以更加可靠（一定触发），在发送请求 send() 之前，一定是先注册readystatechange
• 不论是同步或异步都能触发成功
• 了解同步模式即可，切记不要使用同步模式

XML

<?xml verson="1.0" encoding="utf-8" ?>
<booklist>
  <book>
    <name>三国演义</name>
    <author>罗贯中</author>
    <cate>古典名著</cate>
  </book>
  <book>
    <name>西游记</name>
    <author>吴承恩</author>
    <cate>古典名著</cate>
  </book>
  <book>
    <name>红楼梦</name>
    <author>曹雪芹</author>
    <cate>古典名著</cate>
  </book>
</booklist>
<!-- xml 就是一种数据格式 -->
<!-- 元数据：用来描述数据的数据 -->
<!-- 这种数据的缺点：（数据冗余太多）
1.元数据占用的数据量比较大的，不利于大量数据的网络传输
2.在其他语言中，比如 js，解析内部数据时，方法比较复杂，不方便使用 -->

JSON

服务端采用 JSON 格式返回数据，客户端按照 JSON 格式解析数据

注意
• 不管是 JSON 也好，还是 XML，只是在 AJAX 请求过程中用到，并不代表它们与 AJAX 之间有必然的联系，它们只是数据协议罢了。
• 不管服务端是采用 XML 还是采用 JSON 本质上都是将数据返回给客户端。
• 服务端应该根据响应内容的格式设置一个合理的 Content-Type。

JSON Server 本地搭建一个临时服务器

• json-server 是一个 Node 模块，运行 Express 服务器，你可以指定一个 json 文件作为api 的数据源。
• 网址

封装 AJAX库

/**
   * 参数1：{string}    method  请求方法
   * 参数2：{string}    url     请求地址
   * 参数3：{Object}    params  请求参数
   * 参数4：{function}  done    请求完成后执行的回调函数
 */ 
function ajax(method, url, params, done) {
  // 统一将方法中的字母转大写，便于后面判断
  method = method.toUpperCase();
  // 书写 IE 6 的兼容
  var xhr = window.XMLHttpRequest 
  ? new XMLHttpRequest() 
  : new ActiveXObject("Microsoft.XMLHTTP");
  // 将对象格式的参数转为 urlencoded的格式
  var pairs = [];
  for (var k in params) {
    pairs.push(k + "=" + params[k]);
  }
  var str = pairs.join("&");
  // 判断是否是 get 方法，需要更改 url 的值
  if (method === "GET") {
    url += "?" + str;
  }
  // 创建打开一个连接
  xhr.open(method, url);
  var data = null;
  // 如果是 post 方法，需要设置请求头，还有请求体
  if (method === "POST") {
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    data = str;
  }
  xhr.send(data);
  // 执行回调函数
  xhr.onreadystatechange = function () {
    if (this.readyState !== 4) return;
    // 执行外部传进来的回调函数即可
    // 需要用到响应体
    done(JSON.parse(this.responseText));
  }
}

jQuery 中的 AJAX

网址`

$.ajax()

$.ajax({
      url: "http://localhost:3000/posts",
      type: "get",
      dataType: "json",
      data: {"id": 2},
      beforeSend: function (xhr) {
        console.log("before send");
      },
      success: function (data) {
        console.log(data);
      },
      error: function (xhr) {
        console.log(xhr);
      },
      complete: function (xhr) {
        console.log(xhr);
      }
    });

$.get()

$.get("http://localhost:3000/comments", {"id": 1}, function (data) {
   console.log(data);
 })

$.post()

$.post("http://localhost:3000/comments", {"postId": 3, "content": "bad"},function (data) {
   console.log(data);
 })

$.delete()

$.ajax({
   url: "http://localhost:3000/comments/5",
   type: "delete",
   success: function (data) {
     console.log(data)
   }
 })

$.ajaxSetup()

// ajaxSetup() 方法，设置默认的参数
$.ajaxSetup({
  url: "http://localhost:3000/users",
  type: "post"
})
// 发送 ajax请求
$.ajax({
  data: {"name": "polly", "age": 17, "class": 4}
})
$.ajax({
  data: {"name": "james", "age": 18, "class": 4}
})

Axios

Axios 是目前应用最为广泛的 AJAX 封装库

地址

API

• axios(config) config为对象格式的配置选项
• axios(url, config) config 可选

常用配置项

• url 用于请求的服务器 URL，必需
• method 创建请求时使用的方法
• baseURL 传递相对 URL 前缀，将自动加在 url 前面
• headers 即将被发送的自定义请求头
• params 即将与请求一起发送的 URL 参数
• data 作为请求主体被发送的数据
• timeout 指定请求超时的毫秒数(0 表示无超时时间)
• responseType 表示服务器响应的数据类型，默认 “json”

axios({
   url: "/comments",
   method: "post",
   baseURL: "http://localhost:3000",
   headers: {
     "Content-Type": "application/json"
   },
   timeout: 1000,
   data: {
     "postId": 3,
     "content": "better"
   }
 }).then(function (res) { //// 正常请求的响应信息对象 response
   console.log(res.data)
 }).catch(function (error) { ////捕获错误
   console.log(error)
 })

全局配置默认值

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

拦截器

在请求或响应被 then 或 catch 处理前拦截它们。

// 使用拦截器，对请求进行拦截处理
axios.interceptors.request.use(function (config) {
   config.params = {
     id: 2
   }
   config.baseURL = "http://localhost:3000"
   return config
 })
 
 // 对响应进行拦截
 axios.interceptors.response.use(function (response) {
   return response.data;
 })
 // axios 方法    
 axios("/posts")
 .then(function (res) {
   console.log(res)
 })
 .catch(function (error) {
   console.log(error)
 });
 axios("/comments")
 .then(function (res) {
   console.log(res)
 })
 .catch(function (error) {
   console.log(error)
 })

##　简化－快速请求
• axios.get(url[, config])
• axios.post(url[, data[, config]])
• axios.delete(url[, config])
• axios.put(url[, data[, config]])

axios.post("http://localhost:3000/users",{
   "name": "nancy",
   "age": 19,
   "class": 2
 })
 .then(function (res) {
   console.log(res.data)
 })

跨域

同源策略

• 同源策略是浏览器的一种安全策略，所谓同源是指域名，协议，端口完全相同
• 在同源策略下，只有同源的地址才可以相互通过 AJAX 的方式请求。
• 同源或者不同源说的是两个地址之间的关系，不同源地址之间请求我们称之为跨域请求

跨域解决方案

JSONP

原理
在客户端借助 script 标签请求服务端的一个地址
地址返回一段带有某个全局函数调用的 JavaScript 脚本
在调用函数中，原本需要返回给客户端的数据通过参数传递给这个函数
这样客户端的函数中就可以通过参数得到原本服务端想要返回的数据

服务端示例演示
在这里插入图片描述
客户端示例演示

$.ajax({
   url: "https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web",
   type: "GET", //JSONP 只能发送 GET 请求
   dataType: "jsonp",
   jsonp: "cb",    //这条属性可以设置回调函数的参数名称（必须与后台接口的回调函数参数名保持一致）
   jsonpCallback: "abc", //jQ 自动分配的回调函数的名称进行重命名
   data: {"wd": "ajax"},
   success: function (data) {
     console.log(data)
   }
 })

JSONP 只能发送 GET 请求
JSONP 用的是 script 标签，与 AJAX 提供的 XMLHttpRequest 没有任何关系

CORS

• Cross Origin Resource Share，跨域资源共享

• 这种方案无需客户端作出任何变化（客户端不用改代码），只是在被请求的服务端响应的时候添加一个 Access-Control-Allow-Origin 的响应头，表示这个资源是否允许指定域请求。

• Access-Control-Allow-Origin 的值：
* 表示允许任意源访问，不安全
http://foo.com 允许指定的源访问

服务端演示
在这里插入图片描述

模板引擎

• 减少字符串拼接
• 在模板里面解析json，然后跟 html 内容拼接，性能会更好

artTemplate 简约、超快的模板引擎
中文网址

常用语法
• <% 与 %> 符号包裹起来的语句则为模板的逻辑表达式
• <%= content %>为输出表达式

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <script src="js/jquery-1.12.4.min.js"></script>
 <!-- 1、引入模板的文件 -->
 <script src="js/template-native.js"></script>
 <!-- 2、创建模板 -->
 <script type="text/html" id="tem">
   <!-- 3、添加模板中的结构 -->
   <% for (var i = 0 ; i < 5 ; i++) { %>
     <div>这是一个模板中的 div<%= i %></div>
     <div>这是一个模板中的 div<%= name %></div>
   <% } %>    
   <!-- 4、在模板中编写 js 代码解析数据 -->
 </script>
</head>
<body>
 <div class="box">

 </div>
 <script>
   // 5、将模板内的内容添加到 box 里面
   // template() 方法可以调用模板内容
   // 参数1： 调用的模板的id
   // 参数2：是一个对象型的数据，数据会传给模板，对象中的每个属性的属性名在模板中可以直接当变量名使用
   $(".box").html(template("tem", {name: "tom"}));
 </script>
</body>
</html>