封装ajax

不念不忘少年蓝@ 2021-09-02 05:48 425阅读 0赞

**初始化AJAX要有四步：**

1 初始化XHR对象

2 设置onreadystatechange事件

3 调用open方法

4 调用send方法

**onreadystatechange**

这是XHR对象的一个事件属性。

该事件会在每一个HTTP请求的不同阶段被触发。每一个阶段有不同的状态值。

xhr.readyState 表示不同的阶段的状态值 一共有5个值

0：未初始化

1：调用了open方法

2：响应头已经到达浏览器

3：已经接收到一部分数据

4：已经接收完所有的数据

每一次状态值的变化都会引起readystatechange事件的触发。

** open**

该方法用于打开TCP连接。

xhr.open(method, url, boolean);

method: HTTP请求的方式

url: HTTP请求的URL

boolean: 决定是否异步发送HTTP请求

**send方法**

该方法用于发送HTTP请求的具体内容 也可以理解为请求正文中的内容

因为GET请求没有请求正文，所以如果xhr.open("get", ……); 则send方法中不需要填写任何内容。

所以，只有在POST请求时，才会在send方法中填写内容。

xhr.send(data);

data: querystring字符串

**接收响应数据**

xhr.response、xhr.responseText 这两个属性用于获取后端返回的数据。

var Ajax = {
        /**
         *  get方法用于发送get请求
         *  @url 发送的目的地URL字符串
         *  @data 发送时携带的数据 可以是对象可以是query字符串 不可以省略
         *  @callback 发送之后的回调函数 函数中有一个参数 就是返回的数据对象
         * */ 
        get: function(url, data, callback) {
    
            // 定义变量
            var str = "";
    
            // 如果是对象 需要将对象转为query字符串  
            if (typeof data === "object") {
    
                // 假设data是 {a: 1, b: 2, c: 3, d: 4} 这样的对象
                for (var i in data) {
    
                    str += i + "=" + data[i] + "&";
                }
    
                // 将最后的&去掉 slice截取  左必右开 后面一个是负数 从后面数
                str = str.slice(0, -1);   
          
               
               //如果是query字符串 就直接使用
            } else if (typeof data === "string") {
                str = data;
            }
            
    
            var xhr = null;
    
            // 兼容性检测
            if (window.XMLHttpRequest) {
    
                xhr = new XMLHttpRequest();
    
            } else if (window.ActiveXObject) {
    
                xhr = new ActiveXObject("Microsoft.XMLHttp");
    
            } else {
                throw new Error("抱歉，您的浏览器不支持AJAX");
            }
    
            // 设置onreadystatechange事件
            xhr.onreadystatechange = function() {
    
                // 只在最后的时候也就是状态吗为4时 才执行代码
                if (xhr.readyState === 4 && xhr.status === 200) {
    
                    // 因为后续的逻辑是传递进来的 不是固定的 所以将后续的代码放在这里执行 
                    // 定义变量 获取后台给过来的数据responseText
    
                    var data = xhr.responseText;
    
                    // 获取后台给过来的数据responseText 转为对象
    
                    var obj = JSON.parse(data);
              
                    callback(obj);
                }
            }
    
            // 调用open方法  str是query字符串
            xhr.open("get", url + "?" + str, true);
    
            // 调用send方法
            xhr.send();
        },
        post: function(url, data, callback) {
            // 定义变量
            var str = "";
    
            // 如果是对象 需要将对象转为query字符串  
            if (typeof data === "object") {
                for (var i in data) {
                    str += i + "=" + data[i] + "&";
                }
                // 将最后的&去掉
                str = str.slice(0, -1);   
                  
               // 如果是query字符串 直接用
            } else if (typeof data === "string") {
                str = data;
            }
            
          
            var xhr = null;
    
            // 兼容性检测
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else if (window.ActiveXObject) {
    
                xhr = new ActiveXObject("Microsoft.XMLHttp");
    
            } else {
    
                throw new Error("抱歉，您的浏览器不支持AJAX");
            }
            // 设置onreadystatechange事件
            xhr.onreadystatechange = function() {
    
                // 只在最后的时候也就是状态吗为4时 才执行代码
                if (xhr.readyState === 4 && xhr.status === 200) {
    
                    // 因为后续的逻辑是传递进来的 不是固定的 所以将后续的代码放在这里执行 
                    // 定义变量
                    var data = xhr.responseText;
    
                    // 转为对象
                    var obj = JSON.parse(data);
                    callback(obj);
                }
            }
            // 调用open方法
            xhr.open("post", url , true);
    
            // 将AJAX发送的内容伪装成表单 (可有可无)
            xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded; chartset=utf-8");
    
            // 调用send方法  因为是post 将juery数据放入请求正文中
            xhr.send(str);
        }
    }
    
    
    // 使用时： Ajax.get(method,data，callback); 希望发出get请求
    // 使用时： Ajax.post(method,data，callback); 希望发出post请求

发表评论取消回复

表情：

评论列表（有 0 条评论，425人围观）

还没有评论，来说两句吧...

相关阅读

相关封装ajax

封装原则把可能会变动的内容,都给弄参数,让用户传递进来 function aa({ url,type='get',async=true,data,success,e

╰+攻爆jí腚メ/ 2022年12月20日 02:49/ 0 赞/ 86 阅读

相关 Promise封装ajax

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

我不是女神ヾ/ 2022年10月11日 00:46/ 0 赞/ 178 阅读

相关 ajax封装框架,封装自己的Ajax框架

Ajax技术就是利用javascript和xml实现异步交互的功能。首先先来介绍一下Ajax相关知识点一、Ajax对象的创建 1、创建Ajax对象的方式 a、第一种

柔情只为你懂/ 2022年09月03日 15:24/ 0 赞/ 211 阅读

相关 AJAX封装

function ajax({type,url,data,dataType}){ return new Promise(function(resolve)

Bertha 。/ 2022年06月04日 08:57/ 0 赞/ 201 阅读

相关 AJAX封装

ajaxutils.js // 创建request对象 function createXMLHttpRequest() { try {

Dear 丶/ 2022年06月04日 05:57/ 0 赞/ 186 阅读

相关时间格式化封装、ajax封装

1、时间格式化 Date.prototype.format=function(pattern){//日期格式化 var returnValue=patter

旧城等待，/ 2022年05月14日 14:04/ 0 赞/ 163 阅读

相关 ajax封装

封装js: $.conf = { tip:function(){ }, surl:function(url)

亦凉/ 2022年05月14日 02:05/ 0 赞/ 226 阅读

相关 ajax封装2

请求设置时间限制 1 (function (window) { 2 function AjaxTool() { 3 }

谁借莪１个温暖的怀抱￠/ 2021年11月11日 00:24/ 0 赞/ 279 阅读

相关 promise封装ajax

关于promise使用时的几点： 1. 使用方法：先创建一个promise对象new Promise(),根据业务需求判断执行成功或失败，成功调用resovle(),

水深无声/ 2021年10月23日 21:26/ 0 赞/ 460 阅读

相关封装ajax

初始化AJAX要有四步： 1 初始化XHR对象 2 设置onreadystatechange事件 3 调用open方法 4 调用send方法 onread

不念不忘少年蓝@/ 2021年09月02日 05:48/ 0 赞/ 426 阅读