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

偏执的太偏执、 2022-08-21 13:50 201阅读 0赞

** 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);
    					}
    	            }
    	        });