ajax
定义 ：异步的JavaScript 和 XML
是一种综合技术:运用了XMLHTTPRequest (xhr) 和服务器交换数据，通过JavaScript 局部渲染页面，从而实现异步的局部更新
同步与异步
同步 代码按顺序执行，会阻塞代码执行(alert)
异步 不会阻塞代码
XMLHTTPRequest xhr
1 var xhr = new XMLHttpRequest(); 2 xhr.open("GET",'./be.txt',true) 3 //打开的方法 地址 是否异步 4 xhr.send(); 5 // 发送出去 6 xhr.onreadystatechange = function(){ 7 if(xhr.readyState === 4&&xhr.status == 200){ 8 /* 如果xhr的状态是第4个状态 响应码为200 */ 9 console.log(xhr.responseText); 10 //输出ajax 返回的文本内容 11 pp.innerHTML = xhr.responseText 12 } 13 }
xhr
- open()
- send()
- setRequestHeader()
- xhr.readtstate
- 0,未初始化
- 1，请求参数已准备，尚未发送请求
- 2，已经发送请求，尚未接收响应
- 3，正在接收部分响应
- 4，响应全部接收完毕
- stateText () 响应码
- stateText 响应文本 Ok代表成功
优缺点
优点
- 不刷新更新页面，提升用户体验
- 异步的 提升页面的加载速度
- 减轻服务器压力，实现浏览器渲染
缺点
- 对搜索引擎不友好
文件上传
1 var xhr = new XMLHttpRequest(); 2 // 建立xhr对象 3 xhr.open("POST","https://www.520mg.com/ajax/file.php",true); 4 // 打开http连接 5 var data = file.files[0]; 6 // 获取文件 7 var fdata = new FormData(); 8 fdata.append("file",data); 9 // 获取formData 要传递的表单文件 10 // 监听xhr的加载事件 11 xhr.upload.onprogress =function(e){ 12 // console.log(e); 13 // 监听上传文件的进度 14 console.log(e.loaded,e.total,Math.round(e.loaded/e.total*100)+"%") 15 // e。loaded是已上传，e.total总文件大小 16 } 17 xhr.onload = function(){ 18 console.log(xhr); 19 var res = JSON.parse(xhr.responseText); 20 // 把json字符串转换为javascript对象 21 if(res.error==0){ 22 var img = document.createElement("img"); 23 img.src ="https://www.520mg.com"+res.pic; 24 img.width=100; 25 // 创建一个图片 设置 src 与宽 26 document.body.append(img); 27 // 插入到页面中 28 29 } 30 31 } 32 xhr.send(fdata); 33 // 发送
ajax jquery
- $.ajax()
- $.get()
- $.post()
- 第三层
- elem.load(xx) 加载xx内容 到elem元素
- $.getScript(xxx) 加载xxx文件 执行js
- $.getJSON(xx) 加载xx文件
- 所有的jquery ajax方法 都支持三种写法
1$.getJSON(url,function(response,status.xhr){ 2 /* url 请求的地址 3 function 请求成功回调函数 4 response 请求响应的数据 5 status 'successs' 6 xhr.jquery的Promise 对象*/ 7 })
jquery ajax 相关函数调用方式
- 回调函数
1 $.getJSON(url,function(res,status,xhr){}) 2 3 //2. promise 函数 4 5 $.getJSON(url) 6 .then(res=>{}) 7 .catch(err=>{}) 8 9 $.getJSON(url) 10 .done(res=>{}) 11 .fail(err=>{}) 12 .always(res=>{})
fetch
get
1 fetch(url) 2 .then(res=>res.json{}) 3 .then()
post
1 fetch(url,{ 2 method:'POST', 3 body:"name=xiaoming&age=18", 4 headers:{'Content-Type':'application-x/www-form-urlencodeed'} 5 }) 6 .then() 7 .then
加载提示
1$(document).ajaxStart(function(){}) 2// 开始ajax
1$(document).ajaxStop(function(){}) 2// 结束ajax
$.ajax({})
- url 请求的地址
- method 请求的方法 GET | POST
- dataType 返回数据类型 json jsonp text
- jsonp 跨域回调方法 默认 callback
- success 成功
- error 失败
- done 完成
- fail 失败
- beforeSend 发送前
- compelete 发送完毕
- Content-Type:'application/x-www-form-urlcoded'
$.get $.post
- url
- data(可选)
- function(res,status,xhr)
jquery ajax Promise 对象
- .then
- .catch
- .done
- .fail
- .always
- status 状态 200
- statusText ok
- readyState 4