JS 实现AJAX封装(只限于异步)
1.AJAX 分为异步 和 同步 请求
比如你去买一个食品,但是商店暂时没有这个食品
异步:等到商品有了再来买,这个期间我可以去做别的事;
同步:一直在这里等,什么时候商品来了,买到手了,再去做别的事;
下面我写了一个封装的函数,作为了解,使用的话建议使用JQ的AJAX
function Ajaxget(option,fnSucc,fnFaild){
/*url 请求路径
getOrPost get还是post请求
str post发送的字符串
fnSucc 成功函数
fnFaild 失败函数
*/
var arument = {
getUrl : option.url,
getOrPost : option.getOrPost,
postSendStr : option.str
}
if(window.XMLHttpRequest){
var xhr = new XMLHttpRequest();
}else{
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
if(arument.getOrPost === 'get'){
xhr.open("GET",arument.getUrl,true);
xhr.send();
}else if(arument.getOrPost === 'post'){
xhr.open("POST",arument.getUrl,true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(arument.postSendStr)
}
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
fnSucc(xhr.responseText)
// document.write(xhr.responseText);
}else{
if(fnFaild){
fnFaild();
}
}
}
}
调用请求部分
Ajaxget({
url:'http://sjz.bokanedu.com/tgr/api/index.aspx?day=4-5&type=bkws',
getOrPost:'get',
str:''
},function(e){
document.write(e);
},function(){
console.log('失败')
})
请求数据如下:

JS 实现AJAX封装(只限于异步)的更多相关文章
- Ajax工作原理和原生JS的ajax封装
前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...
- 原生js实现ajax封装
一.什么是ajax? 定义:Ajax(Asynchronous Java and XML的缩写)是一种异步请求数据的web开发技术,在不需要重新刷新页面的情况下,Ajax 通过异步请求加载后台数据,并 ...
- JS中Ajax的同步和异步
ajax同步 : 意味着此时请求Server后,JS代码不再继续执行,等待Server返回后才继续往下执行. ajax异步 : 意味着此时请求Server后,JS代码继续执行,不管Server什么时候 ...
- 原生js 的ajax封装
/** * 封装ajax函数(包括跨域) * @method ajax * @param option :{type:"post" or "get" 请求方式, ...
- 关于js中Ajax的同步、异步使用
下面一个简单的例子,说明前后端交互中,Ajax同步和异步的使用 1.设置简单的一个div,包含触发事件 CompanyType() <div> <input type="h ...
- 2-7 js基础-ajax封装
function json2url(json) { var arr = []; for (var name in json) { arr.push(name+'='+encodeURIComponen ...
- js中ajax连接服务器open函数的另外两个默认参数get请求和默认异步(open的post方式send函数带参数)(post请求和get请求区别:get:快、简单 post:安全,量大,不缓存)(服务器同步和异步区别:同步:等待服务器响应当中浏览器不能做别的事情)(ajax和jquery一起用的)
js中ajax连接服务器open函数的另外两个默认参数get请求和默认异步(open的post方式send函数带参数)(post请求和get请求区别:get:快.简单 post:安全,量大,不缓存)( ...
- 表单验证--通过原生js模仿ajax的异步交互
今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...
- js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用)
js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用) 一.总结 2.匿名函数作为参数传递 二.js进阶ajax函数封装 ajax1.js function ajax(ur ...
随机推荐
- python编写脚本,删除固定用户下的所有表
脚本如下: [oracle@ycr python]$ more t_del.py #/usr/bin/python#coding:utf8 import sysimport cx_Oracle i=0 ...
- ubuntu 14.04 64位使用google官方android开发集成工具adt-64位无法使用adb
在使用ubuntu64位(14.04)时,下载来一个adt-bundle-linux-x86_64-20131030.zip,但是运行时报错: Android: Gradle: Execution f ...
- 如何使用react-redux
之前学习了react,也学习了redux,那么react-redux是什么呢?实际上他是一个第三方的模块,他可以帮助我们在react之中更加方便的使用redux.首先如果想用react-redux,先 ...
- 2018.11.28 OGNL表达式与struts2框架结合的体现---在配置文件中体现(补充)
Demo3Action配置 struts.xml 主配置文件配置 地址栏输入 http://localhost:8080/StrutsDay03/Demo3Action 对于主配置的文件参数而言,如果 ...
- 2018.11.17 Struts2框架入门
Struts2 框架学习 一.struts2是什么? (1)概念 (2)struts2使用优势 自动封装参数 参数校验 结果的处理(转发|重定向) 国际化 显示等待页面 表单的防止重复提交 (3)st ...
- 2018.10.4 AndroidStudio
AndroidStudio低版本sdkversion开发 Error:Minimum supported Gradle version is 4.1 Current version is 2.14.1 ...
- ASP.NET Web API 自定义MediaType实现jsonp跨域调用
代码来自<ASP.NET Web API 2 框架揭秘>一书. 直接上代码: /// <summary> /// 自定义jsonp MediaType /// </sum ...
- P3909 异或之积
P3909 异或之积 为什么叫做异或之积? 答曰:只要不关乎Alice和Bob就行 做完这道水题,感觉自己弱爆了. 一开始就要考虑暴力\(O(n^3)\)的优化. 然后就注意到了题目中的\(6\)为什 ...
- Android学习笔记_62_手机安全卫士知识点归纳(2)ListView重要属性 PopupWindow应用
1.缓存颜色: 为什么ListView在拖动的时间是黑色,而静止时间是自己的颜色是因为 ListView的缓存.只需一个配置即可.在这个ListView里面加上它即可. android:cacheCo ...
- hbase 数据拷贝
由于运营数据太大,另外避免影响正常访问,所以需要临时拷贝部分数据到临时表中. bin/hbase org.apache.hadoop.hbase.mapreduce.CopyTable [--star ...