写点什么

Ajax 学习笔记

作者:lxmoe
  • 2022-11-20
    辽宁
  • 本文字数:1264 字

    阅读完需:约 4 分钟

Ajax 的初识理解

Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)是浏览器提供的一套方法,实现页面无刷新即可更新数据,提高用户浏览网站应用的体验


  • Ajax 技术需要运行在网站环境中才能生效。

Ajax 应用场景:

  1. 页面上拉加载更多数据

  2. 列表数据无刷新分页

  3. 表单项离开焦点数据验证

  4. 搜索框提示文字下拉列表......

Ajax 运行原理:


  • Ajax 相对于浏览器发送请求和接收响应的代理人,实现在不影响用户浏览页面的情况下,局部更新页面数据,从而提高用户体验。



01-Ajax 原生使用

Ajax 的实现步骤(简述):

  1. 创建 Ajax 对象:


var xhr = new XMLHttpRequest();
复制代码


  1. 确定 Ajax 的请求方式和请求地址:


xhr.open('get/post', 'url');
复制代码


  1. 设置请求头


xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");  // get方法请求头默认为此,可以不写
复制代码


  1. 发送请求:


xhr.send();  // post方法数据需要放于此,get方法则不用,两者具体区别记载于后文
复制代码


  1. 获取服务器端给与客户端的响应数据:


xhr.onload = function {  console.log(xhr.responseText);}
复制代码



Ajax 的返回状态:

  • XMLHttpRequest.readyState有五种状态,代表着不同的含义:

值 状态 描述

0 UNSENT 代理被创建,但尚未调用 open()方法

1 OPENED open()方法已经被调用

2 HEADERS_RECEIVED send()方法已经被调用,并且头部和状态已经可获得

3 LOADING 下载中;responseText 属性已经包含部分数据

4 DONE 下载操作已完成


Ajax 的参数传递:

1.get方式请求参数

  • 语法:


xhr.open('get', `${url}?${data}`);xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");  // 可写可不写,默认为此xhr.send();
复制代码

2.post方式请求参数

  • 语法:


xhr.open('post', `${url}`);xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");  // 必须写xhr.send(`${data}`);
复制代码



Ajax 常用请求头:

  1. 字符串形式请求头:


xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
复制代码


参数形式:


data="username=cxy&age=18";
复制代码


  1. JSON 形式请求头:


xhr.setRequestHeader("Content-type": "application/json");
复制代码


参数形式:


data={  username: cxy,  age: 18};
复制代码



Ajax 的数据格式:

  • 格式转换:


/* 将JSON字符串转换成JSON对象 */JSON.parse();/* 将JSON对象转换成JSON字符串 */JSON.stringify();
复制代码


  • 在真实项目中,服务器端大多数情况下以 JSON 对象作为响应数据的格式;

  • 客户端拿到响应数据时,要将 JSON 数据和 HTML 字符串进行拼接,然后将拼接结果展示在页面中;

  • http 请求与响应的过程中,无论是请求参数还是响应内容,如果是对象类型,最终都会被转化为对象字符串进行传输。

发布于: 刚刚阅读数: 4
用户头像

lxmoe

关注

还未添加个人签名 2022-08-06 加入

还未添加个人简介

评论

发布
暂无评论
Ajax学习笔记_前端_lxmoe_InfoQ写作社区