详解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 相关文章推荐
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
jQuery ajax动态生成table功能示例
Jun 14 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
利用jQuery实现简单的拖曳效果实例代码
Oct 20 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
jquery+php后台实现省市区联动功能示例
May 23 jQuery
jQuery实现可以计算进制转换的计算器
Oct 19 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
收音机怀古---春雷3P7图片欣赏
2021/03/02 无线电
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
PHP实现的简单日历类
2014/11/29 PHP
php中实现xml与mysql数据相互转换的方法
2014/12/25 PHP
PHP可变变量学习小结
2015/11/29 PHP
php一个文件搞定微信jssdk配置
2016/12/12 PHP
js表数据排序 sort table data
2009/02/18 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
JavaScript两种跨域技术全面介绍
2014/04/16 Javascript
jQuery实现切换字体大小的方法
2015/03/10 Javascript
第十章之巨幕页头缩略图与警告框组件
2016/04/25 Javascript
详解ECMAScript6入门--Class对象
2017/04/27 Javascript
Angular2安装angular-cli
2017/05/21 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
2017/07/24 Javascript
浅谈angular2路由预加载策略
2017/10/04 Javascript
微信小程序canvas拖拽、截图组件功能
2018/09/04 Javascript
jquery实现动态改变css样式的方法分析
2019/05/27 jQuery
微信小程序 调用微信授权窗口相关问题解决
2019/07/25 Javascript
js正则匹配多个全部数据问题
2019/12/20 Javascript
JavaScript隐式类型转换代码实例
2020/05/29 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
Eclipse中Python开发环境搭建简单教程
2016/03/23 Python
Python配置mysql的教程(推荐)
2017/10/13 Python
一文总结学习Python的14张思维导图
2017/10/17 Python
Python实现去除列表中重复元素的方法小结【4种方法】
2018/04/27 Python
Python 解析库json及jsonpath pickle的实现
2020/08/17 Python
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
高三自我鉴定
2013/10/23 职场文书
数控专业自荐书范文
2014/03/16 职场文书
高中教师考核方案
2014/05/18 职场文书
服务宗旨标语
2014/07/01 职场文书
联片教研活动总结
2014/07/01 职场文书
简历中自我评价范文
2015/03/11 职场文书
仓库统计员岗位职责
2015/04/14 职场文书
首次购房证明
2015/06/19 职场文书
MySQL分区路径子分区再分区
2022/04/13 MySQL