ajax代码原理,关于Ajax的原理以及代码封装详解
前言
其实AJAX内部实现并不麻烦,主要通过一个叫XMLHttpRequest的对象,而这个对象在现有的浏览器均被支持。
可以说,它是整个AJAX实现的基础,是浏览器用于后台与服务器交换数据的对象,有了它,才有了AJAX,也便有了部分页面刷新的艺术!
本文主要给大家介绍了关于Ajax原理以及代码封装的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。
示例代码
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
// to do...
}
}
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
步骤:
1、创建。
创建 XMLHttpRequest 对象的语法:
var = new XMLHttpRequest();
老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:
var = new ActiveXObject("Microsoft.XMLHTTP");
2、连接和发送。
2.1、open()函数的三个参数:请求方式、请求地址、是否异步请求
2.2、GET 请求方式是通过URL参数将数据提交到服务器的,POST则是通过将数据作为 send 的参数提交到服务器
2.3、POST 请求中,在发送数据之前,要设置表单提交的内容类型
2.3、提交到服务器的参数必须经过 encodeURIComponent()方法进行编码,实际上在参数列表key=value的形式中,key 和 value 都需要进行编码,因为会包含特殊字符。每次请求的时候都会在参数列表中拼入一个 v=xx 的字符串,这样是为了拒绝缓存,每次都直接请求到服务器上。
3、接收。
3.1、接收到响应后,响应的数据会自动填充XHR对象,相关属性如下
responseText:响应返回的主体内容,为字符串类型;
responseXML:如果响应的内容类型是 "text/xml" 或 "application/xml",这个属性中将保存着相应的xml 数据,是 XML 对应的 document 类型;
status:响应的HTTP状态码;
statusText:HTTP状态的说明
3.2、XHR对象的readyState属性表示请求/响应过程的当前活动阶段,这个属性的值如下
0 --> 未初始化,尚未调用open()方法;
1 --> 启动,调用了open()方法,未调用send()方法;
2 --> 发送,已经调用了send()方法,未接收到响应;
3 --> 接收,已经接收到部分响应数据;
4 --> 完成,已经接收到全部响应数据;
只要 readyState 的值变化,就会调用 readystatechange 事件,(其实为了逻辑上通顺,可以把readystatechange放到send之后,因为send时请求服务器,会进行网络通信,需要时间,在send之后指定readystatechange事件处理程序也是可以的,我一般都是这样用,但为了规范和跨浏览器兼容性,还是在open之前进行指定吧)。
3.3、在readystatechange事件中,先判断响应是否接收完成,然后判断服务器是否成功处理请求,xhr.status 是状态码,状态码以2开头的都是成功,304表示从缓存中获取,上面的代码在每次请求的时候都加入了随机数,所以不会从缓存中取值,故该状态不需判断。
封装ajax方法:
ajax({
url: "./test.php",
type: "POST",
data: { name: "abc", age: 18 },
dataType: "json",
success: function (response, xml) {
// 执行成功回调
},
fail: function (status) {
// 执行失败回调
}
});
function ajax(options) {
options = options || {};
options.type = (options.type || "GET").toUpperCase();
options.dataType = options.dataType || "json";
var params = formatParams(options.data);
// 创建对象
if (window.XMLHttpRequest) {
var xhr = new XMLHttpRequest();
} else {
var xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//接收 - 第三步
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
var status = xhr.status;
if (status >= 200 && status < 300) {
options.success && options.success(xhr.responseText,xhr.responseXML);
} else {
options.fail && options.fail(status);
}
}
}
//连接 和 发送 - 第二步
if (options.type == "GET") {
xhr.open("GET", options.url + "?" + params, true);
xhr.send(null);
} else if (options.type == "POST") {
xhr.open("POST", options.url, true);
//设置表单提交时的内容类型
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(params);
}
//格式化参数
function formatParams(data) {
var arr = [];
for (var name in data) {
arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
}
arr.push(("v=" + Math.random()).replace(".",""));
return arr.join("&");
}
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
ajax代码原理,关于Ajax的原理以及代码封装详解相关推荐
- Flink/Blink 原理漫谈(一)时间,watermark详解
系列文章目录 Flink/Blink 原理漫谈(零)运行时的组件 Flink/Blink 原理漫谈(一)时间,watermark详解 Flink/Blink 原理漫谈(二)流表对偶性和distinct ...
- 主成分分析(PCA)原理和鲁棒主成分分析(RPCA)详解
主成分分析(PCA)原理和鲁棒主成分分析(RPCA)详解 1.相关背景 在许多领域的研究与应用中,通常需要对含有多个变量的数据进行观测,收集大量数据后进行分析寻找规律.多变量大数据集无疑会为研究和应用 ...
- 通信原理之模拟幅度调制(线性调制)详解
通信原理系列文章: 通信原理之模拟幅度调制(线性调制) 通信原理之模拟角度调制(非线性调制) 通信原理之模拟调制系统信号的抗造性能 通信原理之数字调制原理 通信原理之模拟幅度调制(线性调制)详解 1. ...
- Joomla远程代码执行漏洞分析小白版(小宇特详解)
Joomla远程代码执行漏洞分析小白版(小宇特详解) 今天看了一下2021陇原战役WP,在看web方向的时候,看到pop链,想了解一下,后来又看到了p师傅在15年的一篇文章,在这里记录一下.这里主要是 ...
- android xutils json请求,Android Xutils3网络请求的封装详解及实例代码
Xutils3网络请求的封装详解 封装了一个Xutil3的网络请求工具类,分享给大家,本人水平有限,不足之处欢迎指出. 使用前先配置xutils3: 1.gradle中添加 compile 'org. ...
- 为什么jvm要分为堆、方法区等?原理是什么?_「JVM」知识点详解一:JVM运行原理详解...
前言 JVM 一直都是面试的必考点,大家都知道,但是要把它搞清楚又好像不是特别容易.JVM 的知识点太散,不系统,今天带大家详细的了解一下jvm的运行原理. 正文 1 什么是JVM? JVM是Java ...
- QT中使用C++ socket通信,socket通信原理三次握手和四次握手详解、客户端与服务端实例详解
对TCP/IP.UDP.Socket编程这些词你不会很陌生吧?随着网络技术的发展,这些词充斥着我们的耳朵.那么我想问: 1. 什么是TCP/IP.UDP? 2. Soc ...
- ajax then fail done,Jquery $when done then的用法详解
对于$.ajax请求来说,如果层级比较多,程序看起来会比较乱,而为了解决这种问题,才有了$when...done...fail...then的封装,它将$.ajax这嵌套结构转成了顺序平行的结果,向下 ...
- flask ajax小程序,Python Flask 搭建微信小程序后台详解
后台程序返回了数据后,第三步就是小程序该怎么接收返回数据并进行相关业务逻辑处理. 小程序接收返回数据.Python-Flask向小程序返回了JSON格式的数据后,小程序的wx.requset()函数里 ...
- ceph存储原理_赠书 | Linux 开源存储全栈详解——从Ceph到容器存储
// 留言点赞赠书我有书,你有故事么?留言说出你的存储故事留言点赞前两名,免费送此书截止日期12.27号12.30号公布名单 // 内容简介 本书致力于帮助读者形成有关Linux开源存储世界的细致的拓 ...
最新文章
- React使用ES6语法重构组件代码
- 代码这样写更优雅(Python版)
- Failed to connect to 127.0.0.1:27017, reason: errno:111 Connection refused(MongoDB启动异常)
- android广告平台的介绍
- C# 自定义箭头组件
- Bzoj4822 [Cqoi2017]老C的任务
- 程序员面试金典——9.8硬币表示
- linux中什么是进程名,Linux进程是什么
- 如何使用SLM生成涡旋光束
- Ruby快速入门(30分钟)
- python第三方库文件传输助手_Python与微信——itchat包
- 成都最稳定的dns服务器地址,成都首选DNS服务器地址
- CocoaPods 使用小结
- maya linux 安装教程视频,Maya快捷键插件增强工具ZooTools Pro 2.2.4 for Maya Win/Linux+ Assets pack 2.3+视频教程...
- 网站源码 HTML和源代码有什么区别?他俩是什么关系?
- php身份证识别ORC
- cesium添加自定义点位图片
- 如何能做好软件项目(迭代开发)
- CT医学影像的窗高窗位、CT值(Hu值)
- navicat 表合并查询_MySQL数据表合并去重的简单实现方法
热门文章
- summit网页上的smt打不开 提示无法启动应用程序 请与应用程序供应商联系
- javaWeb -- 虚拟主机以及虚拟目录映射的配置
- Objective-C的Runtime System
- Windows Workflow Foundation实验01——Windows Workflow Foundation快速入门(练习四)
- 如何解决testng执行用例失败自动重跑问题
- jsp页面科学计数法显示问题的解决办法
- 【干货】完美日记增长策略深度研究报告.pdf(附下载链接)
- 【实践】飞猪交通个性化搜索推荐技术的实践与创新(附PPT下载链接)
- 最强战队出炉,2020腾讯广告算法大赛圆满落幕
- python简单计算器下载安装到手机_python计算器app下载