详解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实现按比例缩放图片的方法
Apr 29 jQuery
jQuery Tree Multiselect使用详解
May 02 jQuery
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
jquery实现动态改变css样式的方法分析
May 27 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
jquery轮播图插件使用方法详解
Jul 31 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实现的json类实例
2015/07/28 PHP
Laravel框架集合用法实例浅析
2020/05/14 PHP
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
jquery实现兼容IE8的异步上传文件
2015/06/15 Javascript
.NET微信公众号开发之创建自定义菜单
2015/07/16 Javascript
js+html5实现可在手机上玩的拼图游戏
2015/07/17 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
jQuery实现带水平滑杆的焦点图动画插件
2016/03/08 Javascript
浅析Bootstrip的select控件绑定数据的问题
2016/05/10 Javascript
js事件驱动机制 浏览器兼容处理方法
2016/07/23 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
ReactNative中使用Redux架构总结
2017/12/15 Javascript
从理论角度讨论JavaScript闭包
2019/04/03 Javascript
微信小程序搭建自己的Https服务器
2019/05/02 Javascript
layui点击数据表格添加或删除一行的例子
2019/09/12 Javascript
ElementUI中el-tree节点的操作的实现
2020/02/27 Javascript
基于JavaScript实现随机点名器
2021/02/25 Javascript
使用python实现baidu hi自动登录的代码
2013/02/10 Python
常用python编程模板汇总
2016/02/12 Python
浅谈python 线程池threadpool之实现
2017/11/17 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
python 一个figure上显示多个图像的实例
2019/07/08 Python
python中xlutils库用法浅析
2020/12/29 Python
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
2013/01/09 HTML / CSS
Kipling凯浦林美国官网:世界著名时尚休闲包袋品牌
2016/08/24 全球购物
欧洲第一的摇滚和金属乐队服装网站:EMP
2017/10/26 全球购物
澳大利亚领先的在线药房:Pharmacy Online(有中文站)
2020/02/22 全球购物
几道PHP的面试题
2012/05/19 面试题
新浪网技术部笔试题
2016/08/26 面试题
为什么Runtime.exec(“ls”)没有任何输出?
2014/10/03 面试题
2015年法院工作总结范文
2015/04/28 职场文书
收入证明申请书
2015/06/12 职场文书
结婚司仪主持词
2015/06/29 职场文书
SQL IDENTITY_INSERT作用案例详解
2021/08/23 MySQL
JavaScript组合继承详解
2021/11/07 Javascript