前端之ajax解析
来源:互联网 发布:c语言左移和右移 编辑:程序博客网 时间:2024/06/05 00:37
最近一直有老哥问我,能不能说一下跨域,讲一下前后端通信,其实我就想说一句,这么大的题你让我怎么说,一时半会也说不完,索性就把各种方法拆开来解析,讲一下它们是如何实现通信,自己封装了几个方法,不定时更新~
今天说一下ajax,ajax到现在应该说除了不能跨域,别的通信功能该有的都有了,但是有的老哥只会用API,怎么实现的都不会,这就有点说不过去了。好了下面贴一个封装好的代码
var opt = { //这里就是ajax的参数以及回调函数 url: '', type: 'get', data: {}, success: function () {}, error: function () {}, };util.extend(opt, options); if (opt.url) { //因为ajax是基于XMLHttpRequest对象,在IE低版本中是基于 //ActiveXObject,首先要做兼容性判断,如果浏览器存在 //XMLHttpRequest对象,则new一个XMLHttpRequest对象,如果不存 //在则创建一个ActiveXObject对象 var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); var data = opt.data, url = opt.url, type = opt.type.toUpperCase(), dataArr = []; for (var k in data) { //将需要传递数据封装 dataArr.push(k + '=' + data[k]); } //判断get或者post方法,当然还有别的方法我暂时没写 if (type === 'GET') { url = url + '?' + dataArr.join('&'); //打开ajax连接 xhr.open(type, url.replace(/\?$/g, ''), true); //发送数据 xhr.send(); } if (type === 'POST') { xhr.open(type, url, true); //定义请求头可以忽略 xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); xhr.send(dataArr.join('&')); } //响应onload事件(也就是请求成功) xhr.onload = function () { if (xhr.status === 200 || xhr.status === 304) { var res; if (opt.success && opt.success instanceof Function) { res = xhr.responseText; if (typeof res ==== 'string') { //这里返回数据类型可以自己定义,比如jquery的 //xml,json等 res = JSON.parse(res); opt.success.call(xhr, res); } } } else { //请求失败 if (opt.error && opt.error instanceof Function) { opt.error.call(xhr, res); } } }; } };
原理就是如此简单,过几天不定时讲一下jsonp的实现原理。
阅读全文
0 0
- 前端之ajax解析
- 前端通过ajax解析字符串
- 前端扫雷之ajax
- 前端学习笔记之ajax
- 前端如何解析ajax的list对象
- 【Web前端】AJAX之点滴介绍
- 前端面试之Ajax和Json
- JavaWeb前端之AJAX的初步学习
- Jquery之Ajax知识解析
- springMVC中ajax后台解析json响应前端
- SpringMVC 异常处理 返回异常code及前端AJAX解析
- jquery中ajax 从前端到后端 完整过程解析
- 前端优化系列之DNS预解析
- java解析ajax之json字符串
- 从零开始学习WEB前端之数据交互(Ajax)
- 前端必备技能之AJAX的实现原理
- WEB前端开发之ajax基础篇+跨域访问
- jquery UI学习笔记-知问前端之Ajax表单插件和Ajax提交表单
- oracle排序
- Hibernate一对一注解,一对多注解
- 好好准备找工作
- this关键字的应用
- 【图论】有向无环图的拓扑排序
- 前端之ajax解析
- Double Patience UVA
- Caffe_Windows学习笔记(七)细粒度图像分类
- continue和break
- 类与对象第五题
- 输出一个某种编码的字符串
- 2017 乌鲁木齐赛区网络赛 Coconut(【模拟题目】)
- 209. Minimum Size Subarray Sum解题报告
- Noip 2016 蚯蚓