ajax、fetch、jqueryAjax的区别及优缺点

来源:程序思维浏览:2236次
Ajax是异步的xml 和javascript,是一种综合技术。利用 XMLHttpRequest(xhr)和后端进行数据交换。通过js 动态的渲染页面实现网页异步局部更新。


同步与异步

同步代码会按顺序执行,当前面代码未执行完毕,后续代码不会执行,会阻塞代码执行

异步不会阻塞代码

XMLHttpRequest(xhr)

创建xml对象
var xhr = new XMLHttpRequest();

打开HTTP连接
xhr.open(method,url,aync=true)

监听xhr的变化
xhr.onreadystatechange = function(){
     if(xhr.readyState==4&&xhr.status==200){
    console.log(xhr.responseText);
    p.innerHTML = xhr.responseText;
}
}

设置头信息
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

发送数据
xhr.send();

GET

//建立一个xhr对象
var xhr = new XMLHttpRequest();
//打开的方法,地址,是否异步
xhr.open("GET","./be.txt",true);
xhr.send();//发送出去
xhr.onreadystatechange = function(){
   if(xhr.readyState==4&&xhr.status==200){
    console.log(xhr.responseText,xhr);
    //输出ajax返回的文本内容
    p.innerHTML = xhr.responseText;
   }/*如果xhr的状态是第4个状态,响应码为200*/
}//监听xhr的变化

POST

//建立一个xhr对象
var xhr = new XMLHttpRequest();
xhr.open("post","http://www.520mg.com/ajax/echo.php",true);
//设置头信息
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//发送http请求数据
xhr.send("name=mumu&age=18");
//监听
xhr.onreadystatechange = function(){
   if(xhr.readyState==4&&xhr.status==200){
    console.log(xhr.responseText);
    p.innerHTML = xhr.responseText;
    console.log("ajax执行B");
   }
}

XHR
open()
send()
setRequestheader()
xhr.readystate

0,'未初始化...'
1,'请求参数已准备,尚未发送请求...'
2,'已经发送请求,尚未接收响应'
3,'正在接受部分响应...'
4,'响应全部接受完毕'

响应内容

response 响应内容
responseText 响应文本内容
responseXML 响应xml内容

status 响应码 200代表成功
statusText 响应的文本 ok代表成功

ajax优缺点

优点

不刷新更新页面,提升用户体验
异步的提升页面的加载速度
减轻服务器压力,实现浏览器端渲染

缺点

对搜索引擎不友好

文件上传

var xhr = new XMLHttpRequest();
//打开http连接
xhr.open("POST","https://www.520mg.com/ajax/file.php",true);
var data = file.files[0];//获取文件
var fdata = new FormData();
fdata.append("file",data);
//获取formData 要传递的表单文件
//监听xhr的加载事件
xhr.upload.onprogress = function(e){
// console.log(e);
//监听上传文件的进度
console.log(e.loaded,e.total,Math.round(e.loaded/e.total*100)+"%");
//e.loaded是已上传,e.total总文件大小
}
xhr.onload = function(){
console.log("json文件",xhr.responseText);
var res = JSON.parse(xhr.responseText);
//把json字符串转换为JavaScript对象
if(res.error==0){
  var img = document.createElement("img");
  img.src = "http://www.lucklnk.com"+res.pic;
  img.width = 200;
  box.appendChild(img);
}
}
xhr.send(fdata);

ajax jQuery

$.ajax()
$.get()
$.post()

第三层----

elem.load(xxx)加载xxx内容到elem元素;
$.getScript(xxx)加载xxxscript文件 执行js;
$.getJson(xxx)加载xxxjson文件
所有的jQuery ajax方法都支持三种写法

回调函数
$.getJSON(url,function(response,status,xhr){
    //url请求的地址
    //funcrion请求成功回调函数
    //response 请求响应的数据
    //status "success"
    //xhr jquery的promise对象
})

Promise

$.getJSON(url)
.then(res=>{})
.catch(err=>{})

传统

$.getJSON(url)
.done(res=>{})
.fail(err=>{})
.always(res=>{})

第二层----
$.get() $.post()

url:url,
data?(post中),
function(res,status,xhr){}

jquery ajax promise对象

.then() .catch()
.done() .fail() .always()
status状态 200 statusText OK readyState 4

全局ajax事件(加载提示)
//开始ajax
$(doxument).ajaxStart(function(e){})
//停止ajax
$(doxument).ajaxStop(function(e){})

$.ajax({})
url 请求的地址
method 请求的方法 GET|POST
dataType 返回数据类型 json jsonp text
jsonp 跨域回调方法默认 callback
success 成功 error 失败
done 完成 fail失败
beforeSend 发送前
compelete ajax完毕
Content-Type:“application/x-www-from-urlencoded”

fetch

get

fetch(url)
.then(res=>res.json())
.then(res=>{
    console.log(res)
})

post

fetch(url,{
    method:"POST",
    body:"name=leh&age=23",
    headers:{'Content-Type':'application/x-www-from-urlencoded'}
})
.then(res=>)
.catch(err=>)

jQuery优化

缓存dom
多使用正确的选择器
原生 # id tag class
子选择 find children
使用min.js
使用 事件$(‘ul’).on(‘click’,‘li’,function(){}) 事件的target 事件冒泡
精品好课
HTML5视频播放器video开发教程
适用人群1、有html基础2、有css基础3、有javascript基础课程概述手把手教你如何开发属于自己的HTML5视频播放器,利用mp4转成m3u8格式的视频,并在移动端和PC端进行播放支持m3u8直播格式,兼容...
React实战视频教程仿京东移动端电商
React是前端最火的框架之一,就业薪资很高,本课程教您如何快速学会React并应用到实战,对正在工作当中或打算学习React高薪就业的你来说,那么这门课程便是你手中的葵花宝典。
VUE2+VUE3视频教程从入门到精通(全网最全的Vue课程)
VUE是目前最火的前端框架之一,就业薪资很高,本课程教您如何快速学会VUE+ES6并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习VUE高薪就...
HTML5基础入门视频教程易学必会
HTML5基础入门视频教程,教学思路清晰,简单易学必会。适合人群:创业者,只要会打字,对互联网编程感兴趣都可以学。课程概述:该课程主要讲解HTML(学习HTML5的必备基础语言)、CSS3、Javascript(学习...
jQuery视频教程从入门到精通
jquery视频教程从入门到精通,课程主要包含:jquery选择器、jquery事件、jquery文档操作、动画、Ajax、jquery插件的制作、jquery下拉无限加载插件的制作等等......
最新完整React视频教程从入门到精通纯干货纯实战
React是目前最火的前端框架,就业薪资很高,本课程教您如何快速学会React并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习React高薪就...
最新完整React+VUE视频教程从入门到精,企业级实战项目
React和VUE是目前最火的前端框架,就业薪资很高,本课程教您如何快速学会React和VUE并应用到实战,教你如何解决内存泄漏,常用库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习Re...
Vue2+Vue3+ES6+TS+Uni-app开发微信小程序从入门到实战视频教程
2021年最新Vue2+Vue3+ES6+TypeScript和uni-app开发微信小程序从入门到实战视频教程,本课程教你如何快速学会VUE和uni-app并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己...
收藏
扫一扫关注我们