原生XMLHttpRequest

2026-09-28

原生 XMLHttpRequest

一.什么是XMLHttpRequest? XHR英文全名XmlHttpRequest,中文可以解释为可扩展超文本传输请求.Xml可扩展标记语言,Http超文本传输协议,Request请求.XMLHttpRequest对象可以在不向服务器提交整个页面的情况下,实现局部更新网页.当页面全部加载完毕后,客户端通过该对象向服务器请求数据,服务器端接受数据并处理后,向客户端反馈数据. XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的

基于原生XMLHttpRequest封装

用了一段时间的Ajax,感觉有很多的不足之处,于是就封装原生了 XMLHttpRequest . 废话不多说,直接上代码. var http = function () { 'use strict'; //strict mode var get = function (options) { if (!options.url) throw "url is not defined"; options.type = "get"; request(options); };

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

Code Object.extend =function(targetObj,fnJson){ //扩展方法,类似于jQuery的$.extend,可以扩展类的方法,也可以合并对象 for(var fnName in fnJson){ targetObj[fnName]=fnJson[fnName]; } return targetObj; }; HttpAjax = (function(){ function HttpAjax(options){ var settings={ type:'po

原生XMLHttpRequest (ajax)的简单使用

示例: 第一步:创建XMLHttpRequest对象 var httpxml ; if(window.XMLHttpRequest){ //大多数浏览器 httpxml = new XMLHttpRequest(); }else{ //古董级浏览器 httpxml = new ActiveXObject("Microsoft.XMLHTTP"); } 第二步:向服务器发送请求使用 XMLHttpRequest 对象的 open() 和 send() 方法.具体参数,如下所示: 使用方

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

序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因时间原因,并未在所有浏览器上进行测试,目前测试的IE8,9,10,Google Chrome,Mozilla Firefox,Opera常用几款,如大家在进行验证测试发现有问题,请及时反馈与我,谢谢大家. 言归正传,不说废话直接上代码: 前端代码 <!DOCTYPE html PUBLIC "

Django中的文件上传和原生Ajax

概述 Django中的上传有3种方案: form 表单常规上传,但点击提交后会自动刷新页面 Ajax 上传,不刷新页面,(分为原生ajax上传和jQuery上传),IE7以上不兼容 iframe 上传,兼容性没问题,也不会刷新页面常规表单上传这种方式有个缺点,就是会自动刷新页面后台接收文件时,通过request.files.get('xxx')得到文件对象,并通过对文件循环,循环对象为文件对象.chunks()写入新文件即可!后台接收文件都使用这种方式! 可以看下源码: class InM

自定义xmlhttprequest

/** * xhr_proxy.js * 通过劫持原生XMLHttpRequest实现对页面ajax请求的监听 * @author binaryfire */ const READY_STATE_CHANGE = 'readystatechange'; let gHandlerList = [],//截获请求的处理函数列表 gIsInited = false;//是否已经初始化 let T_RSC_HANDLERS = Symbol('readyStateChangeHandler'); let

原生XMLHTTPResponse，jQuery-Ajax 上传文件；iframe上传图片&预览；图片验证码小案例

原生AJAX Ajax主要就是使用 [XmlHttpRequest]对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE),Ajax首次出现IE5.5中存在(ActiveX控件) 1.XmlHttpRequest对象介绍 (不兼容IE老版本) x = new XMLHttpRequest() XmlHttpRequest对象的主要方法: 格式说明: 返回值方法名(参数,...) a. void open(String method,String url,Boolen async)

day21

1.文件上传 a. Html Form表单提交 b. Ajax提交原生XMLHttpRequest XmlHttpReqeust() 类 xhr = XmlHttpReqeust() xhr.send("k1=v1;k2=v2") jQuery Ajax $.ajax({}) 内部调用XmlHt

Ajax表单异步上传（包括文件域）

起因做前台页面时,需要调用WebAPI的Post请求,发送一些字段和文件(相当于把表单通过ajax异步发送出去,得到返回结果),然后得到返回值判断是否成功. 尝试先是尝试了一下 "jQuery Form Plugin" ,这玩意就是的巨大的坑,实现他和jquery1.9.2兼容性就不是太好,好不容易把$.browser的问题解决了,发现用他上传文件得不到返回值. $("#view").submit( $("#view").ajaxSubmit

Django之上传文件

使用Form表单上传文件 upload.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> {# 上传文件的时候必须要在form标签中添加属性 enctype="multipart/form-data&quo

《JAVASCRIPT高级程序设计》Ajax与Comet

Ajax,是Asynchronous JavaScript + XML的简写,这一技术能向服务器请求额外的技术而无需卸载页面,会带给用户更好的体验.Ajax的核心是XMLHttpRequest对象.为了防止XSS(跨站点脚本).CSRF(跨站点请求伪造)等攻击,Ajax有着同源策略的限制:解决跨域的方式有CORS(跨源资源共享).图像Ping和JSONP. Comet是对Ajax的扩展,让服务器向浏览器推送数据,有长轮询和HTTP流两种方式实现. webSocket是一种使用自定义的协议,与服务

学习Ajax

1.XHR对象 IE7+.Firefox.Opera.Chrome和Safari都支持原生XMLHttpRequest对象,IE6不支持,只支持ActiveXObject对象,该对象在IE11中已经不再支持了. IE中有三种不同版本的XHR对象MSXML2.XMLHTTP.MSXML2.XMLHTTP.3.0.MSXML2.XMLHTTP.6.0,所以可以通过一下函数创建一个兼容所有浏览器的XHR: function createXHR() { if(typeof XMLHttpRequest

基于 HTTP 请求拦截，快速解决跨域和代理 Mock

近几年,随着 Web 开发逐渐成熟,前后端分离的架构设计越来越被众多开发者认可,使得前端和后端可以专注各自的职能,降低沟通成本,提高开发效率. 在前后端分离的开发模式下,前端和后端工程师得以并行工作.当遇到前端界面展示需要的数据,而后端对应的接口还没有完成开发的情况时,需要一个数据源来保证前端工作的顺利进行. 今天这篇文章,我们会介绍几种常见的方法和其中存在的问题,并提出如何基于HTTP 请求拦截,快速解决跨域和代理 mock 问题的方案. 常见方法及问题请求 mock 服务器最常规的做法是

js一些梳理

浏览器组成 1.Shell部分2.内核内核的组成 1.渲染引擎负责页面显示 2.JS引擎 3. 其他模块主流内核介绍 >> * Trident(IE内核) >> * Gecko(火狐FireFox内核) >> * Webkit(苹果Safari内核) >> * Presto(欧朋Opera内核) >> * Webkit的分支Blink内核(谷歌Chrome内核) JS引擎---Chrome浏览器,使用新的JS引擎V8,可以直接把JS代码转换为机

CORS跨域与Nginx反向代理跨域优劣对比

最近写了一些关于前后端分离项目之后,跨域相关方案的基本原理和常见误区的帖子,主要包括CORS和Nginx反向代理.这两种方案项目中都有在用,各有优缺,关于具体使用哪种方案,大家的观点也不大一致,本文主要就此展开一下,从前后端及服务器配置.安全性.移植灵活性.扩展性等方面详细对比一下两种方案的优缺,以便于后期在方案选型上对大家有所帮助. 前端配置 CORS方案:跨域时部分浏览器默认不携带cookie,因此为了携带cookie需要设置一下xmlhttprequest的withCrendetails属

Ajax提交进度显示实例

概述:ajax提交比较大的文件的时候,我们希望能够看到它上传的进度,代码放下面了. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>XMLHttpRequest 上传文件进度条示例</title> </head> <body> <progress id="upload_progress" val

angular $http服务详解

它是对原生XMLHttpRequest对象的简单封装, 这个方法会返回一个promise对象,具有sccess和error两个方法. 当然,我们也可以在响应返回时用then 方法来处理,会得到一个特殊的参数,代表了对象的成功或失败信息, 或者可以使用success和error回调代替. $http({ url:url, //请求的url路径 method:method, //GET/DELETE/HEAD/JSONP/POST/PUT params:params , //转为 ?param1

angularjs中的$http详解

语法: 要将区别先弄清$http服务,它是对原生XMLHttpRequest对象的简单封装,是只能接受一个参数的方法, 这个方法会返回一个promise对象,具有sccess和error两个方法.当然,我们也可以在响应返回时用then 方法来处理,会得到一个特殊的参数,代表了对象的成功或失败信息,或者可以使用success和error回调代替. $http( ).then(function success(resp){ //响应成功时调用,resp是一个响应对象 },function erro

Python开发之AJAX全套

概述对于WEB应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上. 1.传统的Web应用一个简单操作需要重新加载全局数据 2.AJAX AJAX,Asynchronous JavaScript and XML (异步的JavaScript和XML),一种创建交互式网页应用的网页开发技术方案. 异步的JavaScript: 使用 [JavaScript语言] 以及相关[浏览器提供类库] 的功能向服务端

原生XMLHttpRequest

热门专题