轻源码

  • QingYuanMa.com
  • 全球最大的互联网技术和资源下载平台
搜索
猜你喜欢
查看: 7427|回复: 0

ajax简单封装详细介绍

[复制链接]

0

主题

0

帖子

1万

积分

钻石会员

Rank: 8Rank: 8

积分
17452
QQ
发表于 2020-6-10 10:30 | 显示全部楼层 |阅读模式
本文主要和大家分享ajax简单封装详细介绍,希望能版助到大家。

ajax一般分为简单的四部:

  1. 创建ajax对象(这里兼容ie的话要做一下处理)

  2. 连接,即请求对象的open方法(get和post还有点不同,get参数要放在url后面,post要设置请求头)

  3. 发送,即请求对象的send函数(post参数则放在send里面)

  4. 接收,在onreadystatechange(存储函数或函数名,每当readyState属性改变时,就会调用该函数。)函数里面处理。

还可以加上超时这些

onreadystatechange分析

  1. 要先判断readyState的状态(有四个状态)

    ①: 0,请求未初始化;

    ②: 1,服务器连接已建立;

    ③: 2,请求已接收;

    ④: 3,请求处理中;

    ⑤: 4,请求已完成,且响应已就绪

  2. 当readyState等于4时,你又要判断status的状态

  3. 请求成功时status状态 200-302 ,还有304(是缓存)

'use strict';

var $ = {};
$.ajax = ajax;

function ajax(options) {

  // 解析参数
  options = options || {};
  if (!options.url) return;
  options.type = options.type || 'get';
  options.timeout = options.timeout || 0;

  // 1 创建ajax
  if (window.XMLHttpRequest) {

    // 高级浏览器和ie7以上
    var xhr = new XMLHttpRequest();
  } else {

    //ie6,7,8
    var xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
  }

  // 2 连接
  var str = jsonToUrl(options.data);
  if (options.type === 'get') {
    xhr.open('get', `${options.url}?${str}`, true);

    // 3 发送
    xhr.send();
  } else {
    xhr.open('post', options.url, true);

    // 请求头
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

    // 3 发送
    xhr.send();
  }

  // 接收
  xhr.onreadystatechange = function() {

    // 完成
    if (xhr.readyState === 4) {

      // 清除定时器
      clearTimeout(timer);

      if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {

        // 成功
        options.success && options.success(xhr.responseText);
      } else {
        options.error && options.error( xhr.status );
      }
    }
  };

  
  // 超时
  if (options.timeout) {
    var timer = setTimeout(function(){ 
            alert("超时了");
            xhr.abort(); // 终止
        },options.timeout);
  }
}


// json转url
function jsonToUrl(json) {
  var arr = [];
  json.t = Math.random();
  for(var name in json) {
    arr.push(name + '=' + encodeURIComponent(json[name]));
  }
  return arr.join('&');
}


以上就是ajax简单封装详细介绍的详细内容,更多请关注php中文网其它相关文章!

回复

使用道具 举报

轻源码让程序更轻更快

QingYuanMa.com

工作时间 周一至周六 8:00-17:30

客服QQ点击咨询

关注抖音号

定期抽VIP

Copyright © 2016-2019 https://www.qingyuanma.com/ 鲁ICP备17014494号

快速回复 返回顶部 返回列表