轻松搞定Ajax(分享下自己封装ajax函数,其实Ajax使用很简单,难是难在你得到数据后来怎样去使用这些数据)
hey,guys!今天我们一起讨论下ajax吧!此文只适合有一定ajax基础,但还是模糊状态的同志,当然高手也可以略过~~~
一、概念
Ajax(Asynchronous Javascript + XML(异步JavaScript和XML ))
二、效果
实现无刷新效果,向后台异步的取数据(不是只有AJAX才能实现这样的效果的哦,如img , script标签中的src属性也可以实现一样的效果,可以自己尝试一下哦)
三、本质
可能我们在学习过程中会觉得ajax好难,我也是这样过来的,我觉得是我们把重心放错了。
因为ajax用起来是很方便的(只是写一下请求地址,请求方式,是否异步),我们之所以觉得难,很大一部分原因是因为我们不清楚ajax内部的工作原理。我们应该把重心放在取数据后怎样去用这些数据。
OK,那ajax的本质是什么呢??
ajax的目的还是去后台的某个路径取数据,取文件,就像是img/srcipt标签一样,走的还是http协议!
所以,如果你想了解ajax的工作原理,最好是看一下http协议,因为ajax里面所设置的参数,都是为了遵循http协议才这样写的。
也不多说了,直接介绍一个我看过比较靠谱,说得很不错的视频教程,大家可以去下载学习哦(不是打广告~~真心说得好~~嘻嘻)http://pan.baidu.com/s/1vg4hi
四、总结
还是那句,ajax使用并不难,理解过后封一个ajax函数直接取数据就行, 难的是你取到数据后怎样去利用这些数据去进一步的开发。
ajax运用例子: 留言本,瀑布流等等,这些取数据的方式是一样的,但对数据进行处理才是重点。
ajax就像是你用script标签去引入JQ一样,这个是很简单的,但引入来之后你怎么用才是重点。
OK,下面分享下我自己封装的ajajx函数(有详细注释的哦~~),用法和JQ的ajax相似,当然没JQ的那么完善,但基本够用了。
/*
*author: Ivan
*date: 2014.06.01
*参数说明:
*opts: {'可选参数'}
**method: 请求方式:GET/POST,默认值:'GET';
**url: 发送请求的地址, 默认值: 当前页地址;
**data: string,json;
**async: 是否异步:true/false,默认值:true;
**cache: 是否缓存:true/false,默认值:true;
**contentType: HTTP头信息,默认值:'application/x-www-form-urlencoded';
**success: 请求成功后的回调函数;
**error: 请求失败后的回调函数;
*/
function ajax(opts){
//一.设置默认参数
var defaults = {
method: 'GET',
url: '',
data: '',
async: true,
cache: true,
contentType: 'application/x-www-form-urlencoded',
success: function (){},
error: function (){}
}; //二.用户参数覆盖默认参数
for(var key in opts){
defaults[key] = opts[key];
} //三.对数据进行处理
if(typeof defaults.data === 'object'){ //处理 data
var str = '';
var value = '';
for(var key in defaults.data){
value = defaults.data[key];
if( defaults.data[key].indexOf('&') !== -1 ) value = defaults.data[key].replace(/&/g, escape('&')); //对参数中有&进行兼容处理
if( key.indexOf('&') !== -1 ) key = key.replace(/&/g, escape('&')); //对参数中有&进行兼容处理
str += key + '=' + value + '&';
}
defaults.data = str.substring(0, str.length - 1);
} defaults.method = defaults.method.toUpperCase(); //处理 method defaults.cache = defaults.cache ? '' : '&' + new Date().getTime() ;//处理 cache if(defaults.method === 'GET' && (defaults.data || defaults.cache)) defaults.url += '?' + defaults.data + defaults.cache; //处理 url //四.开始编写ajax
//1.创建ajax对象
var oXhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
//2.和服务器建立联系,告诉服务器你要取什么文件
oXhr.open(defaults.method, defaults.url, defaults.async);
//3.发送请求
if(defaults.method === 'GET')
oXhr.send(null);
else{
oXhr.setRequestHeader("Content-type", defaults.contentType);
oXhr.send(defaults.data);
}
//4.等待服务器回应
oXhr.onreadystatechange = function (){
if(oXhr.readyState === 4){
if(oXhr.status === 200)
defaults.success.call(oXhr, oXhr.responseText);
else{
defaults.error();
}
}
};
}
调用方式:
如
ajax({ url: '1.php', data: {name: 'ivan', sex: 'male', age: '23'}, success: function (data){ alert('返回数据是:' + data); } }); ajax({ url: '1.php', data: 'name=ivan&sex=male&age=23', cache: false, success: function (data){ alert('返回数据是:' + data); } });
如有bug,请望指正; 水平有限,欢迎拍砖~~
轻松搞定Ajax(分享下自己封装ajax函数,其实Ajax使用很简单,难是难在你得到数据后来怎样去使用这些数据)的更多相关文章
- 春节过后就是金三银四求职季,分享几个Java面试妙招,轻松搞定HR!
春节过后就是金三银四,分享几个Java面试妙招,轻松搞定HR! 2020年了,先祝大家新年快乐! 今年IT职位依然相当热门,特别是Java开发岗位.软件开发人才在今年将有大量的就业机会.春节过后,金三 ...
- centos下yum安装lamp和lnmp轻松搞定
centos下yum安装lamp和lnmp轻松搞定.究竟多轻松你看就知道了.妈妈再也不操心不会装lamp了. 非常辛苦整理的安装方法,会持续更新下去.凡无法安装的在评论里贴出问题来,会尽快解决.共同维 ...
- 【微服务】之四:轻松搞定SpringCloud微服务-负载均衡Ribbon
对于任何一个高可用高负载的系统来说,负载均衡是一个必不可少的名称.在大型分布式计算体系中,某个服务在单例的情况下,很难应对各种突发情况.因此,负载均衡是为了让系统在性能出现瓶颈或者其中一些出现状态下可 ...
- PDF怎么旋转页面,只需几步轻松搞定!
有时候我们下载一个PDF文件里面有页面是旋转的情况,用手机看的时候可以把手机旋转过来看,那么用电脑的时候总不可能也转过来看吧,笔记本是可以的台式的是不行的,这个时候我们就需要把PDF文件中旋转的页面转 ...
- 几行c#代码,轻松搞定一个女大学生
几行c#代码,轻松搞定一个女大学生 的作业... 哈哈,标题党了哈,但是是真的,在外面敲代码,想赚点外快,接到了一个学生的期末考试,是一个天气预报的程序.程序并不难. 看到这个需求第一个想法就是只要找 ...
- 盘它!基于CANN的辅助驾驶AI实战案例,轻松搞定车辆检测和车距计算!
摘要:基于昇腾AI异构计算架构CANN(Compute Architecture for Neural Networks)的简易版辅助驾驶AI应用,具备车辆检测.车距计算等基本功能,作为辅助驾驶入门级 ...
- 【转】轻松搞定FTP之FlashFxp全攻略
转载网址:http://www.newhua.com/2008/0603/39163.shtml 轻松搞定FTP之FlashFxp全攻略 导读: FlashFXP是一款功能强大的FXP/FTP软件,融 ...
- 轻松搞定javascript变量(闭包,预解析机制,变量在内存的分配 )
变量: 存储数据的容器 1.声明 var 2.作用域 全局变量. 局部变量. 闭包(相对的全局变量): 3.类型 a.基本类型(undefi ...
- 【微服务】之二:从零开始,轻松搞定SpringCloud微服务系列--注册中心(一)
微服务体系,有效解决项目庞大.互相依赖的问题.目前SpringCloud体系有强大的一整套针对微服务的解决方案.本文中,重点对微服务体系中的服务发现注册中心进行详细说明.本篇中的注册中心,采用Netf ...
随机推荐
- C++、GDAL创建shapefile,并向矢量文件中添加网格
//总体来说这个过程就是构建数据源->构建层->构建要素->构建形状->关闭数据源. //要包含的GDAL头文件 #include <gdal_priv.h> #i ...
- python 连接操作数据库(二)
一.我们接着上期的博客继续对ORM框架进行补充,顺便把paramiko模块也给大家讲解一下: 1.ORM框架: 在连接操作数据库的第一个博客中也已经说了,sqlalchemy是一个ORM框架,总结就是 ...
- oracle安装报错检查操作系统版本: 必须是5.1 or 5.2。实际为 6.1未通过
oracle安装时报错,提示:操作系统版本: 必须是5.1 or 5.2.实际为 6.1未通过 , 解决方案 这里只认证5.1.5.2的OS版本,但是我的win server 2008系统版本为6.1 ...
- C++之------构造函数
创建一个对象时,常常需要作某些初始化的工作,例如对数据成员赋初值. 类的数据成员是不能在声明类时初始化的. class Time { public : //声明为公用成员 hour; minute; ...
- C++之------虚函数
今天又是周日,公司工业区这里九月份每个周日都会停电一天.停电停网,是没法活的.我们直接去老大家. 老大当爸爸了,回家一段时间了.听说孩子出生就不乖,很折腾他爸妈,这小家伙新生命二代.也愿小家伙早日康复 ...
- hdu 3926 Hand in Hand
http://acm.hdu.edu.cn/showproblem.php?pid=3926 这道题是判断两个图是不是同构相似.只要判断图中环的个数和链的个数,和每个环的节点数和链的节点数是否相等. ...
- USB系列之八:透过ASPI执行SCSI命令
在<USB系列之七>里我们介绍了ASPI的规范,并对一系列ASPI的命令做了测试,其中的02号命令是执行SCSI命令,我们专门在这篇文章中介绍,在<USB系列七>中,我们已经了 ...
- FFmpeg深入分析之零-基础 <第一篇>
FFmpeg是相当强大的多媒体编解码框架,在深入分析其源代码之前必须要有基本的多媒体基础知识,否则其源代码会非常晦涩难懂.本文将从介绍一些基本的多媒体只是,主要是为研读ffmpeg源代码做准备,比如一 ...
- VS2010下WPF开发ARCGIS ENGINE 10的带Ribbon控件项目
原文 http://blog.sina.com.cn/s/blog_47522f7f0100nq5t.html 题目好长,但是集目前最新的工具于一身..VS是最新的2010版,不过用的是.net3.5 ...
- shell重定向
输入重定向 和输出重定向一样,Unix 命令也可以从文件获取输入,语法为: command < file 这样,本来需要从键盘获取输入的命令会转移到文件读取内容. 注意:输出重定向是大于号(&g ...