JQuery Ajax的实现原理以及二次封装通用的Ajax

 Ajax 的全称是Asynchronous JavaScript and XML 异步的javaScript和XML

AJax所涉及到得技术:

   1.使用CSS和XHTML来表示。

   2. 使用DOM模型来交互和动态显示。

   3.使用XMLHttpRequest来和服务器进行异步通信。(核心)

   4.使用javascript来绑定和调用。

Ajax原理:Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面

/**
	 * 封装ajax
	 * @param url 请求地址
	 * @param data 发送到服务器端的数据 如:{"userName": xx, "age": 12}
	 * @param async 默认值: true。默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。
     *       注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
     * @param type 请求的方式 POST或GET,默认GET
     * @param dateType 预期服务器返回的数据类型,常用的如:xml、html、json、text
	 */
	this.ajax = function (url,data,async,type,dateType{
		    async = (async==null || async=="" || typeof(async)=="undefined")? "true" : async;
	        type = (type==null || type=="" || typeof(type)=="undefined")? "post" : type;
	        dataType = (dataType==null || dataType=="" || typeof(dataType)=="undefined")? "json" : dataType;
	        data = (data==null || data=="" || typeof(data)=="undefined")? {"message": "Data is Null" : data;
	        $.ajax({
	        	async: async,
	            data: data,
	            url: url,
	            dataType: dataType,
	            success: function(data,textStatus,jqXHR){
	        		if(data.hasOwnProperty("message")){
						data = data.message
					}
					if(data.status){
						if(data.status == 1 || data.status == 200){
							toastr.success(data.statusText);
						}else{
							toastr.error(data.statusText);
						}
					}
					if(options.afterOperation){
						options.afterOperation(data, textStatus,jqXHR);
					}
	            }
	            },
	            error: function(e,textStatus,jqXHR){
	            	if(!(data.status == 200)){
						alert("服务器异常");
					}
					if(options.afterOperation){
						options.afterOperation(data, textStatus,jqXHR);
					}
	            }
	        });


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值