XMLHttpRequest的使用
XMLHttpRequest的使用
标签(空格分隔): JavaScript 前端 编程
function sendAjax() {
//构造表单数据
var formData = new FormData();
formData.append('username', 'johndoe');
formData.append('id', 123456);
//创建xhr对象
var xhr = new XMLHttpRequest();
//设置xhr请求的超时时间
xhr.timeout = 3000;
//设置响应返回的数据格式
xhr.responseType = "text";
//创建一个 post 请求,采用异步
xhr.open('POST', '/server', true);
//注册相关事件回调处理函数
xhr.onload = function(e) {
if(this.status == 200||this.status == 304){
alert(this.responseText);
}
};
xhr.ontimeout = function(e) { ... };
xhr.onerror = function(e) { ... };
xhr.upload.onprogress = function(e) { ... };
//发送数据
xhr.send(formData);
}
/*
发起HTTP GET请求获取指定URL的内容
如果响应成功到达,则传入responseText给回调函数
如果响应在timeout时间内没有到达,则中止请求
浏览器可能会在abort()后出啊发readystatechange
如果部分请求结果到达,甚至可能设置status属性
所有需要设置一个标记,当部分且超时的响应到达时不会调用回调函数
如果使用load(当请求完成时触发)事件就没有这个风险
*/
function(url,timeout,callback){
var request = new XMLHttpRequest();
var time = false;//是否超时
var timer = setTimeout(function(){
timeout = true;
request.abort();//请求中止
},timeout);
request.open("GET",url);
request.onreadystatechange = function(){
if(request.readyState !==4) continue;//忽略未完成的请求
if(timeout) return;//忽略中止请求
clearTimeout(timer);//取消等待的超时
if(request.status === 200)
callback(request.responseText);
}
request.send(null);
}
XMLHttpRequest的使用的更多相关文章
- JavaScript权威设计--跨域,XMLHttpRequest(简要学习笔记十九)
1.跨域指的是什么? URL 说明 是否允许通信 http://www.a.com/a.jshttp://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a. ...
- AJAX的核心XMLHttpRequest对象
为了实现异步通讯,提高用户体验度,而将很多旧知识(XML,DOM,JavaScript,HTML,jQuery,Css...)重新融合程一个新的知识框架.而XMLHttpRequest对象则是其中的重 ...
- XMLHTTPRequest对象的创建与浏览器的兼容问题
MLHttpRequest 对象是AJAX功能的核心,要开发AJAX程序必须从了解XMLHttpRequest 对象开始. 了解XMLHttpRequest 对象就先从创建XMLHttpRequest ...
- 部分安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
前端JS中使用XMLHttpRequest 2上传图片到服务器,PC端和大部分手机上都正常,但在少部分安卓手机上上传失败,服务器上查看图片,显示字节数为0.下面是上传图片的核心代码: HTML < ...
- Ajax 与 XmlHttpRequest
AJAX描述了确保Web应用在Web服务器请求新数据的情况下也能(几乎)实时反应的一种方法.具体地说,AJAX只是一些建立已久的技术的相互作用,从HTML.XHTML和HTTP,到JavaScript ...
- js中XMLHttpRequest对象实现GET、POST异步传输
js中XMLHttpRequest对象实现GET.POST异步传输 /* * 统一XHR接口 */ function createXHR() { // IE7+,Firefox, Opera, Chr ...
- AJAX初探,XMLHttpRequest介绍
AJAX初探,XMLHttpRequest介绍 AJAX AJAX = Asynchronous JavaScript and XML. 异步的JavaScript和XML. AJ ...
- 大熊君学习html5系列之------XHR2(XMLHttpRequest Level 2)
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...
- 手动封装js原生XMLHttprequest异步请求
Code Object.extend =function(targetObj,fnJson){ //扩展方法,类似于jQuery的$.extend,可以扩展类的方法,也可以合并对象 for(var f ...
- XMLHttpRequest对象用法
xmlhttprequest is what? 用户后台与服务器交换数据. 可以在不重新加载页面的情况下更新网页: 在页面已加载后从服务器请求数据: 在页面已加载后从服务器接收数据: 在后台向服务器发 ...
随机推荐
- 2016年第七届蓝桥杯javaB组 试题 答案 解析
1.煤球数目 有一堆煤球,堆成三角棱锥形.具体: 第一层放1个, 第二层3个(排列成三角形), 第三层6个(排列成三角形), 第四层10个(排列成三角形), .... 如果一共有100层,共有多少个煤 ...
- 四、Snapman多人协作电子表格之——Exprtk脚本
Snapman多人协作电子表格是一个即时工作系统. Snapman中嵌入了Exprtk脚本进行公式数据运算.Exprtk是一种高性能的脚本,经测试它的数据运算性能只比C#和java底20%. 一.Ex ...
- (最完美)MIUI12系统的Usb调试模式在哪里开启的步骤
当我们使用安卓手机通过数据线链接到Pc的时候,或者使用的有些app比如我们公司营销小组当使用的app引号精灵,之前的老版本就需要开启usb调试模式下使用,现当新版本不需要了,如果手机没有开启usb调试 ...
- Win10中Vue.js的安装和项目搭建
一. 提前准备工作 1.Node.js环境 2.Windows10 3.npm(前端包管理工具) 4.webpack(前端资源加载/打包工具) 二. 开始安装 1..下载并安装Node.js 下载地址 ...
- nginx预防常见攻击
目录 nginx防止DDOS攻击 概述 攻击手段 配置 限制请求率 限制连接的数量 关闭慢连接 设置 IP 黑名单 设置IP白名单 小站点解决方案 nginx防止CC攻击 概述 主动抑制方法 应用举例 ...
- Cannot connect to WMI Provider & Invalid class [0x80041010]
数据库服务器(Virtual Machine)所在的Nutanix一台主机由于故障,VM自动切换到另一台主机,切换过程中VM会重新启动,但是早上检查的时候,发现点击SQL Server Configu ...
- 【原】无脑操作:HTML5 + CSS + JavaScript实现比赛排程
1.背景:朋友请帮忙做一个比赛排程软件 2.需求: ① 比赛人数未知,可以通过文本文件读取参赛人员名称: ② 对参赛人员随机分组,一组两人,两两PK,如果是奇数人数,某一个参赛人员成为幸运儿自动晋级: ...
- 内存与IO的交换【转】
用户进程的内存页分为两种: file-backed pages(文件背景页) anonymous pages(匿名页) 比如进程的代码段.映射的文件都是file-backed,而进程的堆.栈都是不与文 ...
- CRC32明文攻击
明文攻击是一种较为高效的攻击手段,大致原理是当你不知道一个zip的密码,但是你有zip中的一个已知文件(文件大小要大于12Byte)时, 因为同一个zip压缩包里的所有文件都是使用同一个加密密钥来加密 ...
- python3 re模块正则匹配字符串中的时间信息
匹配时间: # -*- coding:utf-8 -*- import re def parseDate(l): patternForTime = r'(\d{4}[\D]\d{1,2}[\D]\d{ ...