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);
}

参考地址1-SF

参考地址2-CSDN

XMLHttpRequest的使用的更多相关文章

  1. JavaScript权威设计--跨域,XMLHttpRequest(简要学习笔记十九)

    1.跨域指的是什么? URL 说明 是否允许通信 http://www.a.com/a.jshttp://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a. ...

  2. AJAX的核心XMLHttpRequest对象

    为了实现异步通讯,提高用户体验度,而将很多旧知识(XML,DOM,JavaScript,HTML,jQuery,Css...)重新融合程一个新的知识框架.而XMLHttpRequest对象则是其中的重 ...

  3. XMLHTTPRequest对象的创建与浏览器的兼容问题

    MLHttpRequest 对象是AJAX功能的核心,要开发AJAX程序必须从了解XMLHttpRequest 对象开始. 了解XMLHttpRequest 对象就先从创建XMLHttpRequest ...

  4. 部分安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法

    前端JS中使用XMLHttpRequest 2上传图片到服务器,PC端和大部分手机上都正常,但在少部分安卓手机上上传失败,服务器上查看图片,显示字节数为0.下面是上传图片的核心代码: HTML < ...

  5. Ajax 与 XmlHttpRequest

    AJAX描述了确保Web应用在Web服务器请求新数据的情况下也能(几乎)实时反应的一种方法.具体地说,AJAX只是一些建立已久的技术的相互作用,从HTML.XHTML和HTTP,到JavaScript ...

  6. js中XMLHttpRequest对象实现GET、POST异步传输

    js中XMLHttpRequest对象实现GET.POST异步传输 /* * 统一XHR接口 */ function createXHR() { // IE7+,Firefox, Opera, Chr ...

  7. AJAX初探,XMLHttpRequest介绍

    AJAX初探,XMLHttpRequest介绍 AJAX      AJAX = Asynchronous JavaScript and XML. 异步的JavaScript和XML.      AJ ...

  8. 大熊君学习html5系列之------XHR2(XMLHttpRequest Level 2)

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

  9. 手动封装js原生XMLHttprequest异步请求

    Code Object.extend =function(targetObj,fnJson){ //扩展方法,类似于jQuery的$.extend,可以扩展类的方法,也可以合并对象 for(var f ...

  10. XMLHttpRequest对象用法

    xmlhttprequest is what? 用户后台与服务器交换数据. 可以在不重新加载页面的情况下更新网页: 在页面已加载后从服务器请求数据: 在页面已加载后从服务器接收数据: 在后台向服务器发 ...

随机推荐

  1. ASP.Net Mvc实现自定义User Identity用户身份识别系统(2)

    上一篇博文中已经实现了如何在页面上使用自定义的属性即上篇博文所示的@this.U,今天将进一步研究用户自定义User Identity; 实现思路: 通过研究微软自带identity的套路,我们可以发 ...

  2. [转]Blue Prism Login Agent 使用指导手册

    本文转自:https://cloud.tencent.com/developer/news/83035 咳!咳!咳! 第一篇RPA技术文,还是贼拉鸡冻.各位大侠要多多支持啊 1.Login Agent ...

  3. 微信小程序 picker 中range-key的坑

    <picker class='fr' bindchange="onChangeBuild" range-key="{{'num'}}" value=&qu ...

  4. 如何利用U盘重装系统

    第一步,下载系统镜像 推荐在msdn上面下载,因为大多数都是 Microsoft 纯净原版镜像,如果要安装的是纯净版系统请先看第六步,然后才看第二步 第二步,下载U盘PE工具 推荐使用大白菜或者老毛桃 ...

  5. MySQL系统变量sql_safe_updates总结

    MySQL系统变量sql_safe_updates总结   在MySQL中,系统变量sql_safe_updates是个非常有意思的系统变量,在Oracle和SQL Server中都没有见过这样的参数 ...

  6. redis -hash(哈希.对象)

    hash 用于储存对象,对象的结构为属性.值 值的类型string 增加.修改: 设置单个属性: hset 键 field 值 例如: 设置键 user 的属性name 为 python hset u ...

  7. SQLServer删除登录帐户

    删除登陆账户注意事项 不能删除正在登录的登录名. 也不能删除拥有任何安全对象.服务器级对象或 SQL Server 代理作业的登录名. 可以删除数据库用户映射到的登录名,但是这会创建孤立用户. 有关详 ...

  8. Git常用命令使用大全

    1.查看.添加.提交.删除.找回,重置修改文件 git help <command> # 显示command的help git show # 显示某次提交的内容 git show $id ...

  9. FPGA设计千兆以太网MAC(3)——数据缓存及位宽转换模块设计与验证

    本文设计思想采用明德扬至简设计法.上一篇博文中定制了自定义MAC IP的结构,在用户侧需要位宽转换及数据缓存.本文以TX方向为例,设计并验证发送缓存模块.这里定义该模块可缓存4个最大长度数据包,用户根 ...

  10. Anaconda在Windows上安装不上原因

    倒腾了一下午安装Anaconda,[所有程序]中只有一个Anaconda的目录,目录中只有一个anaconda prompt,最后发现是因为环境中原先就安装了Java环境,将之前安装的java环境卸载 ...