?Ajax
Ajax是一种技术 使用过浏览器和内置对象和服务器数据交互的一种技术 ?调用API 运行js代码 在获取服务器代码
浏览器请求:是浏览器本能的请求 地址栏输入地址后 按下回车即可发送请求?? 不需要执行任何js代码? 收到的服务器响应后 浏览器自动渲染 响应结果到界面中?
Ajax请求: 执行JS代码才能实现请求权 向服务器发送在不刷新页面的情况下 响应数据由程序员自行处理 浏览器最多只能帮我们接收相应数据 特点异步 不阻塞 页面无刷新通信 ?应用场景无处不在
请求方式: 向服务器发送的请求,分为多种请求方式 请求方式由HTTP协议规定的 不同的请求方式代表了不同的含义常用的请求方式 GETà获取数据 ?POSTà提交数据 ?PUTà修改数据 ??DELETEà删除数据
客户端 通过执行js代码 发送请求 服务器 进行相应 返回我们想要的东西
GET?获取数据 像服务器发送请求 获取服务器资源 使用GET方式 ?比如 用户信息(用户名 ?昵称 头像等等
POST?提交数据 给服务器 再点击注册时候进行提交数据
其他请求方式 : HTTP 请求方法 - HTTP | MDN
?????? 实现请求 要使用浏览器的内置对象 或者 使用jQuery的方法
$.get(url,[data],[callback],[datatype ])? 请求数 ??[] 为可选的意思 并不是数组 ???
url表示服务器上的资源地址 ??data 要写成对象的方式{? 键: 值, 键: 值,}用于筛选数据 之间用,隔开 callback为请求成功的返回值 是个函数的形式 函数内的第一个形参为含函数请求的数据 function(res) {} 用来接收传来的数据 res取于response响应这个词 我们在这个函数中可以 将数据渲染到DOM上
$.post(url,[data] ,[callback] .[dataType])? // 用于发送数据 ?可以使用变量的方式进行传递
$.ajax({url:Ajaxqingqiu数据地址 url:? 必填, ?type: GET 默认是 GET 可选 POST, data:{}请求的参数 可选 success:function(res){} ajax请求成功时的回调 可选 ..其它选项})
地址接口:就是地址 就是接口文档 在工作中都会有一个接口文档进行对照
Renderà渲染
底层实现
Ajax的原生代码使用XMLHttpRequest对象 简称XHR对象 所有浏览器都支持这个对象利用原生
第一步 ?创建 XHR对象let xhr = new XMLHttpRequest() ?
第二步 ??调用 xhr中的对象注册XHR的事件 xhr.onreadystatechange = function () { let res = xhr.responseText} ??onreadystatechange事件当Ajax的请求状态改变的时候触发 也就是readyState值改变的时候
第三步 ?在这个函数内接收响应结果xhr.respons可以获得相应的结果 ?
第四步 在调用xhr.open()方法,初始化一个请求 此方法用于配置请求方式和url xhr.open('GET',’URL’ )传递参数要拼接到URL字符串的形式 ?在调用send方法 发送请求
第五步 xhr.send() 调用send方法，发送 1请求
说明:
在GET请求方式中我们只需要获取服务器中的数据在请求事件内使用接收即可他需xhr.responseText?? GET 和DELETE需要查询字符串 URL?id=1&key= 13200008888这种方式传递参数 在xhr.open('GET/DELETE', 'http://www.itcbc.com:3006/api/getbooks); 就可以完成
在POST中我们需要量数据提交上去 将表单数据收集起来之后 将这个数据放在 send(数据)方法中(我们将这个称之为 请求体) 可以是变量也好 字符串也好 这个的同时 要设置请求头 由setREquestHeader (' Content-Type ', '值') 方法用于设置请求头
第一种请求体 是字符串格式对应的请求为：application/x-www-form-urlencoded
第二种为JSON格式{‘XXX’:’XXX’,’XXX’:’XXX’} 请求头的值为:application/json
第三种为FormData对象 new FormData()?? ;求头的值为multipart/form-data（xhr对象会自动设置） 这写方式 的请求头是为了 服务器更高的接收
请求头完整 ?:xhr.setREquestHeader('content-Type', 'application/x-www-form-urlencoded')
这里设置的Content-Type ，作用是告知服务器，浏览器提交的数据是何种类型的。
值为：application/x-www-form-urlencoded（需要自己指定表示客户端提交的是查询字符串
值为：application/json（需要自己指定）,,表示客户端提交的是 JSON 字符串
值为：multipart/form-data（xhr对象会自动设置），表示客户端提交的是 FormData 对象
对请求参数进行编码
URL中不能出现 中文和符号 所以需要转换?? 不编码可能会有歧义把中文和部分特殊符号转成 URL的标准格式,
这就是url编码
如，把“中文” 进行url编码后得到 “%E4%B8%AD%E6%96%87
RFC文档规定，只有字母和数字[0-9a-zA-Z]、一些特殊符号“$-_.+!*’(),”[不包括双引号]、以及某些保留字，才可以不经过编码直接用于URL。对于Unicode字符，RFC文档建议使用utf-8对其进行编码得到相应的字节，然后对每个字节执行百分号编码，也就是所谓的 URL编码
编码：encodeURIComponent('西游记')?
解码：decodeURIComponent("%E8%A5%BF%E6%B8%B8%E8%AE%B0");
http协议:超文本传输协议
?????? 协议是浏览器和服务器签订的协议 协议双方在传输数据的时候的格式 都有请求行 请求头 请求体 ??服务器也会做出相应 它会做出 响应体 响应头 ?都是协议规定的
readyState属性
请求分为阶段打印的时候 所以会打印好多次 ?查看状态 xhr.readyState 会返回数字 需要log进行打印 on? readystate change? on是当什么时候 ?readystate状态? change改变
当状态值改变的时候就会触发 也就是那个数字 ?所以说事件触发一次状态就改变一次
判断 等ajax完成后 在接收完整的响应结果
xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) {查看并打印 数据装填console.log(xhr.readyState);
获取的数据let res = xhr.responseText console.log(res); }}?? 响应状态码status其中有五类响应状态码 X = 0 1XX 表示响应信息(不常用)? 2XX 表示成功相应 ?3XX 重定向网站改版资源变化 找不到原来的地址 就是重定向 ?4XX客户端错误 请求 不存在的地址 参数写错 ?5XX 服务器端错误
结构赋值 ?把一个值赋给一个变量 展开数组和对象 ?把值拿出来 赋值给一些变量 对象的结构赋值很多 是个无序的 但是有键和值 使用键进行结构 需要使用 : 进行改名 age:age1
对象转字符串
将对象方式的URL请求体转换为字符串的方法
let obj = {id: 1, name: '张飞', age: 11} let arr = [] for (let k in obj) { arr.push(k + '=' + obj[k]) } let str = arr.join('&') console.log(str);
创建空的数组 ?循环遍历对象 将对象中的数据放在空数组的中 并将中=加在期中 再利用join进行拼接字符串
设置超时时间: xhr.timeout = 10000 ?在这个时间段中拿到这个数据 ?如果拿不到 就不要了 请求就取消了 ?xhr.ontimeout=function() {}事件? 求请超时后处理事件
XHR2新增事件
请求的事件
ontimeout -- 请求超时之后，触发的事件
onload -- 请求成功后触发的事件（因为已经表示成功后触发了，所以事件内部就不要加if判断了）
onerror -- 请求失败后触发的事件，比如网络不通造成的请求发送失败
onloadstart -- 请求开始的时候，触发的事件
onloadend -- 请求完成后触发的事件，这里的完成包括成功和失败
onprogress -- 客户端下载（接收）数据的时候，触发的事件(正在接收数据的时候)
显示 获取数据进度(也可以) H5 进度条标签<progress style="display: none;"></progress>
Max与value是进度条的进度 ?e.total表示数据的总大小 ??e.loaded表示已经接收了多少
?
上传事件
Upload.onload 上传成功upload.onprogress上传进度改变的时候 触发事件
FormData对象
快速收集表单数组 (要进行单击事件注册或者 适用onsubmit事件)使用: 首先let fd = mew FormData([form])? 就可以获得所有表单项 ?数据提交会刷新页面 使所有的表单都变为空所以需要使用阻止默认性为阻止跳转e.preventDefault() ?要获取事件对象
FormData对象 中方法
追加一想值? 再次追加不会覆盖 ?fd.append('age', 30)
?获取某项值? 获取第一个 age的值 ???console.log(fd.get('age')); ?获取所有的 age 的值console.log(fd.getAll('age'));?? 修改一个值 fd.set('username', '44444')
在 获取 数据的 时候 每一项都需要有(包括单选与复选 都要有 name) name <input type="text" name="username">? 不能收集到 禁用状态的值 ????也可以收集文件信息 ???如果要检查FormData中有哪些值 直接打印是获得不到的 ??需要进行forEach循环进行查看 ?
?????? 再利用FormData 使用ajax 提交数据的时候 是不使用请求头的 直接在 xhr.send(fd对象) 就可以
jQuery方法请求参数的本质
jQuery的默认转换 首先在$.ajax中 有三种请求参数 首先是对象形式写法 ?第二种是数组形式的([{ name: 'id', value: 1 }, { name: 'appkey', value: '13200008888' }]) ?第三是 字符串类型的 ?无论我们填写的任何的形式的参数 都会被jQuery转换为字符穿的形式 传递到 服务器 如果不希望字符串的形式 则需要使用processData: false进行指定
jQuery也是根据请求方式来区分的: 如果是GET方式，jQuery会把查询字符串拼接到 url? 后面: ?如果是其他方式（POST|PUT|DELETE），jQuery会把查询字符串当做请求体使用，也就是放到 xhr.send() 里
jQuery提交FormData
在利用$.ajax上传的时候 在data:fd中 jQ会默认转换为字符串 这样就会报错 使用processData: false, 禁止词此自动转换 ?contentType: false,提交的是 FormData对象 就不要加 content--Type头了 ?使用FormData获取数据在jQ中必须使用这两个 false ?(注意这里也需要 阻止默认刷新页面 e.preventDefault())? 在JQ中除了GET 其他的请求方式 都会把str当做请求体传递
?????? 在让上传数据显示进度条 jQ中没有关于 进度条的封装 ?但是有xhr选项 值为函数 允许程序员 在xhr选项中 补充自己的原生代码 xhr选项中必须返回一个 xhr对象 return xhr 这样就能融合一起
$.ajaxPrefilter()方法
函数用于指定预先处理Ajax参数选项的回调函数 这里的值为一个函数 ?语法:$.ajaxPrefilter(function(option) {}) option参数是ajax中的所有选项 他的作用是统一配置Ajax
$.ajaxPrefilter()内的事件
?option.beforeSend = function() { }? 数据开始请求触发 相当于 原生的 onloadstart ??option.complete = function() {}? 数据请求完成后触发 相当于 原生的 onloadend
Serialize()和serializeArray()方法
jQuery提供的 serialize() 或者 serializeArray() 方法获取表单各项的值。这一点和 FormData 比较像 语法: $('form').serialize();?? $('form').serialize();
?????? 使用方式 要监听表单 要在事件对象中阻止页面刷新(因为提交表单页面会刷新) e.preventDefault(); 接下来使用 serialize 获取表单数据 要将数据保存在变量内 let str = $(this).serialize(); / $(this).serializeArray()
注意
1.在必须具有 <form>...</form> 标签的前提下，才能使用 serialize() 或者 serializeArray() 方法
2.各项表单元素（input、select、textarea）**必须具备 `name` 属性**，和FormData一样。
3. 通过serialize() 得到的是查询字符串类型；通过 serializeArray()得到的是数组类型。在jQuery中，两种结果都可以直接当作Ajax请求的参数
4. 两个方法均不能获取 禁用状态（disabled的输入框的值，和FormData一样。
?????? 5. 两个方法均不能获取文件域（`<input type="file" />`）的值，这一点和FormData不一样
?????? 6. 两个方法都能获取隐藏域（`<input type="hidden" />`）的值，和FormData一样。
?????? 7. FormData属于原生的代码，收集的结果是FormData对象；serialiaze和serializeArray是jQuery封装的方法，收集的结果会被jQuery转成查询字符串；
同步异步
?????? 同步任务通常来说 程序都是按照顺序执行的 ?前面的任务没有执行完成 后面的代码 只能等待 产生阻塞效果 异步任务 js中的代码属于异步代码 事件 定时器 Ajax请求 除此之外 都是同步代码 所有的异步代码会放到任务队列中进行执行(它会有一个回调函数接收结果) 同步代码继续执行 同步代码执行完成后 检查队列 在调用回调函数 ?同步代码的优先级一定要高于异步代码
在原生的ajax中 服务传来的值 是json文件得格式 我们需要 通过let str = JSON.parse(json数据)? 把JS数据类型转成JSON字符串也是可以 使用的方法是 JSON.stringify()
关于原生请求头的解释
分清三个方法
- xhr.open('GET/POST',’URL’ )
- xhr.send()?? 请求体
- xhr.setREquestHeader('content-Type', 'application/x-www-form-urlencoded')? 请求头
首先是根据请求的类型 也就是 poen(‘是GET还是POST’,’url+’) 当为get 的时候是不需要请求头的 但是需要请求体 但是请求体内不需要写东西 ?当接口有必填的数据的时候 直接在URL后面进行拼接即可 也就是 xhr.open(‘get’,’url’+’必填值’ ) 可以使用拼接字符串的方式 ?当请求类型为 POST时候也就是说要获取数据将数据 传输到服务器中 这个时候就需要请求体帮我们把获取来得数据传递到服务器 xhr.send(数据) 这数据里面必须是字符串 这个字符串的形式 必须是 XXX=XXX&XXX=XXX 这种格式 在将请求头写上去 就可以向服务器添加数据了
?????? 在jQuery中使用$.ajax 不管是GET 还是POST 数据可以直接写在data里 jQuery中会自动将字符串还是 对象 都会转换为字符串 在使用FormData收集数据的时候就需要不需要转换字符串 就需要两个属性 ?使用processData: false, 禁止词此自动转换字符串 ???contentType: false,提交的是 FormData对象 就不要加 content--Type头了? 使用FormData获取数据在jQ中必须使用这两个 false