您好,欢迎访问代理记账网站
移动应用 微信公众号 联系我们

咨询热线 -

电话 15988168888

联系客服
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

对http,ajax和json的理解,手写ajax的封装

HTTP

1、HTTP – 超文本传输协议

1.1 HTTP三个点:

  • 无连接: 限制每次连接至处理一个请求
  • 独立的: 客户端以及服务器指定传输的 MIME-type 类型,任何数据类型都可以通过 HTTP 发送 【content-type.pdf里就是mime-type类型】
  • 无状态: 指协议对于事物处理没有记忆能力。缺少状态信息,意味着后面数据必须重传【如果后续操作需要前面的信息,就必须重新传递】

1.2 请求方式:

  • GET: 相对不安全,数据传递量小【地址传输】,一般用于向服务器请求资源
  • POST: 相对安全,数据传输量较大,可以用于向服务器存储/更新/传递敏感信息
  • PUT: 一般用于更新资源
  • DELETE: 用于信息删除

1.3 HTTP 状态码

  • 401:无登录 没登录 无权限
  • 408:请求超时
  • 200:成功
  • 304:利用缓存 与200差不多,成功

AJAX
2.1 概念:

异步 JavaScript 和 XML 。是一种创建交互式网页应用的开发技术,是多个技术的组合。
【不用刷新整个页面就能更新当前页面的数据】

2.2 特点:不用刷新整个页面,就可以完成数据的更新【局部更新】

2.3 可用来做什么

  • 登录/注册用户名验证【是否存在可用】
  • 登录失败不跳转页面
  • 省市区的联动【三级联动】
  • 年月日的联动【三级联动】
  • 图片的延时加载

2.4 异步 与 同步

  • JS 的执行环境 - 单线程:只有一个线程,也就只能做一件事情,如果多个任务,就必须排队,如果前面的任务完成后,再执行下一个操作
  • 为解决这个问题:JS 将任务分为了同步与异步 提出了异步模式
  • 同步任务: 程序的执行顺序 与 代码顺序 有关
  • 异步任务: 每一个任务有一个或多个回调函数,前一个任务结束后,不是执行后一个任务而是执行回调函数,后一个任务也不会等待前一个任务完成,所以程序的执行顺序与排列顺序无关,哪一个任务先执行完毕是无法确认的。

接触到的异步操作

  • 计时器
  • 事件监听
  • 读写文件 js 内置模块
  • AJAX
  • 大多数的回调函数

2.5 AJAX 原理(步骤):

//第一步: 获取 HTTP【AJAX】 对象
const http;
if(window.XMLHttpRequest) { // chrome 为代表的现代浏览器
    //new 在实例化
    http = new XMLHttpRequest();
} else if(window.ActiveXObject) {   // IE 浏览器
    http = new ActiveXObject("Microsoft.XMLHTTP");
} else {
    console.log("当前浏览器不支持!");
};

   //第二步: 监听状态的改变
http.onreadystatechange = function() {
    if(http.readyState == 4 && http.status == 200 && http.status <= 300 || http.status == 304) {
        // 请求成功
    } else {
        console.log("请求失败!");
    }
}

//改进
http.onreadystatechange = function() {
    if(http.readyState == 4) {
        if(http.status == 200) {
            // 请求成功
        } else if(http.status == 401) {
            // 没有权限
        } else if(http.status == 404) {
            // 资源不存在
        } else if(http.status == 500) {
            // 服务器出错
        }
    } else {
        console.log("请求失败");
    }
}
 /*
 readyState 变化的步骤:
0:未初始化,即没有调用open()       --AJAX对象创建完毕
1:已经调用 open(),但是还没有调用 send()        --数据发送成功
2:已经调用 send(),但是还未收到响应        --原始数据接收
3:所有响应头都已经收到,但是响应体正在接收中;     --解析数据
4:完成,已经接受全部响应数据。     --解析完毕(代表真正解析完毕,调试完毕了)
 */


//第三步: 请求类型
http.open(请求类型,请求地址,同步或者异步);


//第四步: 发送请求
http.send(携带的请求的数据);
//例:http.send(data);

3、jQuery AJAX

/*
$.ajax({
    url: 请求地址,
    method:请求方式,1.9.0 版本之前用的 type,
    data: 发送给服务器的数据,键值对、字符串、对象,
    dataType: 预计服务器返回的数据类型(json,html文件,txt文件),【可以在此指定】
    contentType: 默认 application/x-www-form-urlencoded     --表单数据格式
    跨域的....相关设置
});

$.get();
$.post();

$(元素).load(); 请求一个 html 片段回来
*/

JSON

1、JSON 数据格式:---- 轻量化的数据交换格式。是 js 对象语法的子集。

2、语法格式

  1. 整个 JSON 使用大括号{}包裹
  2. 数据存储在键值对中,【注意:属性名必须加双引号】
  3. 值可以是任意值,null 字符串【必须加双引号】 布尔值 数字 数组 对象
  4. 键值对之间通过逗号分割
  5. JSON 绝对【没有注释】
  6. JSON 后缀名为 .json
    3、方法:
  • JSON.parse(jsonString); 将 json 字符串转为 json 对象
  • JSON.stringify(obj); 将 json 对象转为 json 字符串
const users = {
    "username": "jack",
    "userpass": "123456"
}
//转为字符串
const userStr = JSON.stringify(users);
console.log(typeof userStr);
console.log(userStr);
// 转为 JSON 对象
const userObj = JSON.parse(userStr);
console.log(userObj)

下方是一个封装好的AJAX调用方法(GET或POST),

/**
 * 
 * @param {封装的AJAX调用方法} options 
 * options {
 *  method:"POST", - GET或POST传输方式
    url:"http://xx.xx.xx.xx:8888/pub.getLogin", - 指向的url地址
    data:{identity:"MANAGER",account:"fairy",password:"123456"}, - 所需要传递的参数
 * }
 * @returns 
 */
function ajax (options) {
    //url表示接口地址,这里是完整地址,如果要动态拼接,前面地址一样后面地址不同也可以采用 如:"http://xx.xx.xx.xx:8888/" + options.url  这样的形式拼接地址
    let url = options.url
    const method = options.method.toLocaleLowerCase() || 'get'
    const async = options.async != false // default is true
    const data = options.data;
    const xhr = new XMLHttpRequest()
    if (options.timeout && options.timeout > 0) {
        xhr.timeout = options.timeout
    }
    return new Promise ( (resolve, reject) => {
        xhr.ontimeout = () => reject && reject('请求超时') //为什么前面没有显示出来 ? 
        // xhr.ontimeout = () => console.log('请求超时');//可以打印出来
        xhr.onreadystatechange = () => {
            if (xhr.readyState == 4) {
                if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                    // 接口连接成功时对数据的处理
                    // 先将返回的字符串转换为json格式
                    let result = JSON.parse(xhr.responseText)
                    // 如果接口返回有错误信息error则打印出error(对错误信息做处理,可以是提示,这里用的打印)
                    if(result.error) {
                        console.log(result.error)
                    } else {
                        // 如果接口返回没有错误提示而是返回正确数据时,则调用回调函数,返回正确信息,返回的信息也需要
                        resolve && resolve(result)
                    }
                } else {
                    // 接口连接失败时
                    reject && reject('请求失败')
                    console.log("接口连接失败")
                }
            }
        }
        xhr.onerror = err => reject && reject(err)
        let paramArr = []
        //如果为GET传输方式的时候 需要将数据拼接到url地址后
        if (method === 'get') {
            let encodeData
            if (data instanceof Object) {
                for (let key in data) {
                    // 参数拼接需要通过 encodeURIComponent 进行编码
                    paramArr.push( encodeURIComponent(key) + '=' + encodeURIComponent(data[key]) )
                }
                encodeData = paramArr.join('&')
            }
                 // 检测 url 中是否已存在 ? 及其位置
                const index = url.indexOf('?')
                if (index === -1) url += '?'
                else if (index !== url.length -1) url += '&'
                  // 拼接 url
                url += encodeData
        }
        xhr.open(method, url, async)
        // 判断传输方式为get还是post ,如果是get则send数据为null,如果为post则将数据转为json字符串传输,其中get的数据已经在上面做了处理
        if (method === 'get') xhr.send(null)
        else {
            // post 方式需要设置请求头
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=UTF-8')
            xhr.send(JSON.stringify(data))
        }
    } )
}

使用方法

//例子:调用ajax的方式
var option={
        method:"POST",//数据传输方式 GET/POST
        url:"http://xx.xx.xx.xx:8888/pub.getLogin",//接口地址
        data:{identity:"MANAGER",account:"fairy",password:"1234"},//传输参数
}
ajax(option).then((result) => {
        // 成功后的处理
        console.log("成功",result);
});

分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进