Ajax学习笔记

内容简介：Ajax学习笔记

在上一个外包项目中，因为用到了前后端分离的思路，所以都要通过Ajax来请求数据然后把数据渲染到页面上，一开始想过直接引用Jquery，但感觉就使用Jquery的Ajax函数，有点太浪费，所以就自己撸了一个Ajax函数。本文由浅入深，一步一步带你封装属于自己的Ajax库。

Ajax简介

• Asynchronous Javascript And XML （异步的JavaScript和XML）
• 它并不是一种单一的技术，而是有机利用一系列交互式网页应用相关的技术所形成的结合体
• Ajax是一种用于创建快速动态网页的技术。在前台与后台进行数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，实现局部更新。

1、优点

• 页面无刷新，用户体验好。
• 异步通信，更加快的响应能力。
• 减少冗余请求，减轻了服务器负担。
• 基于标准化的并被广泛支持的技术

2、应用场景

• 场景 1. 数据验证
• 场景 2. 按需取数据
• 场景 3. 自动更新页面

说了这么多，接下来来点干货。

创建ajax的步骤

Ajax的原理简单来说通过 XMLHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。原生创建ajax可分为以下四步

1、创建XMLHttpRequest对象

functioncreateRequest(){
    if (window.XMLHttpRequest) {
        //IE6以上
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return xhr;
}

2、准备请求

xhr.open(method,url,async);

• 第一个参数表示请求类型的字符串，其值可以是 GET 或者 POST
GET 请求：

  xhr.open("GET",demo.php?name=hzzly&age=21,true);
  

  POST 请求：

  xhr.open("POST",demo.php,true);
  

• 第二个参数是要作为请求发送目标的URL。

• 第三个参数是true或false，表示请求是以异步还是同步的模式发出。（默认为true，一般不建议为false）

3、发送请求

xhr.send();

• GET 请求：

  xhr.open("GET",demo.php?name=hzzly&age=21,true);
  xhr.send();
  

• POST 请求

  xhr.open("POST",demo.php,true);
  xhr.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
  xhr.send(param)
  

4、处理响应

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
        console.log(xhr.responseText);
    }
}

• onreadystatechange ：当处理过程发生变化的时候执行下面的函数
• readyState ：ajax处理过程
  • 0：请求未初始化（还没有调用 open() ）
  • 1：请求已经建立，但是还没有发送（还没有调用 send() ）
  • 2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）
  • 3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成
  • 4：响应已完成；您可以获取并使用服务器的响应了
• status 属性:
  • 200: “OK”
  • 404: 未找到页面
• responseText ：获得字符串形式的响应数据，可以用 JSON.parse(xhr.responseText) 转化为 JSON 对象

封装例子

1.get请求函数

/**
 * 一个简单的get请求
 * @param {String}   url     请求地址,文件名
 * @param {Function} fnSucc  请求成功时执行的函数
 * @param {Function} fnFaild 请求失败执行的函数
 */
functionGet(url, fnSucc, fnFaild){
    //1.创建ajax对象
    var xhr = null;
        /**
         * 此处必须需要使用window.的方式,表示为window对象的一个属性.不存在时值为undefined.
         * 进入else若直接使用XMLHttpRequest在不支持的情况下会报错
         **/
    if (window.XMLHttpRequest) {
        //IE6以上
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //2.连接服务器
    //open(方法,url,是否异步)
    xhr.open("GET", url, true);
    //3.发送请求
    xhr.send();
    //4.接收返回
    //OnRedayStateChange事件
    xhr.onreadystatechange = function(){
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                //alert("成功" + xhr.responseText);
                fnSucc(xhr.responseText);
            } else {
                //alert("服务器响应失败!");
                if (fnFaild) {
                    fnFaild();
                }
            }
        }
    };
}

2.get与post结合的请求函数

/**
 * AJAX函数封装
 * @param {string} url     请求地址（必须）
 * @param {object} options 发送请求的选项参数
 *   @config {string} [options.type] 请求发送的类型。默认为GET。
 *   @config {Object} [options.data] 需要发送的数据。
 *   @config {Function} [options.onsuccess] 请求成功时触发。（必须）
 *   @config {Function} [options.onfail] 请求失败时触发。
 */
functionAJAX(url, options){
    //1.创建ajax对象
    var xhr = null;
        /**
         * 此处必须需要使用window.的方式,表示为window对象的一个属性.不存在时值为undefined,进入else
         * 若直接使用XMLHttpRequest,在不支持的情况下会报错
         **/
    if (window.XMLHttpRequest) {
        //IE6以上
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //2.连接服务器
    //open(方法,url,是否异步)
    var param = ""; //请求参数。
    //只有data存在，且为对象使才执行
    var data = options.data ? options.data : -1; //缓存data
    if (typeof (data) === "object") {
        for (var key in data) { //请求参数拼接
            if (data.hasOwnProperty(key)) {
                param += `${key}=${data[key]}&`;
            }
        }
        param.replace(/&$/, "");
    } else {
        param = "timestamp=" + new Date().getTime();
    }
    //3.发送请求
    var type = options.type ? options.type.toUpperCase() : "GET";
    if (type === "GET") {
        xhr.open("GET", `${url}?${param}`, true);
        xhr.send();
    } else {
        xhr.open("POST", url, true);
        xhr.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
        xhr.send(param);
    }
    //4.接收返回
    //OnRedayStateChange事件
    xhr.onreadystatechange = function(){
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                //请求成功。形参为获取到的字符串形式的响应数据
                options.onsuccess(xhr.responseText);
            } else {
                //先判断是否存在请求失败函数
                //存在时，形参为XMLHttpRequest对象，便于进行错误进行处理
                if (options.onfail) {
                    options.onfail(xhr);
                }
            }
        }
    };
}

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

• 【每日笔记】【Go学习笔记】2019-01-04 Codis笔记
• 【每日笔记】【Go学习笔记】2019-01-02 Codis笔记
• 【每日笔记】【Go学习笔记】2019-01-07 Codis笔记
• Golang学习笔记-调度器学习
• Vue学习笔记（二）------axios学习
• 算法/NLP/深度学习/机器学习面试笔记

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。