导航
导航
文章目录
  1. Ajax简介
    1. 1、优点
    2. 2、应用场景
  2. 创建ajax的步骤
    1. 1、创建XMLHttpRequest对象
    2. 2、准备请求
    3. 3、发送请求
    4. 4、处理响应
  3. 封装例子

Ajax学习笔记

在上一个外包项目中,因为用到了前后端分离的思路,所以都要通过Ajax来请求数据然后把数据渲染到页面上,一开始想过直接引用Jquery,但感觉就使用Jquery的Ajax函数,有点太浪费,所以就自己撸了一个Ajax函数。本文由浅入深,一步一步带你封装属于自己的Ajax库。

Ajax简介

  • Asynchronous Javascript And XML (异步的JavaScript和XML)
  • 它并不是一种单一的技术,而是有机利用一系列交互式网页应用相关的技术所形成的结合体
  • Ajax是一种用于创建快速动态网页的技术。在前台与后台进行数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,实现局部更新。

1、优点

  • 页面无刷新,用户体验好。
  • 异步通信,更加快的响应能力。
  • 减少冗余请求,减轻了服务器负担。
  • 基于标准化的并被广泛支持的技术

2、应用场景

  • 场景 1. 数据验证
  • 场景 2. 按需取数据
  • 场景 3. 自动更新页面

说了这么多,接下来来点干货。

创建ajax的步骤

Ajax的原理简单来说通过XMLHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。原生创建ajax可分为以下四步

1、创建XMLHttpRequest对象

1
2
3
4
5
6
7
8
9
function createRequest (){
if (window.XMLHttpRequest) {
//IE6以上
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}

2、准备请求

1
xhr.open(method,url,async);
  • 第一个参数表示请求类型的字符串,其值可以是GET或者POST
    GET请求:

    1
    xhr.open("GET",demo.php?name=hzzly&age=21,true);

    POST请求:

    1
    xhr.open("POST",demo.php,true);
  • 第二个参数是要作为请求发送目标的URL。

  • 第三个参数是true或false,表示请求是以异步还是同步的模式发出。(默认为true,一般不建议为false)

3、发送请求

1
xhr.send();
  • GET请求:

    1
    2
    xhr.open("GET",demo.php?name=hzzly&age=21,true);
    xhr.send();
  • POST请求

    1
    2
    3
    xhr.open("POST",demo.php,true);
    xhr.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
    xhr.send(param)

4、处理响应

1
2
3
4
5
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(xhr.responseText);
}
}
  • onreadystatechange:当处理过程发生变化的时候执行下面的函数
  • readyState:ajax处理过程
    • 0:请求未初始化(还没有调用 open()
    • 1:请求已经建立,但是还没有发送(还没有调用 send()
    • 2:请求已发送,正在处理中(通常现在可以从响应中获取内容头)
    • 3:请求在处理中;通常响应中已有部分数据可用了,但是服务器还没有完成响应的生成
    • 4:响应已完成;您可以获取并使用服务器的响应了
  • status属性:
    • 200: “OK”
    • 404: 未找到页面
  • responseText:获得字符串形式的响应数据,可以用JSON.parse(xhr.responseText)转化为JSON对象

封装例子

1.get请求函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/**
* 一个简单的get请求
* @param {String} url 请求地址,文件名
* @param {Function} fnSucc 请求成功时执行的函数
* @param {Function} fnFaild 请求失败执行的函数
*/
function Get(url, fnSucc, fnFaild) {
//1.创建ajax对象
var xhr = null;
/**
* 此处必须需要使用window.的方式,表示为window对象的一个属性.不存在时值为undefined.
* 进入else若直接使用XMLHttpRequest在不支持的情况下会报错
**/
if (window.XMLHttpRequest) {
//IE6以上
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.连接服务器
//open(方法,url,是否异步)
xhr.open("GET", url, true);
//3.发送请求
xhr.send();
//4.接收返回
//OnRedayStateChange事件
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
//alert("成功" + xhr.responseText);
fnSucc(xhr.responseText);
} else {
//alert("服务器响应失败!");
if (fnFaild) {
fnFaild();
}
}
}
};
}

2.get与post结合的请求函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
/**
* AJAX函数封装
* @param {string} url 请求地址(必须)
* @param {object} options 发送请求的选项参数
* @config {string} [options.type] 请求发送的类型。默认为GET。
* @config {Object} [options.data] 需要发送的数据。
* @config {Function} [options.onsuccess] 请求成功时触发。(必须)
* @config {Function} [options.onfail] 请求失败时触发。
*/
function AJAX(url, options) {
//1.创建ajax对象
var xhr = null;
/**
* 此处必须需要使用window.的方式,表示为window对象的一个属性.不存在时值为undefined,进入else
* 若直接使用XMLHttpRequest,在不支持的情况下会报错
**/
if (window.XMLHttpRequest) {
//IE6以上
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.连接服务器
//open(方法,url,是否异步)
var param = ""; //请求参数。
//只有data存在,且为对象使才执行
var data = options.data ? options.data : -1; //缓存data
if (typeof (data) === "object") {
for (var key in data) { //请求参数拼接
if (data.hasOwnProperty(key)) {
param += `${key}=${data[key]}&`;
}
}
param.replace(/&$/, "");
} else {
param = "timestamp=" + new Date().getTime();
}
//3.发送请求
var type = options.type ? options.type.toUpperCase() : "GET";
if (type === "GET") {
xhr.open("GET", `${url}?${param}`, true);
xhr.send();
} else {
xhr.open("POST", url, true);
xhr.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xhr.send(param);
}
//4.接收返回
//OnRedayStateChange事件
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
//请求成功。形参为获取到的字符串形式的响应数据
options.onsuccess(xhr.responseText);
} else {
//先判断是否存在请求失败函数
//存在时,形参为XMLHttpRequest对象,便于进行错误进行处理
if (options.onfail) {
options.onfail(xhr);
}
}
}
};
}
支持一下
谢谢你请我吃糖果