详解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插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
详解jquery选择器的原理
Aug 01 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
jQuery创建及操作xml格式数据示例
May 26 jQuery
jQuery实现轮播图及其原理详解
Apr 12 jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 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
第十四节 命名空间 [14]
2006/10/09 PHP
支持oicq头像的留言簿(二)
2006/10/09 PHP
PHP+ACCESS 文章管理程序代码
2010/06/21 PHP
php max_execution_time执行时间问题
2011/07/17 PHP
php MessagePack介绍
2013/10/06 PHP
PHP中Fatal error session_start()错误解决步骤
2014/08/05 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
JavaScript 自动完成脚本整理(33个)
2009/10/20 Javascript
javascript检测页面是否缩放的小例子
2013/05/16 Javascript
js 将json字符串转换为json对象的方法解析
2013/11/13 Javascript
JS动态修改图片的URL(src)的方法
2015/04/01 Javascript
AngularJS中table表格基本操作示例
2017/10/10 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
2017/12/07 Javascript
微信小程序实现点赞、取消点赞功能
2018/11/02 Javascript
详解angularjs4部署文件过大解决过程
2018/12/05 Javascript
JavaScript数据结构之栈实例用法
2019/01/18 Javascript
Python多层嵌套list的递归处理方法(推荐)
2016/06/08 Python
python中的lambda表达式用法详解
2016/06/22 Python
python查询mysql,返回json的实例
2018/03/26 Python
Python中实例化class的执行顺序示例详解
2018/10/14 Python
详解python之heapq模块及排序操作
2019/04/04 Python
使用Pandas对数据进行筛选和排序的实现
2019/07/29 Python
通俗易懂了解Python装饰器原理
2020/09/17 Python
使用HTML5和CSS3表单验证功能
2017/05/05 HTML / CSS
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
中间件分为哪几类
2012/03/14 面试题
酒店个人培训自我鉴定
2013/12/11 职场文书
成绩单家长评语大全
2014/04/16 职场文书
学生吸烟检讨书
2014/09/14 职场文书
建国大业观后感600字
2015/06/01 职场文书
2015年美容师个人工作总结
2015/10/14 职场文书
2016年世界艾滋病日宣传活动总结
2016/04/01 职场文书
八年级作文之感恩
2019/11/22 职场文书
Python Django 后台管理之后台模型属性详解
2021/04/25 Python
Mysql数据库命令大全
2021/05/26 MySQL
mysql 如何获取两个集合的交集/差集/并集
2021/06/08 MySQL