<script>
//封装ajax
// 函数名 ajax
// 函数的参数
// url: 请求的地址
// type: 请求的方式 get /post
// data: 要上传的数据 要求是键值对的形式
// 函数的返回值 没有返回值 // 增加的功能:
// 1. 如果没有传请求的地址,就没有必要执行后面的代码
// 2. 默认是get, 如果传post,则发post请求
// 3. 不需要再上传键值对的字符串了name=zs&age=18&sex=m
// 而是上传一个对象
// {
// name: 'zs',
// age: 18,
// sex: 'm'
// }
// 优化前: 参数列表的问题: 如果记不住顺序,那么传参会错误.少些参数,也会错误
// 优化后: 传入一个对对象. 不需要考虑顺序. 少写type,函数照样可以正常运行
// option要求是一个对象
// option.url
// option.type
// option.data // 最后一个功能: ajax({
url: '../test.php',
type: 'post',
data: {
name: 'zs'
},
success: function(res) {
//当数据成功的响应回来,那么这个函数会自动被调用
// 而且,希望将获取到的数据,传入到这个回调函数中
// alert('响应成功了');
console.log(res);
// JSON.parse(res)
}
});
function ajax(option) {
//判断是否传入对象,
if (option.constructor !== Object) {
console.log('对象');
return;
} //获取参数
var url = option.url;
var type = option.type;
var data = option.data; //功能 1 没有传url return
if (!url) {
return;
}
//功能 2 请求类型
type = type === 'post' ? 'post' : 'get';
//功能 3 将 data 从对象转成 用 & 隔开的键值对的 字符串
var arr = [];
for (var k in data) {
arr.push(k + '=' + data[k]);
}
data = arr.join('&'); //1.创建对象
var xhr = new XMLHttpRequest();
//2.设置请求行
if (type === 'get') {
url += '?' + arr;
data = null;
}
xhr.open(type, url);
//3.设置请求头
if (type === 'post') {
xhr.setRequestHeader(
'content-type',
'application/x-www-form-urlencoded'
);
}
//4.设置请求主体并发送请求
xhr.send(data);
//5.接收响应
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var result = xhr.responseText;
if (xhr.getResponseHeader('content-type').indexOf('json') != -1) {
var obj = JSON.parse(result);
option.success & option.success(obj);
} else if (
xhr.getResponseHeader('content-type').indexOf(xml) != -1
) {
option.success && option.success(xhr.responseXML);
} else {
option.success && option.success(result);
}
} else {
//失败
option.error && option.error();
}
};
}
</script>

04.封装ajax的更多相关文章

  1. 使用原生JS封装Ajax

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

  2. 封装Ajax框架!(前言篇)

    Ajax技术就是利用javascript和xml实现异步交互的功能. 首先先来介绍一下Ajax相关知识点,如果这些你都会的话,请直接跳转到封装ajax框架!(代码篇) 一.Ajax对象的创建 1.创建 ...

  3. 原生javascript封装ajax和jsonp

    在我们请求数据时,完成页面跨域,利用原生JS封装的ajax和jsonp: <!DOCTYPE html> <html lang="en"> <head ...

  4. AJAX编程-封装ajax工具函数

    即 Asynchronous [e'sɪŋkrənəs] Javascript And XML,AJAX 不是一门的新的语言,而是对现有技术的综合利用.本质是在HTTP协议的基础上以异步的方式与服务器 ...

  5. javascript 【封装AJAX】

    post function createXHR() { if (typeof XMLHttpRequest != 'undefined') { return new XMLHttpRequest(); ...

  6. 封装ajax原理

    封装ajax原理 首先处理 用户如果不传某些参数,设置默认值 type默认get 默认url为当前页 默认async方式请求 data数据默认为{} 处理用户传进来的参数对象 遍历,拼接成key=va ...

  7. 自定义封装ajax,复制即可用

    支持get.post请求 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  8. 封装ajax,让调用变得简单优化

    思考一下: 通常我们在使用ajax来发送接口请求时,每一次都会调用ajax固定的元素,比如data.url.method.success.error等.那么我们想一下能不能先把ajax封装起来,在每次 ...

  9. 原生JS封装ajax方法

    http://blog.sucaijiayuan.com/article/89 jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只 ...

随机推荐

  1. 网络流板子/费用流板子 2018南京I题+2016青岛G题

    2018南京I题: dinic,链式前向星,数组队列,当前弧优化,不memset全部数组,抛弃满流点,bfs只找一条增广路,每次多路增广 #include <bits/stdc++.h> ...

  2. 留恋 nyoj 854

    留恋 时间限制:1000 ms  |  内存限制:65535 KB 难度:2   描述 大家都知道,高中的时候,座位基本都是固定的,但是对于视力不好却又坐在后面的人是很不公平的. 念情的高中班主任安哥 ...

  3. Linux中普通用户配置sudo权限(带密或免密)

    配置步骤如下: 1.登陆或切换到root用户下: 2.添加sudo文件的写权限,命令是:chmod u+w /etc/sudoers 3.编辑sudoers文件:vi /etc/sudoers 找到这 ...

  4. python正则表达式--split、sub、escape方法

    1.re.split 语法: re.split(pattern, string[, maxsplit=0, flags=0]) 参数: pattern    匹配的正则表达式 string      ...

  5. Java版InfluxDB工具类

    InfluxDB工具类 package com.influxdb.test; import java.util.Map; import org.influxdb.InfluxDB; import or ...

  6. ASP.NET Core + Vue.js 开发

    1.新建 项目文件夹 pro,在 VS CODE 打开终端,输入dotnet new mvc 命令,新建asp.net core项目. 2.在Startup.cs添加webpack的引用与配置 usi ...

  7. MTV 和 MVC

    MTV:(Django中用) M:models T:templates V:views MVC M:models V:views C:control(urls+views)

  8. HTML 文本内容居中

    简单描述:使用bootstrap 的model弹出框,里边的标题内容是靠左的,想把内容居中. 操作:给标题的class加上"text-center". 另外 我发现,在使用mode ...

  9. linux常用命令及使用技巧(三)

    文件管理与编辑 mkdir创建一个目录 mkdir [选项] 目录名 -m 设置存取权限 -p 可以一次创建多个目录 more命令读取文本文件,灭次显示一屏,并在每屏后暂停 cat命令将文件的内容输出 ...

  10. 两个spring boot项目war部署到tomcat 其中一个无法正常启动

    Spring Boot的spring.jmx资源管理是默认打开的,而两个项目同时使用会冲突 需要在第二个.或者第三个springboot项目中增加如下配置: 1:application.propert ...