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封装(只限于异步)的更多相关文章

  1. Ajax工作原理和原生JS的ajax封装

    前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...

  2. 原生js实现ajax封装

    一.什么是ajax? 定义:Ajax(Asynchronous Java and XML的缩写)是一种异步请求数据的web开发技术,在不需要重新刷新页面的情况下,Ajax 通过异步请求加载后台数据,并 ...

  3. JS中Ajax的同步和异步

    ajax同步 : 意味着此时请求Server后,JS代码不再继续执行,等待Server返回后才继续往下执行. ajax异步 : 意味着此时请求Server后,JS代码继续执行,不管Server什么时候 ...

  4. 原生js 的ajax封装

    /** * 封装ajax函数(包括跨域) * @method ajax * @param option :{type:"post" or "get" 请求方式, ...

  5. 关于js中Ajax的同步、异步使用

    下面一个简单的例子,说明前后端交互中,Ajax同步和异步的使用 1.设置简单的一个div,包含触发事件 CompanyType() <div> <input type="h ...

  6. 2-7 js基础-ajax封装

    function json2url(json) { var arr = []; for (var name in json) { arr.push(name+'='+encodeURIComponen ...

  7. js中ajax连接服务器open函数的另外两个默认参数get请求和默认异步(open的post方式send函数带参数)(post请求和get请求区别:get:快、简单 post:安全,量大,不缓存)(服务器同步和异步区别:同步:等待服务器响应当中浏览器不能做别的事情)(ajax和jquery一起用的)

    js中ajax连接服务器open函数的另外两个默认参数get请求和默认异步(open的post方式send函数带参数)(post请求和get请求区别:get:快.简单 post:安全,量大,不缓存)( ...

  8. 表单验证--通过原生js模仿ajax的异步交互

    今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...

  9. js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用)

    js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用) 一.总结 2.匿名函数作为参数传递 二.js进阶ajax函数封装 ajax1.js function ajax(ur ...

随机推荐

  1. STC12C5A60S2 51单片机最小系统

                                                                                    STC12C5A60S2 一.根据芯片文 ...

  2. [原]Machine Learing 入门 —— 开门第0篇

    一.最近懒了 7月没怎么写博客,倒是一直在学Machine Learning的入门知识,在这里给大家推荐一个不错的自学网站:https://www.coursera.org/ ,Andrew Ng是联 ...

  3. MySQL联合索引最左匹配范例

    MySQL联合索引最左匹配范例 参考文章:http://blog.jobbole.com/24006/ 创建示例表. 示例表来自MySQL官方文档: https://dev.mysql.com/doc ...

  4. Android 高级UI设计笔记09:Android实现无限滚动列表

    1. 无限滚动列表应用场景: ListView和GridView已经成为原生的Android应用实现中两个最流行的设计模式.目前,这些模式被大量的开发者使用,主要是因为他们是简单而直接的实现,同时他们 ...

  5. POJ Widget Factory 【求解模线性方程】

    传送门:http://poj.org/problem?id=2947 Widget Factory Time Limit: 7000MS   Memory Limit: 65536K Total Su ...

  6. POJ 3233 Matrix Power Series 【经典矩阵快速幂+二分】

    任意门:http://poj.org/problem?id=3233 Matrix Power Series Time Limit: 3000MS   Memory Limit: 131072K To ...

  7. 【luogu P1082 同余方程】 题解

    最近一直在学习数论,讲得很快,害怕落实的不好,所以做一道luogu的同余方程练练手. 关于x的同余方程 ax ≡ 1 mod m 那么x其实就是求a关于m的乘法逆元 ax + my = 1 对于这个不 ...

  8. 最短路问题:迪杰斯特拉算法(Dijsktra)

    Dijkstra算法 1.定义概览 Dijkstra(迪杰斯特拉)算法是典型的单源最短路径算法,用于计算一个节点到其他所有节点的最短路径.主要特点是以起始点为中心向外层层扩展,直到扩展到终点为止.Di ...

  9. Android学习笔记_50_(转 四种加载方式详解(standard singleTop singleTask singleInstance)

    Android之四种加载方式 (http://marshal.easymorse.com/archives/2950 图片) 在多Activity开发中,有可能是自己应用之间的Activity跳转,或 ...

  10. linux系统状态查看/管理相关命令

    系统状态查看命令: w 查看用户 top 系统进程监控 uptime 查看某台服务器运行了多久 htop 更加先进的交互式监控工具(需要安装) iotop 监控并实时显示磁盘IO输入和输出和程序进程( ...