一、INTRO

AJAX即“Asynchronous Javascript And XML”

一、Ajax的原生初级

1.1 Ajax对象创建:var xhr= new XMLHttpRequest();

1.2 请求首行:xhr.open('post/get', 'url',true/false);   第三个参数为是否异步,默认是异步(true)

1.3 数据发送:xhr.send(data);  如为get请求发送null

1.4 设置请求头:xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");   如果send内容为urlencoded格式(“a=1&b=2”),请参照该样式设置。

1.5 检查是否请求完毕:readyState属性

  只要readyState 触发就会触发readystatechange事件!

  readyState有5个值:0~4,分别表示:未初始化、启动、发送、接受、完成。

xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){ //可以在完成后调用xhr.status,查看状态码
alert(xhr.responseText);                          //xhr.responseText即是返回的数据
} else {
alert("Request was unsuccessful: " + xhr.status);
} } };

1.6 初级示例

var xhr = XMLHttpRequest(); 
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
} } };
xhr.open("post/get", "url", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("a=1&b=2");

二、XMLHttpRequest 中级

2.1 formData:

var data = new FormData();
用法:data.append("key","value");
data.append(document.forms[0]);
data.append(inputdom);
或者直接
var data = new FormData(document.forms[0]);

最后:xhr.send(FormData对象);

  FormData主要服务于表单上传:

  如表单中存在文件上传,原生js中可以直接将文件放入FormData,无需任何特殊处理!

        var xhr = new XMLHttpRequest();
xhr.open('post', 'url');
// 设置请求头(get请求可以省略,post不发送数据也可以省略)
// 如果使用的时 formData可以不写请求头写了无法正常上传文件
// xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.onload = function () {
console.log(xhr.responseText);
}
// XHR2.0新增 上传进度监控
xhr.upload.onprogress = function (event) {
// console.log(event);
var percent = event.loaded / event.total * 100 + '%';
console.log(percent);
var data = new FormData(document.querySelector('form'));
xhr.send(data);

文件上传示例

2.2 进度事件

1. xhr引入了load事件,用以替代 readystatechange 事件。响应接收完毕后将触发 load 事件,因此也就没有必要去检查 ready State 属性了。而 onload 事件处理程序会接收到一个 event 对象,其 target 属性就指向 XHR 对象实例。

 xhr.onload = function(){
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
};
var xhr = new XMLHttpRequest();
xhr.onload = function(){
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
};
xhr.open("get", "altevents.php", true);
xhr.send(null);

2. progress

onprogress 事件处理程序会接收到一个 event 对象,其 target 属性是 XHR 对象,并包含着三个额外的属性:lengthComputable、loaded(position) 和 total(totalSize)。其中,lengthComputable
是一个表示进度信息是否可用的布尔值,position 表示已经接收的字节数,totalSize 表示根据Content-Length 响应头部确定的预期字节数。

xhr.onprogress = function(event){
if (event.length Computable){
console.log("Received " + event.position + " of " +
event.totalSize +" bytes");
} }

3. upload事件

XHR2也给出了用于监控HTTP请求上传的事件。在实现这些特性的浏览器中,XMLHttpRequest对象将有upload属性。upload属性值是一个对象,它定义了addEventListener()方法和整个progress事件集合,比如onprogress和onload(但upload对象没有定义onreadystatechange属性,upload仅能触发新的事件类型)。通常设置XHR.onprogress监控下载进度,设置XHR.upload.onprogress监控上传进度。

 xhr.upload.onprogress = function (event) {
// console.log(event);
var percent = event.loaded / event.total * 100 + '%';
console.log(percent);
// 设置 进度条内部step的宽度
document.querySelector('.step').style.width = percent;
}

4. 其他事件:

HTTP请求无法完成有3种情况,对应3种事件。如果请求超时,会触发timeout事件。如果请求中止,会触发abort事件。最后,像太多重定向这样的网络错误会阻止请求完成,但这些情况发生时会触发error事件。

 var xhr = new XMLHttpRequest();
btn.onclick = function(){
xhr.abort();
};
xhr.ontimeout = function(){
console.log('The request timed out.');
}
xhr.timeout = 100;
xhr.onabort = function(){
console.log("The transfer has been canceled by the user.");
}
xhr.onerror = function(){
console.log("An error occurred while transferring the file.");
}
xhr.onloadend = function(){
console.log("请求结束");
}

三、Fetch原生ajax新形态

XMLHttpRequest实在是太难写了,你可能都无法理解为什么XML是全大写,而HTTP同样是缩写为什么只有首字母大写?还好es2015给我们提供了新api——window.Fetch

3.1 request

fetch('/some/url', {
method: 'get'
})

请求参数:

  • method - 支持 GET, POST, PUT, DELETE, HEAD
  • url - 请求的 URL (必须)
  • headers - 对应的 Headers 对象
  • referrer - 请求的 referrer 信息
  • mode - 可以设置 cors, no-cors, same-origin
    •   same-origin 如果一个请求是跨域的,返回一个error,这样确保所有的请求遵守同源策略
    •   no-cores 模式允许来自CDN的脚本、其他域的图片和其他一些跨域资源,但是首先有个前提条件,就是请求的method只能是"HEAD","GET"或者"POST"。avaScript不能访问Response中的任何属性
    •   cors 通常用作跨域请求来从第三方提供的API获取数据。这个模式遵守CORS协议。response的body信息可读
  • credentials - 设置 cookies 是否随请求一起发送.(对于有set-cookie的返回请求,request一定带着这个属性!)
    •   omit: Never send cookies.
    •   same-origin: Send user credentials (cookies, basic http auth, etc..) if the URL is on the same origin as the calling script.
    •   include: Always send user credentials (cookies, basic http auth, etc..), even for cross-origin calls.
  • redirect - follow, error, manual
  • integrity - subresource 完整性值(integrity value)
  • cache - 设置 cache 模式 (default, reload, no-cache)
  • body - 请求体
var request = new Request('/users.json', {
method: 'POST',
mode: 'cors',
redirect: 'follow',
headers: new Headers({
'Content-Type': 'text/plain'
})
}); fetch(request)

3.2 请求头

// 初始化
let headers = new Headers();
headers.append('Content-Type', 'text/plain');
或者
let headers = new Headers({'Content-Type': 'text/plain'}) // 判断(has), 获取(get), 以及修改(set)请求头的值
headers.has('Content-Type'); // true
headers.get('Content-Type'); // "text/plain"
headers.set('Content-Type', 'application/json'); // 删除某条请求头信息(a header)
headers.delete('X-My-Custom-Header'); //甚至可以替换
var postReq = new Request(oldreq, {method: 'POST'}); 
fetch('/some/url', {
method: 'get',
headers: headers
})

Headers对象有一个特殊的guard属性:  具体参见文档

  • "none": 默认的
  • "request": 从Request中获得的Headers只读。
  • "request-no-cors":从不同域的Request中获得的Headers只读。
  • "response": 从Response获得的Headers只读。
  • "immutable" 在ServiceWorkers中最常用的,所有的Headers都只读。

3.3 response

  ① response参数  —— 在前端不需要自行设置

  • type - 类型,支持: basic, cors
  • url
  • useFinalURL - Boolean 值, 代表 url 是否是最终 URL
  • status - 状态码 (例如: 200, 404, 等等)
  • ok - Boolean值,代表成功响应(status 值在 200-299 之间)
  • statusText - 状态值(例如: OK)
  • headers - 与响应相关联的 Headers 对象.
  • bodyUsed - request或者response中的body信息只能被用一次,以这个bodyUsed作为表示,true-代表被用过了。

  ② response方法

  • clone() - 创建一个新的 Response 克隆对象。如果有多次 调用body的需求可用clone方法,复制然后调用body信息
  • error() - 返回一个新的,与网络错误相关的 Response 对象.
  • redirect() - 重定向,使用新的 URL 创建新的 response 对象..
  • arrayBuffer() - Returns a promise that resolves with an ArrayBuffer.
  • blob() - 返回一个 promise, resolves 是一个 Blob.
  • formData() - 返回一个 promise, resolves 是一个 FormData 对象.
  • json() - 返回一个 promise, resolves 是一个 JSON 对象.
  • text() - 返回一个 promise, resolves 是一个 USVString (text).

  ③简单应用

fetch("/data.json").then(function(res) {
if (res.ok) {
res.json().then(function(data) {
console.log(data.entries);
});
} else {
console.log("Looks like the response wasn't perfect, got status", res.status);
}
}, function(e) {
console.log("Fetch failed!", e);
});

3.4 用法

①处理json

fetch(requestObj).then(function(response) {
return response.json();
})
// 这里可以直接利用这个response.json()数据,也可以return利用promise中then的传递继续处理:
.then(function(json_data) {
console.log(json_data);
});

② 处理一般数据

fetch(requestObj)
.then(function(response) {return response.text()}).then(function(res){console.log(res)})

③ 上传formdata

fetch(url, {
method: 'post',
body: new FormData(document.getElementById('comment-form'))
}).then(function(request){return response.text()}).then(function(res){console.log(res)})

④ 上传json

fetch(url, {
method: 'post',
body: JSON.stringify({
email: value
answer: value
})
}).then(function(request){return response.text()}).then(function(res){console.log(res)})

⑤普通post请求

fetch("http://www.example.org/submit.php", {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
body: "firstName=Nikhil&favColor=blue&password=easytoguess"
}).then(res=> {
if (res.ok) {
alert("Perfect! Your settings are saved.");
} else if (res.status == 401) {
alert("Oops! You are not authorized.");
}
}, e=> {
alert("Error submitting form!");
});
//第二个参数相当于catch()

原生AJAX(包括Fetch)的更多相关文章

  1. 原生Ajax( XHR 和 Fetch )

    原生Ajax 基本使用的四大步骤,简单易懂 ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页.接下来通过本文给大家介绍Ajax的使用四大步骤,非常不错,感兴趣的 ...

  2. 原生ajax、XMLHttpRequest和FetchAPI简单描述

    什么是ajax ajax的出现,刚好解决了传统方法的缺陷.AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个 ...

  3. 前后端数据交互(六)——ajax 、fetch 和 axios 优缺点及比较

    一.ajax.fetch 和 axios 简介 1.1.ajax ajax是最早出现发送后端请求的技术,属于原生 js .ajax使用源码,请点击<原生 ajax 请求详解>查看.一般使用 ...

  4. 新一代Ajax API --fetch

    之前 师傅跟我提过 一个新的Ajax API  fetch 今天看到一篇关于fetch的文章,受益匪浅. XMLHttpRequest并不是专为Ajax而设计的,虽然各种框架对XHR的封装已经足够好用 ...

  5. [译]脱离jQuery,使用原生Ajax

    脱离jQuery,使用原生Ajax 标签: Ajax translate 英文出处:<A Guide to Vanilla Ajax Without jQuery> 翻译: 刘健超 J.c ...

  6. 理解 ajax、fetch和axios

    背景 ajax fetch.axios 优缺点 ajax基于jquery,引入时需要引入庞大的jquery库,不符合当下前端框架,于是fetch替代了ajax 由于fetch是比较底层,需要我们再次封 ...

  7. vue-d2admin-axios异步请求登录,先对比一下Jquery ajax, Axios, Fetch区别

    先说一下对比吧 Jquery ajax, Axios, Fetch区别之我见 引言 前端技术真是一个发展飞快的领域,我三年前入职的时候只有原生XHR和Jquery ajax,我们还曾被JQuery 1 ...

  8. 原生Ajax

    使用原生Ajax 验证用户名是否被注册 创建出注册信息: <h1>注册信息</h1><input type="text" name="txt ...

  9. JS原生ajax与Jquery插件ajax深入学习

    序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...

随机推荐

  1. AD域 组策略部署U软件

    1.首先把需要部署的软件放到活动目录共享文件夹中.(只支持MSI格式的软件) 2.打开组策略管理工具. 3.选择域名右键,创建GPO. 4.在弹出的新建GPO窗口中,输入策略名称. 5.在新创建的策略 ...

  2. 关于socket

    使用socket常用的操作就是读写,recv和send,与read.write对应,但多了一个flag位可以设定阻塞等,一些细节以后再探.目前使用时发现read往往不能将数据完整读出,可能是调用时内核 ...

  3. Android辅助开发工具合集

    https://github.com/389273716/android-skill-summary/blob/master/开发工具使用指南/辅助开发工具.md

  4. bootstrap模态框手动关闭遮盖层不消失

    模态框中 加载了一个子页面 子页面中调教表单之后想根据执行结果手动关闭模态框,最初尝试了以下几种方案: 1.$("#myModal").modal('hide');//模态框关闭 ...

  5. iOS内置麦克风选择方法

    模式中的 voicechat用于VoIP是由系统进行默认选择的最适合的麦克风 模式中的AVAudioSessionModeVideoRecording默认选择上麦克风,离摄像头最近的那个,主要用于VO ...

  6. Hillstone防火墙sslvpn配置与使用

    1.山石的sslvpn称为Secure Connect VPN,即scvpn. 2.WEB界面登陆防火墙,“用户”,“AAA服务器”,新建用户: 3.定义源IP池 即用户通过sslvpn拨号成功后获取 ...

  7. java-27 Properties类的使用

    1.Properties Properties 类表示了一个持久的属性集.Properties 可保存在流中或从流中加载.属性列表中每个键及其对应值都是一个字符串. 2.方法 setProperty( ...

  8. PyCharm中 Django1.11配置Mysql数据库

    1.Django 中配置MySQL数据库 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': '数据库名称 ...

  9. Mac 怎么通过自带终端连接linux服务器

    简单来说,就两步骤 · 打开Mac终端,切换到root权限下 切换root权限: sudo -i ·通过ssh命令连接linux服务器 ssh root@127.0.0.1 root是账户名,@后面的 ...

  10. 执行sql语句后报1055-- this is incompatible with sql_mode=only_full_group_by

    这个问题是mysql5.7中存在的问题,查看原因,在任意库执行select @@sql_mode,查到的结果为ONLY_FULL_GROUP_BY,STRICT_TRANS_TABLES,NO_ZER ...