详解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 相关文章推荐
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
jQuery Position方法使用和兼容性
Aug 23 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
实现jquery放大镜的两种方法
Feb 22 jQuery
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
jQuery zTree插件使用简单教程
Aug 16 jQuery
jquery实现轮播图特效
Apr 12 jQuery
jQuery中getJSON跨域原理的深入讲解
Sep 02 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应用程序实现摘要式身份验证的方法详解
2013/06/08 PHP
PHP+FastCGI+Nginx配置PHP运行环境
2014/08/07 PHP
PHP yield关键字功能与用法分析
2019/01/03 PHP
PHPstorm激活码2020年5月13日亲测有效
2020/09/17 PHP
Javascript面向对象扩展库代码分享
2012/03/27 Javascript
javascript测试题练习代码
2012/10/10 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
2015/10/09 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
jquery html5 视频播放控制代码
2016/11/06 Javascript
JS随机排序数组实现方法分析
2017/10/11 Javascript
VueJs使用Amaze ui调整列表和内容页面
2017/11/30 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
2017/12/29 Javascript
深入理解requireJS-实现一个简单的模块加载器
2018/01/15 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
2019/02/27 jQuery
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
vue组件三大核心概念图文详解
2019/05/30 Javascript
Javascript基于OOP实实现探测器功能代码实例
2020/08/26 Javascript
JavaScript WeakMap使用详解
2021/02/05 Javascript
python随机生成指定长度密码的方法
2015/04/04 Python
Python版微信红包分配算法
2015/05/04 Python
Django基础之Model操作步骤(介绍)
2017/05/27 Python
python3.x实现base64加密和解密
2019/03/28 Python
python Tcp协议发送和接收信息的例子
2019/07/22 Python
Python类继承和多态原理解析
2020/02/05 Python
python Plotly绘图工具的简单使用
2020/03/03 Python
python + selenium 刷B站播放量的实例代码
2020/06/12 Python
美国家具网站:Cymax
2016/09/17 全球购物
全球速卖通:AliExpress(国际版淘宝)
2017/09/20 全球购物
short s1 = 1; s1 = s1 + 1;有什么错? short s1 = 1; s1 += 1;有什么错?
2014/09/26 面试题
法人代表委托书
2014/04/04 职场文书
文明班集体申报材料
2014/05/23 职场文书
小班教师个人总结
2015/02/05 职场文书
未婚证明范本
2015/06/15 职场文书
有趣的二维码:使用MyQR和qrcode来制作二维码
2021/05/10 Python
漫画「处刑少女的生存之道」第3卷封面公开
2022/03/21 日漫
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android