封装ajax原理

  1. 首先处理 用户如果不传某些参数,设置默认值

    • type默认get
    • 默认url为当前页
    • 默认async方式请求
    • data数据默认为{}
  2. 处理用户传进来的参数对象
    • 遍历,拼接成key=value&key=value形式,加入数组
  3. 通过XMLHttpRequest对象创建xhr,早期的IE浏览器不支持XMLHttpRequest对象,通过var xhr = new ActiveXObject('Msxm12.XMLHTTP')创建
  4. 判断用户请求的方法
    • get:将数据拼接在url后面,
    • post:需要加一个请求头,并且用send方法传递数据
  5. 判断数据是否请求成功
    • xhr.readyState == 4 && xhr.status == 200表示请求成功
  6. 根据服务器端返回的数据类型进行加工,再用callback传递出去
    • 如果返回的是json格式的数据,就转换成js对象json.parse
    • 如果是xml格式,就将DOM文档对象返回
    • 将处理好的数据用callback传递出去
  7. 优化!!!
    • 将用户需要传入的参数挂载到options对象上,用户只需要传入一个对象就可以使用了
function ajax(options){
//默认值的处理,用户不传某些参数的时候,设置一些默认值
//设置type的默认值为get
options.type = options.type || "get";
//设置请求地址的默认值为当前页地址
options.url = options.url || location.href;
// //设置async的默认值
options.async = options.async || "true";
//设置options.data的默认值
options.data = options.data || {}; //处理用户传进来的请求参数(data)对象
//{key: "123", age: 1, gender: "male"}
//key=123&age=1&gender=male
var dataArr = [];
for(var k in options.data){
dataArr.push(k + "=" + options.data[k]);
}
var dataStr = dataArr.join("&"); var xhr = new XMLHttpRequest();
xhr.open(options.type, options.type == "get"? options.url + "?" + dataStr : options.url, options.async); if(options.type == "post"){
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
}
xhr.send(options.type == "get"? null : dataStr); if(options.async){
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
var type = xhr.getResponseHeader("Content-Type");
var result;
if(type.indexOf("json") != -1){
result = JSON.parse(xhr.responseText);
}else if(type.indexOf("xml") != -1){
result = xhr.responseXML;
}else{
result = xhr.responseText;
}
options.success(result);
}
}
}else{
var type = xhr.getResponseHeader("Content-Type");
var result;
if(type.indexOf("json") != -1){
result = JSON.parse(xhr.responseText);
}else if(type.indexOf("xml") != -1){
result = xhr.responseXML;
}else{
result = xhr.responseText;
}
options.success(result);
}
} function get(options){
options.type = "get";
ajax(options);
} function post(options){
options.type = "post";
ajax(options);
} // ajax({
// url: "json.php",
// data: {key: "123", age: 1, gender: "male"},
// success: function(data){
// console.log(data);
// }
// }); get({
url: "json.php",
success: function(data){
console.log(data);
}
}) // ajax({
// url: "xml.php",
// type: "get",
// data: {key: "123", age: 1, gender: "male"},
// success: function(data){
// console.log(data);
// }
// });

  

封装ajax原理的更多相关文章

  1. js实现原生Ajax的封装及ajax原理详解

    原理及概念 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是一种用于创建快速动态网页的技术. 动态网页:是指可以通过服务器语言结合数 ...

  2. Ajax原理,技术封装与完整示例代码

    在做项目和学习的时候,经常用到Ajax的相关技术,但是这方面的技术总是运用的不是十分好,就寻找相关博客来学习加深Ajax技术相关. 一.Ajax简介 二.同步.异步传输区别 2.1 异步传输 2.2 ...

  3. Ajax原理一篇就够了

    Ajax原理一篇就够了 一.什么是Ajax Ajax(Asynchronous JavaScript and XML的缩写)是一种异步请求数据的web开发技术,对于改善用户的体验和页面性能很有帮助.简 ...

  4. 大话AJAX原理

    大话AJAX原理 一.什么是Ajax Ajax(Asynchronous JavaScript and XML的缩写)是一种异步请求数据的web开发技术,对于改善用户的体验和页面性能很有帮助.简单地说 ...

  5. 自封装ajax

    项目中有时候用不到jq,需要了解xmlhttp原理,自己写一套函数请求和发送数据! /* 封装ajax函数 * @param {string}opt.type http连接的方式,包括POST和GET ...

  6. 封装Ajax和跨域

    目录 引言 封装ajax 案例:使用自封装ajax 案例:动态加载瀑布流 跨域 引言 对于Ajax现在相信大家已经不会陌生了,无论是原生的XMLHttpRequest方式发送还是通过jQuery框架中 ...

  7. 一张图搞懂Ajax原理

    本文整理在,我的github上.欢迎Star. 原理 说起ajax,就不得不说他背后的核心对象XMLHttpRequest,而说到XMLHttpRequest我觉得,从它的readyState状态说起 ...

  8. AJAX原理总结

    AJAX全称 Asynchronous JavaScript and XML(异步的JavaScript 和XML) 同步和异步 异步传输是面向字符的传输,单位是字符 同步传输是面向比特,单位是帧,传 ...

  9. 使用原生JS封装Ajax

    使用原生 的JS封装 Ajax,实现 仿JQuery的Ajax,post,get三种异步请求方式: var MAjax = { //根据浏览器创建异步对象 createXhr: function () ...

随机推荐

  1. BFS 模拟队列(水题)

    BFS 这道题 觉得比较适合BFS新手入门写,也许大家都以为最入门 的BFS题是在二维图上搜索,但是这道题是线性搜索,更加简单 POJ 3278 Catch That Cow Time Limit:  ...

  2. find 命令局部小结之 xtime

    大家在使用find命令的时候往往会使用它的 -name  或者 -xtime,在这里就说下他的xtime. find / -mtime +7 .find / -mtime -7.find / -mti ...

  3. 网站robots.txt & sitemap.xml

    1. 如何查看网站的robots.txt 网址/robots.txt, 比如小米  https://www.mi.com/robots.txt sitemap.xml

  4. 使用Setup factory打包WPF

    软件环境 Win10 .NET452 WPF Setup Factory 工具直接百度下啦,关键词:Setup Factory 95 With Sn 打包过程主要参考了以下文章: https://ww ...

  5. 前端笔记之JavaScript(五)关于数组和字符串那点事

    一.数组 1.1数组概念 数组(array)是一个有序的数据集合.说白了,数组就是一组数.数组内部可以存放一个或多个单独的数据,整体组成数组. 定义数组最简单的方式:数组字面量. 数组的字面量“[]” ...

  6. 在Cyclone IVE中使用进位链的几个规则

    最近在FPGA上做ps级的Delay line,所以认真剖析了一下Cyclone IVE4的布局布线延迟.这里说明CARRY链的几个特性规则,如有错误请各位大大指出,谢谢.(另外由于匆忙没有时间验证其 ...

  7. linux服务器内存、根目录使用率、某进程的监控告警脚本

    脚本内容如下 #!/bin/bash #磁盘超过百分之80发送邮件告警 DISK_USED=`df -T |sed -n "2p" |awk '{print ($4/$3)*100 ...

  8. css之幽灵空白节点

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

  9. python 逻辑运算 ‘and’ ,'or' 在实战中的作用,代替if语句。

    彩票程序:课上方法:import random # 生成一个随机两位数 作为一个中奖号码luck_num = random.randint(10,99)print(luck_num)luck_num_ ...

  10. JAVA操作证书

    一.生成证书工具keytool Java自带的工具keytool可以用来生成密钥证书,也可以查看或删除证书库里的证书.无论是windows还是Linux系统,这个工具都会出现在jdk安装目录的bin文 ...