JavaScript原生封装ajax请求和Jquery中的ajax请求
- 前言: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)
}
}
- 控制台输出
(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)
}
}
- 控制台输出
(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]
}
- 控制台输出
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--Ajax基础--Ajax全接触--jQuery中的AJAX
用jQuery实现Ajax jQuery.ajax([settings]) type:类型,“POST”或“GET”,默认为“GET” url:发送请求的地址 data:是一个对象,连同请求发送到服务 ...
- AJAX学习笔记——jQuery中的AJAX
用jQuery实现Ajax jQuery.ajax([settings]) 1.type:类型, "POST"或"GET" ,默认为"GET" ...
- 原生 JS 与 jQuery 中的 AJAX
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更 ...
- js中的原生Ajax和JQuery中的Ajax
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). js中的Ajax: 参数介绍: open(String method,Str ...
- 在jquery中使用AJAX
在jquery中使用封装好的AJAX会对开发效率起到极大的便利,因此掌握jquery中的一系列AJAX封装函数是做好页面数据交互的必备技能: 1.在之前,我们首先需要详细了解AJAX异步请求接受的五中 ...
- Jquery中的Ajax
AJAX: * jQuery中的Ajax * 封装第一层 - 类似于原生Ajax的用法 * $.ajax() - 最复杂 * 选项 * url - 请求地址 * type - 请求类型,默认为GET ...
- 【Java EE 学习 33 上】【JQuery样式操作】【JQuery中的Ajax操作】【JQuery中的XML操作】
一.JQuery中样式的操作 1.给id=mover的div采用属性增加样式.one $("#b1").click(function(){ $("#mover" ...
- 两强相争,鹿死谁手 — JQuery中的Ajax与AngularJS中的$http
一.JQuery与AngularJS 首先,先简单的了解一下JQuery与AngularJS.从源头上来说,两者都属于原生JS所封装成的库,两种为平行关系. 二.Ajax请求与数据遍历打印 这里是Aj ...
- jQuery入门(4)jQuery中的Ajax应用
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
随机推荐
- 笨办法学Python
打印:%r%r 与 %s 的区别就好比 repr() 函数处理对象与 str() 函数处理对象的差别.%s => str(),比较智能%r => repr(),处理较为简单和直接 from ...
- 将idea中xml文件背景颜色去除(转)
原贴链接:https://blog.csdn.net/weixin_43215250/article/details/89403678 第一步:除去SQL代码块的背景颜色,步骤如下 设置后还是很影响视 ...
- div+css制作哆啦A梦
纯CSS代码加上 制作动画版哆啦A梦(机器猫) 哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS.代码,来做一个动画版的哆啦A梦. 效果图: 下面代码同学可以查看一下,每个线条及椭 ...
- Python 08 skimage
原文:https://www.cnblogs.com/xdjun/p/7874794.html 命令: pip install numpy pip install scipy pip install ...
- 分类模型的性能评价指标(Classification Model Performance Evaluation Metric)
二分类模型的预测结果分为四种情况(正类为1,反类为0): TP(True Positive):预测为正类,且预测正确(真实为1,预测也为1) FP(False Positive):预测为正类,但预测错 ...
- 61、Spark Streaming:部署、升级和监控应用程序
一.部署应用程序 1.流程 1.有一个集群资源管理器,比如standalone模式下的Spark集群,Yarn模式下的Yarn集群等. 2.打包应用程序为一个jar包. 3.为executor配置充足 ...
- 2016级移动应用开发在线测试12-service
有趣有内涵的文章第一时间送达! 喝酒I创作I分享 生活中总有些东西值得分享 @醉翁猫咪 1. Service是Android系统中的四大组件之一(Acitivty.Service.ContentPr ...
- csp退役前的做题计划1(真)
csp退役前的做题计划1(真) 因为我太菜了,所以在第一次月考就会退役,还是记录一下每天做了什么题目吧. 任务计划 [ ] Z算法(Z Algorithm) 9.28 [x] ARC061C たくさん ...
- rust数据类型
fn main() { //char支持4个字节,支持emoji let jp = "ゆ"; let emoji = "✨"; let ch = "囧 ...
- better-scroll在vue项目中的使用
1.准备工作 在项目中安装better-scroll: npm install --save better-scroll 组件中引入插件 import BScroll from "bette ...