封装原生Ajax发送请求

(function(window){
    function AjaxTool(){}

    AjaxTool.ajaxRequest = function(params,successCallBack,errCallBack){
        /*
          获取传入的参数
        */

        //请求的类型
        let requestType = params[‘requestType‘] || ‘get‘;
        //请求的路径
        let url = params[‘url‘];
        //传入的数据
        let paramObj = params[‘paramObj‘];
        //延时请求的处理
        let timeout = params[‘timeout‘];

       //创建一个XMLHttpRequest对象,同时需要考虑兼容性问题
        let xhr;
        if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest();
        }else{
            xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);
        }

        // 转码,将网络请求进行URI的编码,将请求拿下来之后进行URI的解码,转码之后可以增强Ajax的健壮性
        let codeURI;

       //判断请求方式
        if(requestType.toLowerCase() === ‘get‘){
            codeURI = encodeURI(url+ ‘?‘ +getStrWithObject(paramObj));
            xhr.open(‘get‘,codeURI,true);
            xhr.send();
        }else if(requestType.toLowerCase() === ‘post‘){
            //获取请求体
            codeURI = encodeURI(getStrWithObject(paramObj));
            xhr.open(‘post‘,url,true);
            xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘);
            xhr.send(codeURI);
        }

        //监听服务器状态变化
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4){
                if(xhr.status === 200){
                    successCallBack(xhr);
                    //清除请求定时器
                    clearTimeout(timer);
                }else{
                    errCallBack();
                }
            }
        }

        //处理请求超时问题
        let timer;
        if(timeout > 0){
            timer = setTimeout(function(){
                //取消请求
                xhr.abort();
            },timeout);
        }
    };

    //获取随机数
    function getRandomStr(){
        return Math.random() + (new Date().getTime());
    }

    //将对象转为字符串
    function getStrWithObject(paramsObj){
        let rArr = [];
        // 遍历对象

        for(let key in paramsObj){
            let str = key + "=" +paramsObj[key];
            rArr.push(str);
        }

        //拼接随机数
        rArr.push(‘random=‘ + getRandomStr());

        //将数组转换为字符串,以&来做分割
        return rArr.join(‘&‘);
    }

    //通过window.AjaxTool就可以访问到AjaxTool方法,这样可以防止全局作用域的污染
    window.AjaxTool = AjaxTool;
})(window);

原文地址:https://www.cnblogs.com/zhang-jiao/p/10812037.html

时间: 2024-10-31 19:28:37

封装原生Ajax发送请求的相关文章

原生ajax的请求过程

原生ajax的请求过程 创建全平台兼容的XMLHttpRequest对象: function getXHR(){ var xhr = null; if(window.XMLHttpRequest) {// 兼容 IE7+, Firefox, Chrome, Opera, Safari xhr = new XMLHttpRequest(); } else if (window.ActiveXObject) { try { xhr = new ActiveXObject("Msxml2.XMLHTT

Ajax发送请求

1,什么是ajax? Asynchronous JavaScript and XML(当然现在xml已经由json代替): 主要是用于前后台的交互(表单提交已经被废弃): 使用场景:前台获取数据.表单的失焦验证: 2,如何在有服务的环境下使用ajax发送请求 1.创建ajax对象-xmlhttprequest对象:(分为两种类型) 在新版本的浏览器中:variable=new XMLHttpRequest(); 老版本的IE中:variable=new ActiveXObject("Micros

ajax对象。同步与异步及ajax发送请求

ajax对象的属性.方法 属性 readyState: Ajax状态码 * 0:表示对象已建立,但未初始化,只是 new 成功获取了对象,但是未调用open方法 1:表示对象已初始化,但未发送,调用了open方法,但是未调用send方法 2:已调用send方法进行请求 3:正在接收数据(接收到一部分),客户端已经接收到了一部分返回的数据 4:接收完成,客户端已经接收到了所有数据 * status :http响应状态码 200代表成功获取服务器端数据 404未找到页面等等…… statusText

使用原生ajax发送post请求完整案例

使用ajax发送数据实现前后台的交互,我想是web开发最基础的技能了.近来dz开发因为不兼容jquery,所以只能使用原生js发送数据,不想还遇到很多问题.在这里分析总结一下.先来一个使用ajax发送post表单数据的案例. <html> <head> <title> ajax发送post请求实例 </title> </head> <body> <form method="post" action="

Ajax_原生ajax写法、理解异步请求、js单线程+事件队列、封装原生ajax

1.原生Ajax 一定要理解Ajax出现的背景 Ajax通过url查询后端接口的数据,在前端做数据的解析和局部更新 1.隐藏帧iframe方式实现页面局部更新---只是为了比较好的用户体验 访问后台接口数据显示在iframe页面中显示,没有做主页面的刷新,但页面实际上也刷新了  看左上角的转圈圈了 2.Ajax异步请求,真正实现页面局部刷新,没有跳转,坐上角小圈圈没转 原生Ajax写法---注意ajax的缩写 3.服务器放回了xml数据格式 解析过程还是很麻烦的,所以这种数据格式很少用了. 4.

原生ajax的请求函数

ajax:一种请求数据的方式,不需要刷新整个页面:ajax的技术核心是 XMLHttpRequest 对象:ajax 请求过程:创建 XMLHttpRequest 对象.连接服务器.发送请求.接收响应数据: 下面简单封装一个函数,之后稍作解释 ajax({ url: "./TestXHR.aspx", //请求地址 type: "POST", //请求方式 data: { name: "super", age: 20 }, //请求参数 data

原生ajax异步请求基础知识

一.同步交互与异步交互的概念: * 同步交互:客户端向服务器端发送请求,到服务器端进行响应,这个过程中,用户不能做任何其他事情(只能等待响应完才能继续其他请求). * 异步交互:客户端向服务器端发送请求,直到服务器端进行响应,这个过程中,用户可以做其他任何事情(不等): 同步与异步的区别: * 同步交互 1.执行速度相对比较慢 2.响应的是完整的HTML页面 * 异步交互 1. 执行速度相对比较快 2. 响应的是部分数据 二.AJAX的概念:(Asynchronous JavaScript an

使用原生AJAX 发送异步请求实现 常用的用户登录效果

HTML部分 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>...</title> <style type="text/css"> .modal{ position:fixed; left:0;top:0;bottom:0;right:0; background:rgba(0,0,0,.2); display:

ajax 发送请求遇到的问题

1.Illegal invocation 处理方法: 红色字体标注的部分~ var formData = new FormData(); formData.append('imgs',"upload/fruit/284333BDBEFB481BB27C8E84FB7C0D82.jpg"); formData.append('reason',$('textarea').text()); $.ajax({ type : "post", url : "/api/