zoukankan      html  css  js  c++  java
  • ajax Class

    /************************************************************************
    //封装ajax
    	首先一个xhr自执行,创建一个xmlhttprequest的对象.这里的对象,兼容IE和W3C
    		obj 是一个键值对,
    					method 	: get或者post
    					async  	: false同步, true异步.(一般都有true)
    					success	: function() {}, 成功返回的回调函数, 参数是服务器返回的值
    					data 	: 一个键值对,向服务器发送的数据.
    例子: 
    	$sy().ajax({
    		method : 'get',
    		url : 'demo.php',
    		data : {
    			'name' : 'Lee',
    			'age' : 100
    		},
    		success : function (text) {
    			alert(text);
    		},
    		async : true
    	});
    
    ajax执行顺序是,open,send, 接受数据
    	
    	xhr.readyState == 4             4,完成接受到了全部数据,可以执行success
    						0,维初始化,没有调用open
    						1,启动,调用了open,但为调用send
    						2,调用了send,但未接受响应.
    						3,接收到部分数据的相应.
    
    
    	shr.status == 	200 OK, 
    					400,语法错误导致服务器不识别
    					401,请求需要用户认证
    					404,指定的url服务器找不到.
    					500,服务器的意外错误.
    
    ************************************************************************/
    
    Osye.prototype.ajax  = function (obj) {
    	var xhr = (function () 
    	{
    		if (typeof XMLHttpRequest != 'undefined') 
    		{
    			return new XMLHttpRequest();
    		} 
    		else if (typeof ActiveXObject != 'undefined') 
    		{
    			var version = [ 'MSXML2.XMLHttp.6.0',		//这三个是兼容低版本的IE
    							'MSXML2.XMLHttp.3.0',
    							'MSXML2.XMLHttp'];
    
    			for (var i = 0; version.length; i ++) 
    			{
    				try {
    					return new ActiveXObject(version[i]);
    				} catch (e) {
    					//跳过
    				}	
    			}
    		} 
    		else 
    		{
    			throw new Error('sorry, your browser is not support ajax, please change other browser. thanks.');
    		}
    	})();
    
    	if (obj.async == undefined) {	//如果没有传入async.默认是异步
    		obj.async = true;
    	}
    
    	obj.url = obj.url + '?rand=' + Math.random();	//加一个随机数,保证每次不一样.都可以返回
    	
    	obj.data = (function (data) {					//函数自执行,将传输的数据,赋值给url字符串.
    		var arr = [];
    		for (var i in data) {
    			arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
    		}
    		return arr.join('&');					//为键值对之间加入&,保持键值对的可识别性.
    	})(obj.data);		
    
    	if (obj.method === 'get'){		//将数据,添加到url后面.
    		obj.url += obj.url.indexOf('?') == -1 ? '?' + obj.data : '&' + obj.data;
    		// alert(obj.data);		//测试键值对
    	} 	
    
    	xhr.open(obj.method, obj.url, obj.async);		//发送请求类型,method,方法,url链接,async是否同步.
    
    	if (obj.async === true) {			     //异步事件,onreadystatechange.
    		xhr.onreadystatechange = function () {
    			if (xhr.readyState == 4) {	     //成功返回.
    				callback();
    			}
    		};
    	}
    
    	if (obj.method === 'post') {		 //post方法
    		xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    		xhr.send(obj.data);	
    	} 
    	else {			          //get,数据已经发出去了.在浏览器的网址输入栏里
    		xhr.send(null);
    	}
    
    	if (obj.async === false) 	     //同步,就直接会回调
    	{
    		callback();
    	}
    
    	function callback() {
    		if (xhr.status == 200) 					//200成功返回.
    		{
    			obj.success(xhr.responseText);			//回调传递参数
    		} 
    		else
    		{
    			//获取数据错误,打出错误代号和错误信息.
    			alert('To get the data error! Error code' + xhr.status + ',Error message:' + xhr.statusText);
    		}	
    	}
    }
    

     

  • 相关阅读:
    Spring,SpringMVC,MyBatis,Hibernate,Servlet的生命周期,jsp有哪些内置对象,Tomcat,Cookie和Session的作用以及区别,oracle,MYSQL等面试题总结
    webpack配置react--ts项目
    防抖(debounce)和节流(throttle)
    js~eventLoop 事件循环
    在Vue 项目中使用echarts
    JS
    ImmuableJS 简单入门用法
    Redux-小案例-加一操作
    Oberver.js
    react-jsx语法
  • 原文地址:https://www.cnblogs.com/hgonlywj/p/4868941.html
Copyright © 2011-2022 走看看