原生Ajax的实现
来源:互联网 发布:数据库前置库怎么配置 编辑:程序博客网 时间:2024/06/06 21:44
列表内容
XMLHttpRequest
实现ajax之前必须要创建一个 XMLHttpRequest 对象。如果不支持创建该对象的浏览器,则需要创建 ActiveXObject,具体方法如下:
var xmlHttp; function createxmlHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp=new XMLHttpRequest(); } }
- 使用上面创建的xmlHttp实现最简单的ajax get请求:
function doGet(url){ // 注意在传参数值的时候最好使用encodeURI处理一下,以防出现乱码 createxmlHttpRequest(); xmlHttp.open("GET",url); xmlHttp.send(null); xmlHttp.onreadystatechange = function() { if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) { alert('success'); } else { alert('fail'); } }}
- 使用上面创建的xmlHttp实现最简单的ajax post请求:
function doPost(url,data){ //注意在传参数值的时候最好使用encodeURI处理一下,以防出现乱码 createxmlHttpRequest(); xmlHttp.open("POST",url); xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlHttp.send(data); xmlHttp.onreadystatechange = function() { if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) { alert('success'); } else { alert('fail'); } } }
- 方法2:原生js实现ajax方法
function ajax(){ var ajaxData = { type:arguments[0].type || "GET", url:arguments[0].url || "", async:arguments[0].async || "true", data:arguments[0].data || null, dataType:arguments[0].dataType || "text", contentType:arguments[0].contentType || "application/x-www-form-urlencoded", beforeSend:arguments[0].beforeSend || function(){}, success:arguments[0].success || function(){}, error:arguments[0].error || function(){} } ajaxData.beforeSend() var xhr = createxmlHttpRequest(); xhr.responseType=ajaxData.dataType; xhr.open(ajaxData.type,ajaxData.url,ajaxData.async); xhr.setRequestHeader("Content-Type",ajaxData.contentType); xhr.send(convertData(ajaxData.data)); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if(xhr.status == 200){ ajaxData.success(xhr.response) }else{ ajaxData.error() } } } } function createxmlHttpRequest() { if (window.ActiveXObject) { return new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { return new XMLHttpRequest(); } } function convertData(data){ if( typeof data === 'object' ){ var convertResult = "" ; for(var c in data){ convertResult+= c + "=" + data[c] + "&"; } convertResult=convertResult.substring(0,convertResult.length-1) return convertResult; }else{ return data; } }
- 使用方法跟jquery的ajax差不多
ajax({ type:"POST", url:"ajax.php", dataType:"json", data:{"val1":"abc","val2":123,"val3":"456"}, beforeSend:function(){ //some js code }, success:function(msg){ console.log(msg) }, error:function(){ console.log("error") } })
阅读全文
0 0
- 原生Ajax的实现
- 原生ajax的实现
- 基于原生javascript的ajax实现
- 原生的javascript实现ajax技术
- JavaScript实现原生ajax的方法
- 原生JS实现AJAX的思路
- 原生的js实现ajax请求
- 原生JavaScript实现Ajax的使用
- 原生JS实现的AJAX方法、JSONP
- 原生js和jQuery的AJAX实现
- 原生ajax的实现+websocket理解
- 原生Ajax的原理和实现
- 原生JavaScript实现AJAX
- 原生js实现Ajax
- 原生js实现ajax
- 原生JS实现Ajax
- 原生js实现ajax
- 原生javaScript实现Ajax
- 数组与矩阵---数组中未出现的最小正整数
- 来到CSDN
- 【Shiro】Shiro从小白到大神(一)-Shiro入门
- PCA 降维算法详解 以及代码示例
- Java进阶(六)理解实现对象序列化
- 原生Ajax的实现
- 远程虚拟康复训练在骨科中的应用--笔记
- IP地址中的保留地址
- 开车最怕这些视野盲区 给你破解答案
- 【转】Android Studio 如何手动更新到最新的gradle,拒绝等待
- python 基于jieba模块进行中文分词词频统计
- SpringBoot 学习记录(六)- maven 打war 包并部署tomcat
- Spark开发-transformations操作
- C# 开源控件DockPanel 使用心得