原生js实现Ajax请求
2018-02-16 23:07
573 查看
总的来说,Ajax是与服务器交换数据并更新部分网页的艺术,在不重新加载整个网页的情况下,异步请求数据并刷新页面。举一个小的例子:Goole搜索页面。当用户在输入框输入关键字的时候,JavaScript会把这些字符发送到服务器,然后服务器返回一个搜索建议的列表。
创建整个对象:
这里有个版本的差异,IE5和IE6使用ActiveX对象。不同的浏览器使用不同的对象。
向服务器发送请求
如果需要将请求发送到服务器,我们使用XMLHttpRequest对象的open方法和send方法。
open方法规定请求的类型,URL以及异步处理请求。
method:请求的类型:GET/POST
url:文件在服务器上的位置
async:true(异步 ),false(同步)
那到底是使用GET还是使用POST
GET比POST要快,也更简单,并且在大部分情况下都能用。
但是在某些情况下,POST也有一定的好处。
无法使用缓存文件(更新服务器上的文件或者数据库)
向服务器发送大量的数据(POST没有数据量限制)
发送包含未知字符的用户输入的时候,POST比GET更稳定也更可靠
注意:有些时候GET请求得到的缓存的结果,为了避免这个情况,有必要向URL添加信息。
通过GET方法发送信息,需要向URL添加信息
需要像HTML表单那样POST数据,请使用setRequestHeader()添加HTTP头,然后在send方法中规定希望发送的数据。
虽然XHR主要用来从服务器获取数据,但它同样能用于把数据传回服务器。数据可以用GET或者POST的方式传回来,包括任意数量的HTTP头信息,这给你很大的灵活性,当你要传回的数据超出浏览器的最大URL尺寸 限制时XHR特别有用。这种情况下,你可以使用POST方法回传数据。
服务器的响应
如果需要获得来自服务器的响应,请使用XMLHttpRequest对象的responseText或者是responseXML属性。
responseText:获得字符串形式的响应数据
responseXML:获得XML形式的响应数据
分别对其进行解析。
原生的Ajax
原生的Ajax请求离不开XHR对象,即XMLHttpRequest对象。所有现代浏览器都内建有这个对象。创建整个对象:
var xhr = new XMLHttpRequest();
这里有个版本的差异,IE5和IE6使用ActiveX对象。不同的浏览器使用不同的对象。
var xmlhttp; if(window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); }else{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
向服务器发送请求
如果需要将请求发送到服务器,我们使用XMLHttpRequest对象的open方法和send方法。
xmlhttp.open("GET","text.txt",true); xmlhttp.send();
open方法规定请求的类型,URL以及异步处理请求。
method:请求的类型:GET/POST
url:文件在服务器上的位置
async:true(异步 ),false(同步)
那到底是使用GET还是使用POST
GET比POST要快,也更简单,并且在大部分情况下都能用。
但是在某些情况下,POST也有一定的好处。
无法使用缓存文件(更新服务器上的文件或者数据库)
向服务器发送大量的数据(POST没有数据量限制)
发送包含未知字符的用户输入的时候,POST比GET更稳定也更可靠
注意:有些时候GET请求得到的缓存的结果,为了避免这个情况,有必要向URL添加信息。
xmlhttp.open("GET","text.txt?t="+Math.random(),true); xmlhttp.send();
通过GET方法发送信息,需要向URL添加信息
xmlhttp.open("GET","text.txt?fname=bill&lname=gates",true); xmlhttp.send();
需要像HTML表单那样POST数据,请使用setRequestHeader()添加HTTP头,然后在send方法中规定希望发送的数据。
xmlhttp.open("POST","ajax_text.php",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=bill&lname=gates");
虽然XHR主要用来从服务器获取数据,但它同样能用于把数据传回服务器。数据可以用GET或者POST的方式传回来,包括任意数量的HTTP头信息,这给你很大的灵活性,当你要传回的数据超出浏览器的最大URL尺寸 限制时XHR特别有用。这种情况下,你可以使用POST方法回传数据。
var url = '/data.php'; var params = [ 'id=88555', 'limit=20' ]; var req = new XMLHttpRequest(); req.onerror = function(){ //出错 } req.onreadystatechange = function(){ if(readyState == 4){ //SUCCESS } } req.open("POST",url,true); req.setRequestHeader('Content-type',"application/x-www-form-urlencoded"); req.setRequestHeader('Content-length',params.length); req.send(params.join('&'));
服务器的响应
如果需要获得来自服务器的响应,请使用XMLHttpRequest对象的responseText或者是responseXML属性。
responseText:获得字符串形式的响应数据
responseXML:获得XML形式的响应数据
分别对其进行解析。
相关文章推荐
- 原生js实现ajax 发送post请求
- 原生JS实现Ajax跨域请求flask响应内容
- 原生JS实现Ajax跨域请求flask响应内容
- 原生JS实现Ajax的GET POST请求
- 原生js封装ajax,实现跨域请求
- 原生JS写Ajax的请求函数
- js实现ajax请求
- 基于原生JS实现仿JQ中的Ajax
- 习惯了使用jQuery的ajax方法,看看原生js使用xmlhttpRequest实现ajax请求
- jQuery实现,动态自动定位弹窗。JS分页,Ajax请求
- js原生ajax请求get post笔记
- 原生JS实现Ajax通过GET方式与PHP进行交互操作示例
- js 实现对ajax请求面向对象的封装
- 原生JS实现ajax上传文件并显示进度条
- 原生js实现ajax的文件异步提交功能、图片预览功能.实例
- 原生JS的ajax处理json数据格式的异步请求完整例子
- jQuery实现,动态自动定位弹窗。JS分页,Ajax请求
- [日常记录]原生JS写Ajax的请求函数
- 原生js实现ajax方法(超简单)
- 原生JS写Ajax的请求函数功能