详解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日程管理控件glDatePicker用法详解
Mar 29 jQuery
jQuery实现动态删除LI的方法
May 30 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
jquery ztree实现右键收藏功能
Nov 20 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
jQuery中$原理实例分析
Aug 13 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
通过jQuery学习js类型判断的技巧
May 27 jQuery
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 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
php.ini中的php-5.2.0配置指令详解
2008/03/27 PHP
深入PHP magic quotes的详解
2013/06/17 PHP
推荐10个提供免费PHP脚本下载的网站
2014/12/31 PHP
PHP扩展框架之Yaf框架的安装与使用
2016/05/18 PHP
Laravel5.0+框架邮件发送功能实现方法图文与实例详解
2019/04/23 PHP
发现的以前不知道的函数
2006/09/19 Javascript
JavaScript修改浏览器tab标题小技巧
2015/01/06 Javascript
点评js异步加载的4种方式
2015/12/22 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
2016/06/13 Javascript
jQuery实现底部浮动窗口效果
2016/09/07 Javascript
jQuery属性选择器用法示例
2016/09/09 Javascript
vue  自定义组件实现通讯录功能
2018/09/30 Javascript
Angular Material Icon使用详解
2018/11/07 Javascript
JS实现音乐钢琴特效
2020/01/06 Javascript
[01:38]2018DOTA2亚洲邀请赛主赛事第二日现场采访 神秘商人痛陈生计不易
2018/04/05 DOTA
Python专用方法与迭代机制实例分析
2014/09/15 Python
python从入门到精通(DAY 3)
2015/12/20 Python
Python序列化基础知识(json/pickle)
2017/10/19 Python
解决django前后端分离csrf验证的问题
2019/02/03 Python
django 通过url实现简单的权限控制的例子
2019/08/16 Python
Python中BeautifuSoup库的用法使用详解
2019/11/15 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
keras的backend 设置 tensorflow,theano操作
2020/06/30 Python
python通过cython加密代码
2020/12/11 Python
css背景图片的背景裁切、背景透明度、背景变换等效果运用
2012/12/24 HTML / CSS
介绍一下Make? 为什么使用make
2016/07/31 面试题
英语自荐信范文
2013/12/11 职场文书
高中英语教学反思
2014/02/04 职场文书
教育技术职业规划范文
2014/03/04 职场文书
食堂厨师岗位职责
2014/08/25 职场文书
2015年司机年终工作总结
2015/05/14 职场文书
关于法制教育的宣传语
2015/07/13 职场文书
初一数学教学反思
2016/02/17 职场文书
详解盒子端CSS动画性能提升
2021/05/24 HTML / CSS
Python Matplotlib库实现画局部图
2021/11/17 Python
Redis sentinel哨兵集群的实现步骤
2022/07/15 Redis