使用XMLHttpRequest对象完成原生的AJAX请求

【使用XMLHttpRequest对象完成原生的AJAX请求】的更多相关文章

使用XMLHttpRequest对象完成原生的AJAX请求

1.大家眼中的Ajax 说到Ajax,只要有过前端开发经验的童鞋一定都不陌生,大都知道它就是一种与后端之间的通信技术,通过这个神奇的家伙,我们不用像传统表单那样填完信息一点提交就呼啦呼啦跳转了.Ajax最大的一个优势就是通过异步请求达到局部刷新的目的,这样就大大提高了用户体验.可是Ajax就是我们平时使用得最多的jQuery中的$.ajax()吗?答案肯定不是的,那我们就来一起看看原生的Ajax究竟长啥样把! 2.获取XMLHttpRequest 2.1 为什么要获取XMLHttpRequest…

原生js ajax请求

什么是ajax AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新. 这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新,也就是我们所说的局部更新. 简单示例 function play(){ var ajax = new XMLHttpRequest(); ajax.open("get","https://api.apiopen.top/recommendPoetry"); ajax.s…

H5 FormData对象的使用——进行Ajax请求并上传文件

XMLHttpRequest Level2 添加了一个新的接口——FormData .[ 主要用于发送表单数据,但也可以独立使用于传输键控数据.与普通的Ajax相比,它能异步上传二进制文件 ] 利用FormData对象,可通过js用一些键值对来模拟一系列表单控件,还可以使用XMLHttpRequest的send()方法异步提交表单. 首先,在之前的“前后台交互之传参方式”中讲了传统的form表单提交的方式(表单序列化),它只适用于传递一般参数,上传文件的文件流是无法被序列化并传递的.所以,使用F…

PHP. 02®. Ajax异步处理、常见的响应状态、XMLHttpRequest对象及API、ajax的get/post方法、

异步对象 a)创建异步对象 b)设置请求的url等参数 c) 发送请求 d)注册时间 e)在注册的事件中获取返回的内容并修改页面显示的内容布尔类型不能直接用echo输出常见的响应状态 Ajax概念在浏览器中,我们也能够不刷新页面,通过ajax的方式去获取一些新的内容,类似网页有微博,朋友圈,邮箱等单词解释: Asynchronous Javascript And XML(异步JavaScript和XML), 他并不是凭空出现的新技术,而是对于现有技术的结合:核心是js对象XMLHttp…

原生的ajax请求

原生ajax请求的步骤: get 请求: 1,创建一个xhr变量 var xhr=new XMhttpRequest(); 2,设置请求方式和请求地址 xhr.open('url','http//192.168.213.77:5000/login?username=" + str+ "&password=" + str') 3,把请求发出去: xhr.send(); 4,监听readystatechage xhr.onreadystatechange = functi…

原生的ajax请求----（播放托管到爱奇艺上的视频）

播放视频 $(function(){ //视频播放 $('.play-icon').click(function () { $.ajax({ type:"get", url: "http://openapi.iqiyi.com/api/file/urllist?access_token=2.6bafb158d49f9a17119b194d603eb3f9&file_id=5164f80e1c0d478faafd15c9e338bacf", async:tru…

原生JS Ajax 请求

var username = document.getElementById('username').value; var password = document.getElementById('password').value; // 第一步:创建对象 var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject("Microsoft.XMLHTTP&q…

【转】分享JavaScript监听全部Ajax请求事件的方法

若Ajax请求是由jQuery的$.ajax发起的,默认情况下可以使用 jQuery的Global Ajax Event Handlers监听到Ajax事件,然而我遇到的却是用原生JavaScript发起的Ajax请求,所以这种方法行不通. 然后呢,还有其他方法,比如说 Pub/Sub,但是这个发起请求的 js 代码我是无法改动的,也就不存在向代码里添加 publish 的问题.同理,jQuery 的 .bind 和 .trigger 也无法使用. 最后,决定使用直接 override XMLH…

XMLHttpRequest对象解读

<!DOCTYPE html> <html> <body> <script> function reqListener () { console.log(this); console.log(this.getAllResponseHeaders()); console.log(this.responseText); } var params = "lorem=ipsum&name=binny"; var oReq = new XM…

js ajax 请求

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload = function() { var Obtn = document.querySelector('input'); Obtn.onclick = function(…

原生Ajax XMLHttpRequest对象

一.Ajax请求 - 现在常见的前后端分离项目中,一般都是服务器返回静态页面后浏览器加载完页面,运行script中的js代码,通过ajax向后端api发送异步请求获取数据,然后调用回调函数,将数据添加到页面上 1.1 JQuery封装后的ajax请求 - 注意:jQuery Ajax本质 XMLHttpRequest 或 ActiveXObject jQuery.get(...) 所有参数: url: 待载入页面的URL地址 data: 待发送 Key/value 参数. success: 载入…

【转载并整理】AJAX XmlHttpRequest对象详解

一. XMLHttpRequest由来及原生介绍 XMLHttpRequest(XHR)是一个API对象,其中的方法可以用来在浏览器和服务器端传输数据.这个对象是浏览器的js环境提供的.从XHR获取数据的目的是为了持续修改一个加载过的页面,XHR是Ajax设计的底层概念.XHR使用的协议不同于HTTP,不仅可以使用XML格式的数据,也支持JSON,HTML或者纯文本. WHATWG组织负责维护一个动态的XHR标准文档.W3C基于WHATWG标准创建了一个固定的规范. 历史 XMLHttpRequ…

原生js实现Ajax请求

总的来说,Ajax是与服务器交换数据并更新部分网页的艺术,在不重新加载整个网页的情况下,异步请求数据并刷新页面.举一个小的例子:Goole搜索页面.当用户在输入框输入关键字的时候,JavaScript会把这些字符发送到服务器,然后服务器返回一个搜索建议的列表. 原生的Ajax 原生的Ajax请求离不开XHR对象,即XMLHttpRequest对象.所有现代浏览器都内建有这个对象. 创建整个对象: var xhr = new XMLHttpRequest(); 这里有个版本的差异,IE5和IE6使…

Ajax中的XMLHttpRequest对象详解

XMLHttpRequest对象是Ajax技术的核心.在Internet Explorer 5中,XMLHttpRequest对象以ActiveX对象引入,被称之为XMLHTTP,它是一种支持异步请求的技术.后来Mozilla.Netscape.Safari.Firefox和其他浏览器也提供了XMLHttpRequest类,虽然这些浏览器都提供了XMLHttpRequest类,但它们创建XMLHttpRequest类的方法并不相同.XMLHttpRequest使我们可以使用JavaScript向…

详解AJAX核心 —— XMLHttpRequest 对象 (下)

继续上一篇的内容上一篇关于XMLHttpRequest 对象发送对服务器的请求只说到了用Get方式,没有说Post方式的.那是因为要说Post方式就需要先说另外一个东西,那就是DOM(Document Object Model)文档对象模型.JavaScript通过DOM读取.改变或者删除 HTML.XHTML 以及 XML中的元素,可以重构整个 HTML 文档.可以添加.移除.改变或重排页面上的项目,而且这样的操作会马上显示在页面上.另外,所有浏览器执行W3C 发布的 DOM 标准规范,DOM…

Ajax中的XMLHttpRequest对象详解(转)

XMLHttpRequest对象是Ajax技术的核心.在Internet Explorer 5中,XMLHttpRequest对象以ActiveX对象引入,被称之为XMLHTTP,它是一种支持异步请求的技术.后来Mozilla.Netscape.Safari.Firefox和其他浏览器也提供了XMLHttpRequest类,虽然这些浏览器都提供了XMLHttpRequest类,但它们创建XMLHttpRequest类的方法并不相同.XMLHttpRequest使我们可以使用JavaScript向…

通过XMLHttpRequest,ActiveXObject实现ajax请求

今天学习了原生的ajax请求.我将涉及到的ajax请求方法封装成了一个对象: var xhr={ getXHR:function(){ var XHR = null; if(typeof window.ActiveXObject != 'undefined'){ XHR = xhr.createActiveXObject(); }else{ XHR = xhr.createStandardXH…

$.ajax通用格式&&XMLHttpRequest对象属性和方法

$.ajax({ url: "", type: "POST", async: false, cache:false, //默认true data: {}, dataType: "json", //预期服务器返回的数据类型,可选:xml.html.script.json.jsonp.text beforeSend:function(XMLHttpRequest){ }, complete: function(XMLHttpRequest, text…

原生ajax 请求

什么是ajax AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新. 这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新,也就是我们所说的局部更新. 简单示例 function play(){ var ajax = new XMLHttpRequest(); ajax.open("get","https://api.apiopen.top/recommendPoetry"); ajax.s…

Ajax请求汇总（一）

刚开始结束Ajax请求的时候,那真的是迷迷糊糊,昏天暗地,通过学习的深入和翻阅各种资料.求助度娘,总结一下Ajax请求,与大家分享一下,希望能给学习Ajax的同学一些帮助,废话不多手,直接开始~~~ 一.Ajax请求的原理 1.原理:在Ajax请求中,html页面的中操作将通过Ajax引擎与服务器端进行通讯,然后将返回的结果提交到客户端页面的Ajax引擎,再由Ajax引擎来决定将服务器端返回数据插入到页面的指定位置.从而实现无需刷新页面的http请求. 看图: 2.Ajax请求的优点 a.当然最…

详解Ajax请求（二）——异步请求原理的分析

在上一文章里,我们分析了同步请求的原理.当浏览器向服务器发送同步请求时,服务处理同步请求的过程中,浏览器会处于等待的状态,服务器处理完请求把数据响应给浏览器并覆盖浏览器内存中原有的数据,浏览器重新加载页面并展示服务器响应的数据. 那么,有没有一种技术,可以让浏览器发送请求给服务器,服务器处理请求的过程中,浏览器不处于等待的状态,并且浏览器接收响应数据的同时不再重新加载整个页面,既请求发送之前的数据不丢失,又能实现页面的局部刷新呢?那就要用到ajax请求--异步请求模型,那么异步请求的原理是什么呢…

jquery ajax 请求参数详细说明及实例

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设置. async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求. 如果需要发送同步请求,请将此选项…

循环多次ajax请求

最近在做网页前端,其中有个功能按钮是从数据表格中同时删除多条数据,涉及到循环多次ajax请求但是老是出现一些请求被忽视的情况,应该是由于for循环在极短时间内被完成,所以第一次请求后的几次请求时,xmlhttprequest对象正在请求当中,就无法响应请求. 最后试验多次,决定每次循环都声名一个xmlhttprequest对象,这样就可以同时请求. 虽然成功了,但总觉得这样做不太好,也没想出其他方法~~…

javascript XMLHttpRequest对象全面剖析

转载:http://www.jb51.net/article/23175.htm 一. 引言异步JavaScript与XML(AJAX)是一个专用术语,用于实现在客户端脚本与服务器之间的数据交互过程.这一技术的优点在于,它向开发者提供了一种从Web服务器检索数据而不必把用户当前正在观察的页面回馈给服务器.与现代浏览器的通过存取浏览器DOM结构的编程代码(JavaScript)动态地改变被显示内容的支持相配合,AJAX让开发者在浏览器端更新被显示的HTML内容而不必刷新页面.换句话说,AJAX可…

用JS实现Ajax请求

AJAX核心(XMLHttpRequest) 其实AJAX就是在Javascript中多添加了一个对象:XMLHttpRequest对象.所有的异步交互都是使用XMLHttpServlet对象完成的.也就是说,我们只需要学习一个Javascript的新对象即可. 1 var xmlHttp = new XMLHttpRequest():(大多数浏览器都支持DOM2规范) 注意,各个浏览器对XMLHttpRequest的支持也是不同的!为了处理浏览器兼容问题,给出下面方法来创建XMLHttpReq…

全面剖析XMLHttpRequest对象

XMLHttpRequest对象是当今所有AJAX和Web 2.0应用程序的技术基础.尽管软件经销商和开源社团现在都在提供各种AJAX框架以进一步简化XMLHttpRequest对象的使用:但是,我们仍然很有必要理解这个对象的详细工作机制. 一. 引言异步JavaScript与XML(AJAX)是一个专用术语,用于实现在客户端脚本与服务器之间的数据交互过程.这一技术的优点在于,它向开发者提供了一种从Web服务器检索数据而不必把用户当前正在观察的页面回馈给服务器.与现代浏览器的通过存取浏览器DO…

关于IE浏览器 ajax 请求返回数据不对的问题

在使用ajax向后台发送请求的时候,在使用ie 进行调试的时候发现根据条件进行查询时,返回的数据与没有根据条件进行查询时数据相同,也就是条件没有发生作用. 经过同事的帮助发现ajax初始化设置时没有cache:false,ie发现走的是同一个函数,所以直接读了缓存数据. 现将ajax各参数说明放到这里,以备以后使用: url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请…