javscript之原生ajax请求的封装

ajax系列

1：formateUrl 格式化url函数

作用：就是在ajax发起请求的，需要配置url路径也就是格式化url 所以里面的参数大概有两个，参数1：method，参数2：url！
返回值：返回的是拼接后的url路径
需求：

01：就是在ajax发送请求的时候，get是在open之中直接发送请求，传递的参数为method,url （而参数直接拼接在url中的 ? 后面），因此调用格式化url函数，若是为post请求，就直接返回url即可！因此在封装的时候，需要把url存储起来
02：然而在post请求的时候，是在open之中，设置method，还有url（而post请求是加密的，参数部分在send之中发送过去，因此这边直接为url路径），设置url之前需要设置请求头！
03：然后遍历data这个参数对象，进行url路径的拼接！

调用示例：

 var res = formateUrl("http://www.baidu.com", {method: "GET",callback: "callback",a: 10})console.log(res); //http://www.baidu.com?

结果： method=GET&callback=callback&a=10

function formateUrl(url, data) { //url为请求的路径 data为请求携带的参数（对象的形式）//默认为GETvar type = "GET";if (arguments.length === 1) {//参数长度为1的时候，代表为post请求 post请求只是在send之中调用格式化url，只是传递了data这个参数路径！type.toUpperCase() = "POST"data = url;url = ""}//遍历data（对象，是键值对的形式)，进行url路径的拼接//url中get请求是，最初需要拼接一个? + key=value，后面拼接& + key=value//而post请之中，不需要拼接?，直接后面拼接& + key=valuevar start = true; //最初的for (var key in data) {if (type.toUpperCase() === "GET") {url += (start ? "?" : "&") + key + "=" + data[key];} else if (type.toUpperCase() === "POST") {url += (start ? "" : "&") + key + "=" + data[key];}start = false;}return url
}

2：完美版本的ajax请求

参数：一个对象，对象里面的参数是 method,url,data,callback,jsonpcallback等！
调用方式—

ajax({method: "jsonp",url: "https://api.gogoup.com/p1/data/recommend",callback: function (data) {console.log(data);},data: {//字段名 ： 回调函数jsonpcallback: "callback"}
})

//封装一个ajax请求

function ajax(options) {return new Promise(function (resolve, reject) {//配置默认的参数options = Object.assign({method: "GET",callback: function () {},url: "",data: {},jsonpcallback: "callback"}, options)//jsonp请求if (options.method === "jsonp") {//发起请求var script = document.createElement("script");script.src = formateUrl(options.url, options.data)document.body.appendChild(script);//响应  需要定义一个全局函数，为了在外部可以使用到 // data:{jsonpcallback: "callback"} 需要你传递一个对象（字段：回调函数）window[options.jsonpcallback] = function (data) {options.callback(data);resolve(data)}//等待script加载完毕后，就清除掉script标签script.onload = function () {script.remove();}} else {//GET和POST请求var xhr = new XMLHttpRequest();xhr.open(options.method, options.method.toUpperCase() === "GET" ? formateUrl(options.url, options.data) :options.url);if (options.method.toUpperCase() === "POST") {xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");}xhr.send(options.method.toUpperCase() === "POST" ? formateUrl(options.data) : null)xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (/^2\d{2}/.test(xhr.status)) {options.callback(xhr.responseText)resolve(data)}}}}})
}

javscript之原生ajax请求的封装相关推荐

原生ajax请求的封装
原生ajax请求的封装原生ajax请求分为四步: 1.创建请求对象判断浏览器的兼容问题 ie浏览器:window.ActiveXObject 常用浏览器:window.XMLHttpRequest ...
理解ajax技术，封装原生 ajax请求
一.Ajax 概述 Ajax 是 Asynchronous Javascript And XML 的简写 Ajax是一门技术,并不是一门语言使用XHTML+CSS来标准化呈现使用XML和XSLT进 ...
原生ajax请求及readyState的几种状态
原生ajax请求写法: var http = new XMLHttpRequest();http.open('get','./package.json');http.onreadystatechang ...
原生ajax请求时出现xhr.status==0及POST请求无响应问题
用原生ajax请求时发现xhr.status == 0,于是找了好久,竟然发现是绑定事件的元素不是我点击的元素.参考以下资源 AJAX问题之XMLHttpRequest status = 0 xhr. ...
前端接收pdf文件_原生ajax请求获取pdf文件流本地下载（支持谷歌IE）
项目中要实现本地下载pdf文件,ajax请求获取到文件全路径,如上,a标签href属性赋值跳转,在iframe里面,谷歌浏览器被阻止下载.那只能另想办法.经过几天的摸索和后台调整接口数据流,终于解决. ...
原生Ajax请求流程：同步请求、异步请求
Ajax 异步无刷新技术原生Ajax的实现流程得到XMLHttpRequest对象 - var xhr = new XMLHttpRequest(); 打开请求 - xhr.open(method ...
发送原生ajax请求的步骤
需要考虑下浏览器的兼容性 <script>/* ajax请求数据的步骤:1.创建ajax对象2.配置请求方式和请求地址以及是否异步请求3.浏览器向服务器发送请求4.服务器接受请求5.判断请 ...
原生ajax请求并渲染,原生js的ajax数据渲染
ajax应用不只是页面功能的提升,也是性能优化的一种方式. 兼容这块的话就是其ajax对象,在ie和其他浏览器的不同,那么现在基本上w3c已经给出了兼容的写法 var xmlhttp; if(wind ...
详解原生AJAX请求demo（兼容IE5/6）
function createXHR(){ // 检测原生XHR对象是否存在if ( window.XMLHpptRequest ){// 如果存在就返回新实例return new XMLHpptRe ...

javscript之原生ajax请求的封装

目录

ajax系列

2：完美版本的ajax请求

javscript之原生ajax请求的封装相关推荐

最新文章

热门文章