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

来源：互联网发布：两组数据找相同的差异编辑：程序博客网时间：2024/05/30 23:35

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

0 0