前端之路（AJAX篇）

最新推荐文章于 2023-07-17 11:32:00 发布

鹤林小帝

最新推荐文章于 2023-07-17 11:32:00 发布

阅读量350

点赞数 3

本文链接：https://blog.csdn.net/weixin_44137393/article/details/86592322

版权

本文深入探讨了前端开发中的AJAX技术，包括XMLHttpRequest对象的使用，GET和POST请求的发送，以及如何获取响应。此外，文章介绍了JSON数据在数据交互中的重要性，以及兼容性处理和封装AJAX工具函数的方法。对于接口化开发，讲解了模板引擎如artTemplate的使用。同时，文章详细阐述了同源策略及其限制，以及跨域的解决方案，如JSONP和CORS，分析了两者的优缺点和使用场景。

摘要由CSDN通过智能技术生成

AJAX

即 Asynchronous [e'sɪŋkrənəs] Javascript And XML， AJAX 不是一门的新的语言，而是对现有技术的综合利用。本质是在HTTP协议的基础上以异步的方式与服务器进行通信。

同步与异步

同步和异步概念：

同步: 指的就是事情要一件一件做。等做完前一件才能做后一件任务

异步: 不受当前任务的影响，两件事情同时进行，做一件事情时，不影响另一件事情的进行。

编程中：异步程序代码执行时不会阻塞其它程序代码执行,从而提升整体执行效率。

网页异步应用：

验证你的用户名是否已经存在（一边输入，一边获取你的信息，和后台比对）。
百度搜索提示，及相关内容展示（一边输入，一边找出了你可能要的内容）。
新浪微博评论（异步加载）。

XMLHttpRequest可以以异步方式的请求数据处理程序, 可实现对网页的部分更新，而不是刷新整个页面

XMLHttpRequest对象

浏览器内建对象，用于与服务器通信(交换数据) ，由此我们便可实现对网页的部分更新，而不是刷新整个页面。这个请求是异步的，即在往服务器发送请求时，并不会阻碍程序的运行，浏览器会继续渲染后续的结构。

请求由客户端发起，其规范格式为：请求行、请求头、请求主体。

发送get请求

XMLHttpRequest以异步的方式发送HTTP请求，因此在发送请求时，一样需要遵循HTTP协议。

使用XMLHttpRequest发送get请求的步骤

//1. 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();

//2. 设置请求行
// 第一个参数:请求方式  get/post
// 第二个参数:请求的地址 需要在url后面拼上参数列表
// 第三个参数: 是否异步请求,默认是true  true就是异步,false是同步
xhr.open("get", "01.php?name=haha");

//3. 设置请求头(get不用设置)
//请求头中可以设置Content-Type,用以说明请求主体的内容是如何编码
//get请求时没有请求体,无需设置请求头
xhr.setRequestHeader()

//4. 设置请求体
//get请求的请求体为空,因为参数列表拼接到url后面了
xhr.send(null);

注意点 :

get请求,设置请求行时,需要把参数列表拼接到url后面
get请求不用设置请求头, 不用说明请求主体的编码方式
get请求的请求体为null

发送post请求

var xhr = new XMLHttpRequest();

// 1. 设置请求行 post请求的参数列表在请求体
xhr.open("post", "02.php");

// 2. 设置请求头, post 请求必须要设置 content-type, 标记请求体内容的解析方式, 不然后端无法解析获取数据
xhr.setRequestHeader( "content-type", "application/x-www-form-urlencoded" );
//在请求发送过程中会对数据进行序列化处理，以键值对形式？key1=value1&key2=value2的方式发送到服务器

// 3. 设置请求体
xhr.send( "name=zs&age=18" );

注意点 :

post请求, 设置请求行时, 不拼接参数列表
post必须设置请求头中的content-type为application/x-www-form-urlencoded, 标记请求体解析方式
post 请求需要将参数列表设置到请求体中

获取响应 readyState

readyState:记录了XMLHttpRequest对象的当前状态

readyState有五种可能的值：
xhr.readyState = 0时，UNSENT open尚未调用
xhr.readyState = 1时，OPENED open已调用
xhr.readyState = 2时，HEADERS_RECEIVED 接收到响应头信息
xhr.readyState = 3时，LOADING 接收到响应主体
xhr.readyState = 4时，DONE 响应完成

不用记忆状态，只需要了解有状态变化这个概念

HTTP响应分为3个部分，状态行、响应头、响应体。

//给xhr注册一个onreadystatechange事件，当xhr的状态发生状态发生改变时，会触发这个事件。
xhr.onreadystatechange = function () {
  
  if(xhr.readyState == 4){
    
    //1. 获取状态行
    console.log("状态行:"+xhr.status);
    
    //2. 获取响应头
    console.log("所有的响应头:"+xhr.getAllResponseHeaders());
    console.log("指定响应头:"+xhr.getResponseHeader("content-type"));
    
    //3. 获取响应体
    console.log(xhr.responseText);
    
  }
  
}

数据交互

浏览器端只是负责用户的交互和数据的收集以及展示，真正的数据都是存储在服务器端的。

我们现在通过ajax的确可以返回一些简单的数据（一个字符串）, 
但是在实际开发过程中，肯定会会设计到大量的复杂类型的数据传输，
比如数组、对象等，但是每个编程语言的语法都不一样。

因此我们会采用通过的数据交换格式（XML、JSON）来进行数据的交互。

XML(了解即可)

什么是XML

XML 指可扩展标记语言（EXtensible Markup Language）
XML 是一种标记语言，很类似 HTML
XML 的设计宗旨是传输数据，而非显示数据
XML 标签没有被预定义。您需要自行定义标签。

语法规范

第一行必须是版本信息
必须有一个根元素（有且仅有一个）
标签不可有空格、不可以数字或.开头、大小写敏感
不可交叉嵌套，都是双标签，如果是单标签，必须闭合
属性双引号（浏览器自动修正成双引号了）
特殊符号要使用实体
注释和HTML一样

<?xml version="1.0" encoding="utf-8" ?>
<students>
    <student>
        <name>张三</name>
        <age>18</age>
        <gender>男</gender>
        <desc>路人甲</desc>
    </student>
    <student>
        <name>李四</name>
        <age>20</age>
        <gender>男</gender>
        <desc>路人乙</desc>
    </student>
</students>