Ajax方法封装
打算自己封装一个ajax方法,再不用jq库的情况下,直接引用:
ajax作用:数据交互,在不刷新页面的情况下,发送请求,获取数据;
首页第一步常见一个ajax对象:XMLHttpRequest,之后会用这个对象的属性和方法完成一个数据交互的过程;
1.open方法:
参数:打开方式(post和get)、地址、是否异步(异步:非阻塞,前面的代码不会影响后面代码的执行;同步:阻塞,前面的代码会影响后面代码的执行)
2、send方法
发送请求
3、onReadyStateChange事件:当状态值readystate改变的时候触发的事件
readystate:ajax工作状态:0代表还没有调用open方法;1代表已经调用send方法,正在发送请求;2代表发送请求已完成,已经收到相应内容;;3收到内容解析;4代表内容可在客户端调用
4、status服务器状态码
备注:post和get区别:get是通过url传输,post是通过浏览器传输,ajax封装代码如下
function ajax(method, url, data, success) {
var xhr = null;
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
} if (method == 'get' && data) {
url += '?' + data;
} xhr.open(method,url,true);
if (method == 'get') {
xhr.send();
} else {
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.send(data);
} xhr.onreadystatechange = function() { if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
success && success(xhr.responseText);
} else {
alert('出错了,Err:' + xhr.status);
}
} }
}
Ajax方法封装的更多相关文章
- 【前端学习笔记04】JavaScript数据通信Ajax方法封装
//Ajax 方法封装 //设置数据格式 function setData(data){ if(!data){ return ''; } else{ var arr = []; for(k in da ...
- 基于jquery的ajax方法封装
在实际的项目里,ajax的应用频率很高,所以尽管jquery或者其他的一些类似的js库做了非常不错的封装,仍然有进一步封装简化的空间和必要 举一个例子,很久很久以前,我的ajax是这么写的: $.aj ...
- 原生ajax方法封装
/** * @function ajax request * @fields ajaxName:请求名称,method:请求方法,headers:setRequestHeader自定义部分,url:接 ...
- AJAX原理解析与兼容方法封装
AJAX常用参数 AJAX对象兼容 AJAX对象方法与属性 AJAX封装兼容方法源码 AJAX全称Asynchronous JavaScript and XML(异步的JavaScript与XML), ...
- 原生JS封装ajax方法
http://blog.sucaijiayuan.com/article/89 jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只 ...
- 通用ajax请求方法封装,兼容主流浏览器
ajax简单介绍 没有AJAX会怎么样?普通的ASP.Net每次运行服务端方法的时候都要刷新当前页面. 假设没有AJAX,在youku看视频的过程中假设点击了"顶.踩".评论.评论 ...
- 类似jQuery的原生JS封装的ajax方法
一,前言: 前文,我们介绍了ajax的原理和核心内容,主要讲的是ajax从前端到后端的数据传递的整个过程. Ajax工作原理和原生JS的ajax封装 真正的核心就是这段代码: var xhr = ne ...
- 原生ajax与封装的ajax使用方法
当我们不会写后端接口来测试ajax时,我们可以使用node环境创建一个本地服务器. 1.创建一个本地服务器可参考http://www.cnblogs.com/heyujun-/p/6793900.ht ...
- 封装一个类似jquery的ajax方法
//封装一个类似jquery的ajax方法,当传入参数,就可以发送ajax请求 //参数格式如下{ // type:"get"/"post", // dataT ...
随机推荐
- treeGrid树形数据表格的json数据格式说明
在使用easyUI 的treeGrid的时候,很多时候我们从数据库取出来的数据treeGrid却不能读取显示成一个树:如下 { menuCode: "a00", menuName: ...
- 初转java随感(一)程序=数据结构+算法
大学刚学编程的时候,有一句很经典的话程序=数据结构+算法 今天有了进一步认识. 场景: 1.当前局面 (1)有现成的封装好的分页组件 返回结果是page.类型为:Page.包括 page 分页信息,d ...
- 强势回归,Linux blk用实力证明自己并不弱!
Flash的出现把存储的世界搅翻了天,仿佛一夜之间发现了新大陆,所有旧世界的东西都变得笨拙.NVMe驱动义无反顾地抛弃了Linux blk,开发自己的队列管理. 当第一次看到NVMe重新使用Linux ...
- 通过Daffodil for VS使VS2010的IDE可以用VC6 VC7.1 VC9等编译器进行项目编译
本文内容中的部分资料和知识来源于网络,具体引用出处不明. VS的IDE从VC6到VS2010的变化可谓是天翻地覆,最新的VS2010有一个特性就是支持多显示器开发,这无疑为我们的开发带来很大的便利. ...
- 黄聪:GeckoFX如何引用jquery文件并执行自定义JS
var jquery_script = gwb.Document.CreateElement("script"); jquery_script.SetAttribute(" ...
- 【学】AngularJS日记(4)- 过滤器的使用
过滤器: 过滤器中的 |json,可以使原来的json数据输出时按照换行的样式 过滤器 | limitTo:2可以截取字符串或者数组的前2位 过滤器| orderBy 可以进行排序,加入json里的k ...
- OAF_开发系列02_实现OAF页面的通过个性化多语言开发国际化(案例)
2014-06-10 Created By BaoXinjian
- phpstrom 10 激活
随着 JetBrains 新版本的发布,注册机已然不行了.然而,道高一尺,魔高一丈.IntelliJ IDEA开源社区 提供了如下通用激活方法:注册时选择License server填写http:// ...
- BMP头文件格式以及C语言读取头文件【转】
BMP头文件格式以及C语言读取头文件[转] (2011-12-24 22:59:17) 转载▼ 标签: 杂谈 分类: 各个领域的知识 BMP图像文件由三部分组成:位图文件头数据结构,它包含BMP图像文 ...
- Sql Server中Float格式转换字符串varchar方法(转)
1.[Sql Server](70) SELECT CONVERT(varchar(100), CAST(@testFloat AS decimal(38,2)))SELECT STR(@testF ...