原生ajax写法
ajax1.0,ie9及以下,ie10+支持ajax2.0
ajax2.0比ajax1.0:
1.多了FormData对象,xhr.send(formData) //不能用GET
2.文件上传,文件上传进度 //把<input type="file" />对象set入formData,xhr.upload.onprogress=ev=>{ev.loaded/evtotal}
3.CORS跨域双验证 // 请求头多了ORIGIN,响应头带上"Access-Control-Allow-Origin"
1.0写法,分四步:
1.创建xhr对象
let xhr = new XMLHttpRequest();
2. 设置超时时间(毫秒)
// 2s超时
xhr.timeout = 2000;
3.建立连接
// 方法 URL 是否异步
xhr.open('GET','http://www.qq.com',true);
4.设置http头
//可以设置某些http头信息
xhr.setRequestHeader('Expires', 'Mon, 20 Jul 2029 23:00:00 GMT')
//甚至是一些自定义的头部
xhr.setRequestHeader('amie', 'xxxxxxx')
//但是诸如User-Agent、Referer浏览器是禁止设置的
5.发送请求
//send可以send任意数据类型
xhr.send('内容');
6.接收响应
xhr.onreadystatechange= ()=>{
if(xhr.readyState == 4){
//请求完成了
if((xhr.status>=200&&xhr.status<300)||xhr.status==304){
//请求成功了,拿到返回的数据
var data = xhr.responseText;
}
}
}
7.超时和错误事件
xhr.ontimeout = xhr.onerror = err => {
this.$fui.popup({
message: '连通性测试失败',
type: 'error',
});
this.loading = false;
};
原生ajax写法的更多相关文章
- 原生Ajax写法(GET)
ajax的GET提交方式的原生代码: var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else if(w ...
- JS 原生ajax写法
<script> //step1.创建XMLHTTPRequest对象,对于低版本的IE,需要换一个ActiveXObject对象 var xhr; if (window.XMLHttpR ...
- 原生ajax与封装的ajax使用方法
当我们不会写后端接口来测试ajax时,我们可以使用node环境创建一个本地服务器. 1.创建一个本地服务器可参考http://www.cnblogs.com/heyujun-/p/6793900.ht ...
- C#构造方法(函数) C#方法重载 C#字段和属性 MUI实现上拉加载和下拉刷新 SVN常用功能介绍(二) SVN常用功能介绍(一) ASP.NET常用内置对象之——Server sql server——子查询 C#接口 字符串的本质 AJAX原生JavaScript写法
C#构造方法(函数) 一.概括 1.通常创建一个对象的方法如图: 通过 Student tom = new Student(); 创建tom对象,这种创建实例的形式被称为构造方法. 简述:用来初 ...
- 原生ajax 和jquery ajax 个人总结
AJAX:即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. 通过在后台 ...
- ASP.NET学习笔记(5)——原生Ajax基本操作
说明(2017-11-4 15:32:49): 1. 回北京后又快一个月了,上次在家写的下回预告,到底是没把加水印写完,而且这次也不想写.. 2. 上次许的愿,十月份看完asp.net,已经泡汤了,翻 ...
- 原生Ajax
使用原生Ajax 验证用户名是否被注册 创建出注册信息: <h1>注册信息</h1><input type="text" name="txt ...
- JS原生ajax与Jquery插件ajax深入学习
序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...
- 原生Ajax 和Jq Ajax
前言:这次介绍的是利用ajax与后台进行数据交换的小例子,所以demo必须通过服务器来打开.服务器环境非常好搭建,从网上下载wamp或xampp,一步步安装就ok,然后再把写好的页面放在服务器中指定的 ...
随机推荐
- Linux内核分析第八周总结
第八章 进程的切换和系统的一般执行过程 进程调度与进程调度的时机分析 第一种分类: I/O密集型(I/O-bound):频繁的进行I/O,通常会花费很多时间等待I/O操作的完成 CPU密集型(CPU- ...
- squid反向代理
反向代理的作用是就爱那个网站中的静态自原本地化.也就是将一部分本应该有原是服务器处理的请求交给 Squid 缓存服务处理 编辑 Squid 服务程序的配置文件*(正向代理与反向代理不能同时使用,) ...
- Ehcache Monitor使用一例
场景介绍:系统集成Shiro,使用Ehcache保存用户登录限制次数,常有用户密码被锁,影响工作效率. 在不考虑集成SSO,LDAP,也不引入身份校验,邮件,短信等解锁特性下.使用Ehcache Mo ...
- ComboBox中如何嵌套TreeView控件
在ComboBox中嵌套TreeView控件,有时候我们在设计界面的时候,由于界面设计的需要,我们需要将TreeView控件嵌套在ComboBox中,因为TreeView控件实在是太占用地方了,要 ...
- 多条件查询 仿淘宝URL传参方式
---恢复内容开始--- 最近项目在做一个电商网站,网站涉及到前后台交互的多条件查询,类似于淘宝的多条件查询,图片如下 此类查询主要涉及到的问题有: 1.如何记忆查询参数 2.如何前后台传值 3.中文 ...
- 【Mysql】—— MySQL存储引擎中的MyISAM和InnoDB区别详解
在使用MySQL的过程中对MyISAM和InnoDB这两个概念存在了些疑问,到底两者引擎有何分别一直是存在我心中的疑问.为了解开这个谜题,搜寻了网络,找到了如下信息: MyISAM是MySQL的默认数 ...
- python之导入模块
导入模块的方法: 导入整个模块:import module_name 导入特定函数:from module_name import function_name 给函数指定别名:from module_ ...
- asp.net 连接SQL Server 数据库并进行相关操作
asp.net 连接数据库,操作数据库主要需要两个类,一个是SqlConnection,一个是SqlCommand SqlConnection用于连接数据库,打开数据库,关闭数据库. 连接数据库需要特 ...
- File操作
对文件进行操作(只操作小文件) bool Exists(string path) 判断文件是否存在 FileStream Create(string path) 创建文件 void Move(stri ...
- BZOJ2120&2453数颜色——线段树套平衡树(treap)+set/带修改莫队
题目描述 墨墨购买了一套N支彩色画笔(其中有些颜色可能相同),摆成一排,你需要回答墨墨的提问.墨墨会像你发布如下指令: 1. Q L R代表询问你从第L支画笔到第R支画笔中共有几种不同颜色的画笔. 2 ...