摘要：最近在学，刚刚入门，用到很多与相关的交互。也用了挺久的了，想写一下学习笔记来记录一下。实现过程是的基础，是核心对象，首先要实例化一个对象进行请求，规定请求的类型以及是否异步处理请求。响应服务器状态响应服务器状态涉及对象的三个重要的属性。
最近在学php，刚刚入门，用到很多与Ajax相关的交互。Ajax也用了挺久的了，想写一下学习笔记来记录一下。今天先简单写一下原理和过程。欢迎大家一起探讨。什么是AJAX
AJAX的全称是Asynchronous JavaScript and XML。
它是一种基于JavaScript的网页应用技术。传统的提交方式会重载整个网页，而利用AJAX技术可以使JavaScript与Web服务器异步传输数据，从而实现不重载整个页面的情况下，更新局部页面局部内容。
var xhr = new XMLHTTPRequest();1. AJAX进行请求，规定请求的类型、URL 以及是否异步处理请求。
xhr.open(method, url, async);
open()方法接收三个参数：
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
AJAX的原理就是Asynchronous异步的，所以第三个参数async为true。
第一个参数method决定了请求类型，即传输数据的方式。
GET
与POST相比，GET 更简单也更快。但是传输数据时会将数据放在地址栏的后面，对客户端而言不安全。除此之外，GET传输数据的大小受限，一般只有2k-8k，因浏览器而异。所以在传输不敏感信息并且传输文件小的情况下，我们可以选择用GET方式传输。
POST
POST传输是传输数据体，是隐式的，相对客户端较为安全。但是从另一层面上来说，相对服务器端就有一定的风险了。POST传输数据没有大小限制，但是服务器对上传的数据有限制，需要手动修改。
2. AJAX向服务器发送请求xhr.send(string);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
用GET方法传输时，send(null)，用POST方法传输时，需要用setRequestHeader方法设置请求头。
3. AJAX响应服务器状态AJAX响应服务器状态涉及XMLHttpRequest对象的三个重要的属性：onreadystatechange、readyState、status。
readyState存有XMLHttpRequest的状态。从0到4发生变化：
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
每当readyState改变时，就会触发onreadystatechange事件，在事件中判断请求是否成功，响应是否就绪，当readyState等于4且状态为200时，表示响应已就绪：
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
obj.success(xhr.responseText);
}
}
}
4. 使用 Callback 函数
obj.success(xhr.responseText);
AJAX响应就绪后，对接收到的数据进行后续的操作。
Ajax原生封装var ajax = {
create: function () {
var xhr;
if (XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
},
request: function (obj) {
var xhr = this.create();
var data = this.changeData(obj.data);
if (obj.type === "GET") {
xhr.open(obj.type, obj.url+"?rand="+Math.random()+"&"+data, true);
xhr.send(null);
} else if (obj.type === "POST") {
xhr.open(obj.type, obj.url, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
xhr.send(data);
}
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
obj.success(xhr.responseText);
}
}
}
},
changeData: function (data) {
var arr = [];
for (var i in data) {
arr.push(i+"="+data[i]);
}
return arr.join("&");
}
}
// 调用
ajax.request({
type: "POST",
url: "weibo.php",
data: "act=update",
success: function(res){
console.log(res);
}
});
可以看出调用的形式与jQuery的实现原理相似。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/53430.html
摘要：抱歉，最近忙，本篇等有时间更新。引言本文基于框架做的一个生成和存储，主要目的是学习使用框架。书籍基于的，学习时使用框架开发。开发环境备注一直想把这本书的个作为系列分享出来，供初学者学习玩玩。 抱歉，最近忙，本篇等有时间更新。 引言 本文基于Laravel框架做的一个URL生成和存储demo，主要目的是学习使用Laravel框架。内容基于英文书籍《Packt.Laravel.Applic...
摘要：点击此处了解网易微专业课程前段时间报名参加了网易云课堂微专业课程前端开发工程师，这周课程开始了，正式学习。以下内容为前端开发工程师微专业的第一门课网页制作的课程学习指南，学习视频课程后自己整理的学习笔记，会持续更新内容。 何为网易微专业？ 微专业是由网易云课堂联合各领域知名专家，以就业为导向，精心打造的职业培训方案。按要求完成学习，考试通过可获得专业认定证书，令你求职或加薪多一份独特优...
摘要：点击此处了解网易微专业课程前段时间报名参加了网易云课堂微专业课程前端开发工程师，这周课程开始了，正式学习。以下内容为前端开发工程师微专业的第一门课网页制作的课程学习指南，学习视频课程后自己整理的学习笔记，会持续更新内容。 何为网易微专业？ 微专业是由网易云课堂联合各领域知名专家，以就业为导向，精心打造的职业培训方案。按要求完成学习，考试通过可获得专业认定证书，令你求职或加薪多一份独特优...
阅读 2951·2021-11-24 09:39
阅读 2858·2021-09-29 09:34
阅读 3551·2021-09-24 10:23
阅读 1735·2021-09-22 15:41
阅读 1691·2019-08-30 15:55
阅读 3508·2019-08-30 13:58
阅读 2615·2019-08-30 13:11
阅读 1663·2019-08-29 12:31
