详解JavaScript原生封装ajax请求和Jquery中的ajax请求


Posted in jQuery onFebruary 14, 2019

前言:ajax的神奇之处在于JavaScript 可在不重载页面的情况与 Web 服务器交换数据,即在不需要刷新页面的情况下,就可以产生局部刷新的效果。Ajax 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),当然也可同步,这样就可使网页从服务器请求少量的信息,而不是整个页面。Ajax使我们的项目更小、更快,更友好,在前端开发有很高的地位,也是面试题的热点。本次测试是在localhost本地环境。

1、原生ajax

(1)html前端代码get请求方式创建一个ajax实例xhr open()方法传入三个参数,第一个是请求方式(一般为get和post),第二个参数是请求地址,第三个布尔值,true代表异步,false代表同步 send发送数据(get用不上,get发送的数据一般在链接后面,所以为显式传值,形式为键值对)绑定监听函数判断状态码 xhr.responseText得到返回数据

var xhr = new XMLHttpRequest() 
  xhr.open("GET","js/text.js",true) 
  xhr.send()          
  xhr.onreadystatechange = function(){  //
   if(xhr.readyState === 4&& xhr.status === 200){ 
    var data = xhr.responseText 
    var datas = JSON.parse(data) 
    console.log(datas) 
   }
  }

控制台输出

详解JavaScript原生封装ajax请求和Jquery中的ajax请求

(2)html前端代码post请求方式 post传递方式需要设置头信息,实测简单的请求不设置也是可以这里的传值是放在send()方法里面的,所以为隐式传值,其他的都和get相同

var xhr = new XMLHttpRequest() 
  xhr.open("POST","js/text.js",true) 
  xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
  xhr.send()         
  xhr.onreadystatechange = function(){  
   if(xhr.readyState === 4&& xhr.status === 200){ 
    var data = xhr.responseText 
    var datas = JSON.parse(data) 
    console.log(datas) 
   }
  }

控制台输出

详解JavaScript原生封装ajax请求和Jquery中的ajax请求

(3)被请求js代码

{
 "name":"小明",
 "age":24,
 "array":[1,51,3,4,4,6,64]
}

2、函数封装 这里函数封装的一个ajax方法,用的时候直接调用该方法,传入设置参数即可

参数有请求类型type,请求地址url,传入数据data(本案例无,没有也需要“”占位),请求成功返回函数success(也可多加一个失败返回函数)

(1)前端JS代码

function Ajax(type, url, data, success){
   
   var xhr = null; // 初始化xhr
   if(window.XMLHttpRequest){ //兼容IE
    xhr = new XMLHttpRequest();
   } else {
    xhr = new ActiveXObject('Microsoft.XMLHTTP')
   }
   
   var type = type.toUpperCase();
   
   var random = Math.random(); //创建随机数
   
   if(type == 'GET'){
    if(data){
     xhr.open('GET', url + '?' + data, true); //如果有数据就拼接
    } else {
     xhr.open('GET', url + '?t=' + random, true); //如果没有数据就传入一个随机数
    }
    xhr.send();
   
   } else if(type == 'POST'){
    xhr.open('POST', url, true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send(data);
   }
   
   
   xhr.onreadystatechange = function(){  // 创建监听函数
    if(xhr.readyState == 4&&xhr.status == 200){
      success(xhr.responseText);
     } 
    }
  }
   
  Ajax('get', 'js/text.js', "", function(data){ //调用函数
   console.log(JSON.parse(data));
  });

(2)被请求js代码

{
 "name":"小明",
 "age":24,
 "array":[1,51,3,4,4,6,64]
}

控制台输出

详解JavaScript原生封装ajax请求和Jquery中的ajax请求

3、Jquery中的Ajax(先引入Jquery)(1)前端简单的JS代码 jquery中的ajax是被库封装好了的,我们直接用即可,下面是简单的ajax请求,它也有很多参数,但基础的就这些了

$.ajax({
   url:"./js/text.js", 
   type:"GET",  
   dataType:"json", 
   success:function(data){ 
    console.log(data)
   },
   error:function(res){ 
    console.log("请求失败!")
   }
  })

(2)被请求js代码

{
 "name":"小明",
 "age":24,
 "array":[1,51,3,4,4,6,64]
}

控制台输出

详解JavaScript原生封装ajax请求和Jquery中的ajax请求

以上如有不对之处,请大家多多指正,感谢大家对三水点靠木的支持。

jQuery 相关文章推荐
jquery append与appendTo方法比较
May 24 jQuery
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
jQuery中each方法的使用详解
Mar 18 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
JQuery获得内容和属性方法解析
May 30 jQuery
jQuery实现简单QQ聊天框
Aug 27 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 #jQuery
jquery无缝图片轮播组件封装
Nov 25 #jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 #jQuery
JQuery中queue方法用法示例
Jan 31 #jQuery
AJAX在JQuery中的应用详解
Jan 30 #jQuery
jQuery访问json文件中数据的方法示例
Jan 28 #jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 #jQuery
You might like
php Try Catch异常测试
2009/03/01 PHP
php smarty模版引擎中的缓存应用
2009/12/02 PHP
php array_pop()数组函数将数组最后一个单元弹出(出栈)
2011/07/12 PHP
探讨如何把session存入数据库
2013/06/07 PHP
php cURL和Rolling cURL并发方式比较
2013/10/30 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
javascript字典探测用户名工具
2006/10/05 Javascript
JS实现距离上次刷新已过多少秒示例
2014/05/23 Javascript
javascript 判断整数方法分享
2014/12/16 Javascript
angular ngClick阻止冒泡使用默认行为的方法
2016/11/03 Javascript
Angular.JS中指令ng-if的注意事项小结
2017/06/21 Javascript
vue之浏览器存储方法封装实例
2018/03/15 Javascript
使用RN Animated做一个“添加购物车”动画的方法
2018/09/12 Javascript
如何使用VuePress搭建一个类型element ui文档
2019/02/14 Javascript
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
2020/03/10 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
2020/07/23 Javascript
[02:15]2014DOTA2国际邀请赛 专访LGD.lin小兔子是大腿
2014/07/14 DOTA
python连接sql server乱码的解决方法
2013/01/28 Python
Python中除法使用的注意事项
2014/08/21 Python
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
Python中函数参数设置及使用的学习笔记
2016/05/03 Python
Python的Flask框架中集成CKeditor富文本编辑器的教程
2016/06/13 Python
wxpython中自定义事件的实现与使用方法分析
2016/07/21 Python
python利用lxml读写xml格式的文件
2017/08/10 Python
使用Python读取安卓手机的屏幕分辨率方法
2018/03/31 Python
解决Pycharm 中遇到Unresolved reference 'sklearn'的问题
2020/07/13 Python
HTML块级标签汇总(小篇)
2016/07/13 HTML / CSS
预备党员承诺书
2014/03/25 职场文书
省文明单位申报材料
2014/05/08 职场文书
安全宣传标语
2014/06/10 职场文书
学校百日安全活动总结
2015/05/07 职场文书
2016年世界艾滋病日宣传活动总结
2016/04/01 职场文书