Ajax原理与封装详解

时间:2022-05-01 07:11:24

Ajax大家每天都在用,jquery库对Ajax的封装也很完善、很好用,下面我们看一下他的内部原理,并手动封装一个自己的Ajax库。

更多有关ajax封装及数据处理,请参看上海尚学堂《Ajax中replace+Jq封装的ajax》、《ajax+json数据处理

一、原理

原生Ajax的发送需要四步:
1) 创建Ajax对象: XMLHttpRequest
2) 设置请求参数: open(请求参数[get/post],url地址, 是否异步[true/false] )
3) 设置回调函数: onreadystateChange 用于处理返回的数据
4) 发送请求: send()

//TODO step1: 创建ajax对象
var xhr = new XMLHttpRequest();
//TODO step2: 设置请求参数
xhr.open('get','01.php',true);
//TODO step3: 设置回调
xhr.onreadystatechange = function () {
//接收返回数据
console.log(xhr.responseText);//responseText 用于接收后台响应的文本
}
//TODO step4: 发送请求
xhr.send();

二、封装

封装的核心思想就是把需要动态变化的部分当成参数,不变的部分就留在那里,在上面的代码中请求方式(get、post)、请求地址url、请求参数data、成功的回调success、失败回调error等,这些参数都是动态变化的;而创建Ajax对象 XMLHttprequest、事件监听onreadystatechange等是固定的,所以第一步我们要确定好封装的参数:

一、封装

封装的核心思想就是把需要动态变化的部分当成参数,不变的部分就留在那里,在上面的代码中请求方式(get、post)、请求地址url、请求参数data、成功的回调success、失败回调error等,这些参数都是动态变化的;而创建Ajax对象 XMLHttprequest、事件监听onreadystatechange等是固定的,所以第一步我们要确定好封装的参数:

#.  url  请求地址

#.  data 请求数据

#.  type 请求类型

#.  success 成功回调

#.  error 失败回调

#. beforeSend 发送前调用 return false 阻止发送

#.  complete ajax请求成功的回调, 无论什么时候都会执行

function ajax(option){
//用户配置option 默认配置init
var init = {
type:'get',
async:true,
url:'',
success: function () { },
error: function () { },
data:{},
beforeSend: function () {
console.log('发送前...');
return false;
}
};
//TODO step1: 合并参数
for(k in option){
init[k] = option[k];
}
//TODO step2: 参数转换
var params = '';
for(k in init.data){
params += '&'+k+'='+init.data[k];
}
var xhr = new XMLHttpRequest();
// type url
//TODO step3: 区分get和post,进行传参
var url = init.url+'?__='+new Date().getTime();
//TODO step4: 发送前
var flag = init.beforeSend();
if(!flag){
return;
}
if(init.type.toLowerCase() == 'get'){
url += params;
xhr.open(init.type,url,init.async);
xhr.send();
}else{
xhr.open(init.type,url,init.async);
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.send(params.substr(1));
}
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){
if(xhr.status == 200){
init.success(xhr.responseText);
}else{
//error
init.error();
}
}
}
}

这里我们要注意的是get和post的传参方式位置不一样,get请求需要直接拼接在url地址后边,post请求需要在send方法里面传参,而且需要这是请求头setRequestHeader('content-type','application/x-www-

form-urlencoded'),所以封装时要进行区分。

由于参数过多,用户不需要每次都传入很多参数,否则用起来会非常繁琐。所以我们采取默认参数的形式,用户不传入就是用默认值,传入就是用用户的参数。

三、使用示例

ajax({
url: 'test.json',
data:{test:123,age:456},
//type:'post',
success: function (res) {
console.log(res);
}
});

Ajax原理与封装详解的更多相关文章

  1. Spring学习 6- Spring MVC (Spring MVC原理及配置详解)

    百度的面试官问:Web容器,Servlet容器,SpringMVC容器的区别: 我还写了个文章,说明web容器与servlet容器的联系,参考:servlet单实例多线程模式 这个文章有web容器与s ...

  2. jQuery Pagination Ajax分页插件中文详解(摘)

    jQuery Pagination Ajax分页插件中文详解 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxin ...

  3. Go语言备忘录:反射的原理与使用详解

    目录: 预备知识 reflect.Typeof.reflect.ValueOf Value.Type 动态调用 通过反射可以修改原对象 实现类似“泛型”的功能   1.预备知识: Go的变量都是静态类 ...

  4. 基础 | batchnorm原理及代码详解

    https://blog.csdn.net/qq_25737169/article/details/79048516 https://www.cnblogs.com/bonelee/p/8528722 ...

  5. Oracle中的SQL分页查询原理和方法详解

    Oracle中的SQL分页查询原理和方法详解 分析得不错! http://blog.csdn.net/anxpp/article/details/51534006

  6. Go语言备忘录(2):反射的原理与使用详解

    本文内容是本人对Go语言的反射原理与使用的备忘录,记录了关键的相关知识点,以供翻查. 文中如有错误的地方请大家指出,以免误导!转摘本文也请注明出处:Go语言备忘录(2):反射的原理与使用详解,多谢! ...

  7. DeepLearning tutorial(3)MLP多层感知机原理简介+代码详解

    本文介绍多层感知机算法,特别是详细解读其代码实现,基于python theano,代码来自:Multilayer Perceptron,如果你想详细了解多层感知机算法,可以参考:UFLDL教程,或者参 ...

  8. 18.Java 封装详解/多态详解/类对象转型详解

    封装概述 简述 封装是面向对象的三大特征之一. 封装优点 提高代码的安全性. 提高代码的复用性. "高内聚":封装细节,便于修改内部代码,提高可维护性. "低耦合&quo ...

  9. $.ajax()方法所有参数详解;$.get(),$.post(),$.getJSON(),$.ajax()详解

    [一]$.ajax()所有参数详解 url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注 ...

随机推荐

  1. SQLServer : 几个特殊函数(RAND,CHECKSUM, NEWID)

    这一篇我们来捋捋在T-SQL中可能会用到的几个特殊的函数 1. 随机数: RAND 返回从 0 到 1 之间的随机 float 值. 语法: RAND ( [ seed ] ) seed 提供种子值的 ...

  2. [MongoDB]增删改查

    摘要 上篇文章学习了mongodb在windows上的安装,以及如何开启mongodb,最后列举了简单的增删改查操作.本篇将继续深入学习一下增删改查. 相关文章 [MongoDB]入门操作 CRUD ...

  3. linux C 快速排序法

    #include <stdio.h> // 数组长度 #define LENGTH(array) ( (sizeof(array)) / (sizeof(array[0])) ) /* * ...

  4. OC - 24&period;CABasicAnimation

    概述 简介 CABasicAnimation是抽象类CAPropertyAnimation的子类,可以直接使用 CABasicAnimation又称基本动画,从fromValue到toValue按照指 ...

  5. kill&comma;killall&comma;top&comma;free&comma;vmstat&comma;iostat&comma;watch命令

    kill命令 Linux 中的kill命令用来终止指定的进程(terminate a process)的运行,是Linux下进程管理的常用命令.通常,终止一个前台进程可以 使用Ctrl+C键,但是,对 ...

  6. 命令行执行php脚本 中&dollar;argv和&dollar;argc

    在实际工作中有可能会碰到需要在nginx命令行执行php脚本的时候,当然你可以去配置一个conf用外网访问. 在nginx命令行中 使用 php index.php 就可以执行这个index.php脚 ...

  7. Android开发过程中的坑及解决方法收录(三)

    bug:应用出现了 不幸运的,应用已停止的错误提示 排除问题: 1.intent接收数据的字符串不匹配 2.java常见的NullPointerException(空指针错误),可能由三个原因引起,字 ...

  8. ASP&period;NET Core 2&period;1 使用Docker运行

    重要提示,本文为 ASP.NET Core 2.1 如果你是 2.2 那么请将文中的镜像换为 microsoft/dotnet:2.2.0-aspnetcore-runtime 即可,其他操作一样 1 ...

  9. 利用trie树实现前缀输入提示及trie的python实现

    代码来自https://github.com/wklken/suggestion/blob/master/easymap/suggest.py 还实现了缓存功能,搜索某个前缀超过一定次数时,进行缓存, ...

  10. RRDtool运用

    一 建立RRD数据库(.rrd文件) $ rrdtool RRDtool Copyright - by Tobias Oetiker <tobi@oetiker.ch> Compiled ...