zoukankan      html  css  js  c++  java
  • 手写js实现ajax功能(转)

    自从javascript有了各种框架之后,比如jquery,使用ajax已经变的相当简单了。但是有的项目不需要加载jquery这种庞大的js插件,只需要实现ajax即可。所以我们就需要自己用原生JS实现ajax

    ajax:一种请求数据的方式,不需要刷新整个页面;

    ajax的技术核心是 XMLHttpRequest 对象;

    ajax 请求过程:创建 XMLHttpRequest 对象、连接服务器、发送请求、接收响应数据;

    <script type="text/javascript">
    //通过createXHR()函数创建一个XHR对象:
    function createXHR() {
    	if (window.XMLHttpRequest) {	//IE7+、Firefox、Opera、Chrome 和Safari
    		 return new XMLHttpRequest();
    	} else if (window.ActiveXObject) {   //IE6 及以下
    		var versions = ['MSXML2.XMLHttp','Microsoft.XMLHTTP'];
    		for (var i = 0,len = versions.length; i<len; i++) {
    			try {
    				return new ActiveXObject(version[i]);
    				break;
    			} catch (e) {
    				//跳过
    			}	
    		}
    	} else {
    		throw new Error('浏览器不支持XHR对象!');
    	}
    }
    //封装ajax,参数为一个对象
    function ajax(obj) {
    	var xhr = createXHR();	//创建XHR对象
    	//通过使用JS随机字符串解决IE浏览器第二次默认获取缓存的问题
    	obj.url = obj.url + '?rand=' + Math.random();
    	obj.data = params(obj.data);  //通过params()将名值对转换成字符串
    	//若是GET请求,则将数据加到url后面
    	if (obj.method === 'get') {
    		obj.url += obj.url.indexOf('?') == -1 ? '?' + obj.data : '&' + obj.data; 
    	}
    	if (obj.async === true) {   //true表示异步,false表示同步
    		//使用异步调用的时候,需要触发readystatechange 事件
    		xhr.onreadystatechange = function () {
    			if (xhr.readyState == 4) {   //判断对象的状态是否交互完成
    				callback();		 //回调
    			}
    		};
    	}
    	//在使用XHR对象时,必须先调用open()方法,
    	//它接受三个参数:请求类型(get、post)、请求的URL和表示是否异步。
    	xhr.open(obj.method, obj.url, obj.async);
    	if (obj.method === 'post') {
    		//post方式需要自己设置http的请求头,来模仿表单提交。
    		//放在open方法之后,send方法之前。
    		xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    		xhr.send(obj.data);		//post方式将数据放在send()方法里
    	} else {
    		xhr.send(null);		//get方式则填null
    	}
    	if (obj.async === false) {  //同步
    		callback();
    	}
    	function callback() {
    		if (xhr.status == 200) {  //判断http的交互是否成功,200表示成功
    			obj.success(xhr.responseText);			//回调传递参数
    		} else {
    			alert('获取数据错误!错误代号:' + xhr.status + ',错误信息:' + xhr.statusText);
    		}	
    	}
    }
    //名值对转换为字符串
    function params(data) {
    	var arr = [];
    	for (var i in data) {
    		//特殊字符传参产生的问题可以使用encodeURIComponent()进行编码处理
    		arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
    	}
    	return arr.join('&');
    }
    </script>
    

      

      示例:

    <script src="ajax.js"></script>
    <script>
    var deng= document.getElmentsById(“btn”)[0];
    deng.onclick = function(){
    var jr= document.getElmentsById(“btn”)value;
    var pwd= document.getElmentsById(“btn”)value;
    }
    ajax({
    	method : 'post',
    	url : 'demo.php',
    	data : {
    		name : jr,
    		pwd:pwd
    	},
    	success : function (message) {
    		alert(message);
    	},
    	async : true
    });
    </script>
    

      

      

  • 相关阅读:
    javaScript常用运算符和操作符总结
    JavaScript-基本语法和数据类型
    javascript基本特点,组成和应用
    常用布局-列宽度是固定宽度还是自适应
    web设计之无懈可击
    CSS布局定位基础-盒模型和定位机制
    Ubuntu(Linux)系统WPS文字不能输入中文如何解决
    ggplot2点图+线性趋势+公式+R2+p值
    GTEx数据库-TCGA数据挖掘的好帮手
    limma, edgeR, deseq2,genefilter计算差异R包的foldchange方法差别
  • 原文地址:https://www.cnblogs.com/gaojunshan/p/6377876.html
Copyright © 2011-2022 走看看