ajax的深入理解及封装

缺乏、安全感 2021-09-02 05:48 327阅读 0赞

# 概念 #

AJAX： Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

AJAX 不是新的编程语言，而是一种使用现有标准的新方法，一种用于创建快速动态网页的技术

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行

# 工作原理 #

1.  创建一个XMLHttpRequest异步对象
2.  设置请求方式和请求地址
3.  用send()方法发送请求
4.  监听状态变化
5.  处理返回的数据  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1OTgzNTMxNTg4_size_16_color_FFFFFF_t_70_pic_left]

# Ajax优点 #

1.  无需重载整个页面，按需请求部分数据，节约带宽，减少服务器压力。
2.  异步与服务器通信，不会打断用户操作，有些用户只需要首屏的搜索功能，就不必等到页面全部加载完成，提升浏览器渲染体验，用户会在server响应数据之前看到整个页面的大概框架以及结构。

# Ajax缺点 #

1.  浏览器的收藏功能在某些情况使用不便（用户想收藏第二页数据时）。浏览器的后退功能在某些情况使用不便（用户退回第一页时）
2.  AJAX相当于Browser和Server之间的一条通道，通过观察server的响应数据结构，在某些情况下回暴露出一些server的逻辑。黑客也可以模拟用户向Server发起请求，出现了诸如跨站点脚步攻击、SQL注入攻击等

# Ajax封装 #

get、post 请求方式放在一起封装，兼容IE5、IE6

function ajax(option) { 
      // 创建一个 XMLHttpRequest 对象，兼容IE5、IE6
      var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"),
    	  requestData = option.data,
    	  requestUrl = option.url,
    	  dataType = option.dataType || 'json',
    	  requestMethod = (option.method).toUpperCase(); // 请求类型：get/post
      // 如果是GET请求，需要将option中的参数拼接到URL后面
      if ('POST' != requestMethod && requestData) { 
        var query_string = '';
    	// 遍历option.data对象，构建GET查询参数
    	for (var item in requestData) { 
    	  query_string += item + '=' + requestData[item] + '&';
    	}
    	// 注意这儿拼接的时候，需要判断是否已经有 ?
    	requestUrl.indexOf('?') > -1
    	  ? requestUrl = requestUrl + '&' + query_string
    	  : requestUrl = requestUrl + '?' + query_string;
    	// GET 请求参数放在URL中，将requestData置为空
    	requestData = null;
      }
      // ajax 请求成功之后的回调函数, onreadystatechange：请求状态改变的事件触发器
      xhr.onreadystatechange = function () { 
        // readyState: 4 表示接受响应完毕，3 表示接收到部分数据，
        // 2表示已调用send()方法，尚未接受响应，1 表示已调用open()方法，尚未调用send()方法
        if (xhr.readyState == ("number" == typeof XMLHttpRequest.DONE ? XMLHttpRequest.DONE : 4)) { 
          if (200 == xhr.status) {  // 判断状态码
            var response = xhr.response || xhr.responseText || { }; // 获取返回值
            // if define success callback, call it, if response is string, convert it to json objcet
            console.log(response);
            // option.success && option.success(response); // 调用回调函数处理返回数据
            // 可以判断返回数据类型，对数据进行JSON解析或者XML解析
            option.success &&
            option.success('string' == typeof response ? JSON.parse(response) : response);
           } else { 
             // if define error callback, call it
             // xhr.statusText：HTTP状态的说明
             option.fail && option.fail(xhr, xhr.statusText);
           }
        }
      };
      // 返回响应数据的类型
      xhr.responseType = dataType;
      // 发送ajax请求
      xhr.open(requestMethod, requestUrl, true);
      // 请求超时的回调
      xhr.ontimeout = function () { 
          option.timeout && option.timeout(xhr, xhr.statusText);
          xhr.abort(); // 取消当前响应，关闭连接并且结束任何未决的网络活动
      };
      // 定义超时时间
      xhr.timeout = option.timeout || 0;
      // 设置响应头部，这儿默认设置为 json 格式，可以定义为其他格式，修改头部即可
      xhr.setRequestHeader && xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
      // 允许 ajax 跨域请求中携带 认证信息，包括 cookies、HTTP authentication schemes 等
      xhr.withCredentials = (option.xhrFields || { }).withCredentials;
      // 发送 HTTP 请求，只有POST方式才传参，参数类型为字符串，GET方式参数跟在 url 上
      xhr.send(requestData);
    }

# 请求示例 #

ajax({  
      type: 'post', 
      url: 'https://......', 
      dataType: 'json', 
      data: { 
        id: 1,
        name: '小李',
        sex: '男'
    　}, 
      success(res) {  
        console.log(res) 
      }, 
      fail(err){  
        console.log(err) 
      } 
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1OTgzNTMxNTg4_size_16_color_FFFFFF_t_70_pic_left]: /images/20210813/8e2bf3b083ec49b5b4f65d574935078f.png

发表评论取消回复

表情：

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

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

相关阅读

相关深入理解Ajax

一、了解Ajax 1、背景：在 2005 年，Google 通过其 Google Suggest 使 AJAX 变得流行起来。 Google Suggest 使用

叁歲伎倆/ 2022年12月22日 09:35/ 0 赞/ 252 阅读

相关 ajax封装及简单调用

封装js部分 //公共url var baseUrl='http://localhost:8080/' //公共ajax封装 fu

朱雀/ 2022年10月05日 13:51/ 0 赞/ 191 阅读

相关 ajax的封装

$(function(){ 'use strict'; var user = getUserinfo(); i

偏执的太偏执、/ 2022年09月26日 01:49/ 0 赞/ 216 阅读

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

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

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

相关逐渐深入地理解Ajax

Ajax的基本原理是：XMLHttpRequest对象(简称XHR对象)，XHR为向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器获得更多信息。意味着用

﹏ヽ暗。殇╰゛Y/ 2022年08月05日 05:16/ 0 赞/ 150 阅读

相关 ajax封装

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

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

相关 ajax的封装

我！要！被！这！玩意！坑死了！用promise封装一个ajax请求。 function ajax(url,type,param,async,header){

落日映苍穹つ/ 2022年05月10日 03:24/ 0 赞/ 230 阅读

相关 ajax的深入理解及封装

概念 AJAX： Asynchronous JavaScript and XML（异步的 JavaScript 和 XML） AJAX 不是新的编程语言

缺乏、安全感/ 2021年09月02日 05:48/ 0 赞/ 328 阅读

相关封装ajax

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

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

相关深入理解ajax系列——XHR对象

前面的话　　1999年，微软公司发布IE5，第一次引入新功能：允许javascript脚本向服务器发起HTTP请求。这个功能当时并没有引起注意，直到2004年Gmail

妖狐艹你老母/ 2021年06月24日 16:00/ 0 赞/ 600 阅读