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

最新推荐文章于 2022-06-02 13:32:42 发布

3个女人一场戏

最新推荐文章于 2022-06-02 13:32:42 发布

阅读量428

点赞数

本文链接：https://blog.csdn.net/hfuuhgcc/article/details/86720724

版权

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