javascript中Ajax的简单封装

简介: javascript中Ajax的简单封装

 GET方式的在线:DEMO

 POST方式在线:DEMO

复制代码
// 1、封裝AJAX函數
function nativeAjax(option,success,error){
    // 定义domain,方便环境切换
    var domain='https://' + window.location.host + '/';
    var url=domain+option.urlStr;
    var type=option.ajaxType;
    var data=option.ajaxData;
    var xhrRequest=null;
    if(window.XMLHttpRequest){
        xhrRequest = new XMLHttpRequest();
    } else {
        xhrRequest = new ActiveXObject('Microsoft.XMLHTTP')
    }
    var str="";
    xhrRequest.open(type,url,true);
    if(type==="POST"&&data!=null){
        xhrRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=utf-8");
        for(var key in data){
            str+='&'+key+'='+data[key];
        }
str=str.slice(1); }else{
str=null;
} xhrRequest.onreadystatechange
=function(){ if(xhrRequest.readyState==4){ if(xhrRequest.status==200){ // 1.1、格式化返回的数据 var responseData=JSON.parse(xhrRequest.responseText); // 1.2、这里操作数据-------- success(responseData); }else{ // 1.3、没成功返回HTTP状态码 error(xhrRequest.status); } } } xhrRequest.send(str); } // 2、POST:定義請求參數 var postOption={ ajaxType:"POST", urlStr:"v2/html/broke/get_broke_ranked_info", ajaxData:{ "HTTP_USER_TOKEN":token, "HTTP_USER_UID":pfid, "anchor_pfid":anchor_pfid, "broke_pfid":pfid, "date":date } } // 3、调用AJAX nativeAjax(postOption,function(data){ // 3.1、请求成功回调 console.log(data); },function(error){ // 3.2、请求失败回调,返回HTTP状态码 console.log(error); }); //4、GET:定义请求参数 var getOption={ ajaxType:"GET", urlStr:"v2/html/broke/get_broke_ranked_info", ajaxData:null } Ajax(getOption,function(data){ // 成功函数 console.log(data); },function(error){ // 失败返回HTTP状态码 console.log(error); }); // 使用说明 // 一、option必须 option={ //1、ajaxType必须:"GET"或者"POST" ajaxType:"", //2、urlStr必须:"string类型" urlStr:"", //3、必须:POST时候为object{key:value},GET的时候直接为:null ajaxData:null } // 二、success请求成功回调必须 // 三:error请求失败回调必须
复制代码

 

其他:

关于xhrRequest.readyState请参考MDN:https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/readyState

目录
相关文章
|
6月前
|
前端开发 JavaScript
AJax(XHR+Get和Post+AJax的封装)
AJax(XHR+Get和Post+AJax的封装)
117 15
|
前端开发 数据安全/隐私保护
crypto-js中AES的加解密封装
文章介绍了如何在前端使用crypto-js库进行AES加密和解密,提供了加解密的函数封装示例,并演示了如何加密和解密字符串或对象。
920 1
crypto-js中AES的加解密封装
|
12月前
|
数据采集 前端开发 JavaScript
虎扑APP数据采集:JavaScript与AJAX的结合使用
虎扑APP数据采集:JavaScript与AJAX的结合使用
|
移动开发 前端开发 JavaScript
js之ajax |12-6
js之ajax |12-6
|
设计模式 JavaScript
JS发布订阅模式封装(纯手工)
发布订阅模式是JS常用的设计模式,在面试中也会经常遇到,以下是我的手写实现方式,经测试效果不错,小伙伴们们可以直接拷贝使用。
122 10
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第3天】前端开发中的异步基石:AJAX与Fetch。AJAX,使用XMLHttpRequest,处理跨域、回调地狱和错误处理。Fetch,基于Promise,简化请求,但需注意默认无跨域头和HTTP错误处理。两者各有优劣,理解其问题与解决策略,能提升前端应用的性能和用户体验。
449 24
|
JavaScript 前端开发 容器
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
346 2
|
JavaScript 前端开发 网络协议
|
JavaScript 前端开发 安全
js之AJAX
js之AJAX
119 0
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第9天】JavaScript进阶:AJAX与Fetch API对比。AJAX用于异步数据交换,XMLHttpRequest API复杂,依赖回调。Fetch API是现代、基于Promise的解决方案,简化请求处理。示例:`fetch('url').then(r => r.json()).then(data => console.log(data)).catch(err => console.error(err))`。注意点包括检查HTTP状态、错误处理、CORS、Cookie和超时。Fetch提高了异步代码的可读性,但需留意潜在问题。
342 0