Ajax-05

xhr（level-2）新特性

responseType属性和response属性

responseType: 表示预期服务器返回的数据的类型

“” ，默认空
text，和空一样，表示服务器返回的数据是字符串格式
json，表示服务器返回的是json格式
document，表示服务器返回的是xml格式

    <script>let xhr = new XMLHttpRequest();xhr.onreadystatechange = function () {if (this.readyState === 4 && this.status === 200) {console.log(this.response);}};xhr.responseType = 'json'; // 指定，服务器返回的数据是json类型xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks');xhr.send();</script>

response：响应

用于接收服务器返回的结果
response可以接收任何类型的结果
会根据responseType指定的值，自动处理服务器返回的结果（自动将JSON转成JS）

onload事件

onloadend事件

onloadstart事件

    <script>// window.onload = function () {// }let xhr = new XMLHttpRequest();// ajax请求完毕(成功)，当readyState===4的时候，会触发xhr.onload事件xhr.onload = function () {// ? 能不能在这里接收到服务器返回的结果// ? 要不要加判断，然后在接收结果console.log(this.response);};xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks');xhr.send();/*相关的其他事件：- onload          ajax请求成功之后触发- onloadstart     ajax请求之前触发- onloadend       ajax请求完成之后触发（无论成功或失败都会触发）*/</script>

jQuery其他方法

$.ajax()其他选项

$.ajax({type: 'GET',url: 'xxxxx',data: {},success: function (res) {},contentType: false, // 默认值  application/x-www-form-urlencodedprocessData: false,/*下面的选项大家知道，了解即可*/timeout: 10, // 设置请求超时事件ontimeout: function () {}, // 请求超时之后的处理函数beforeSend: function () {}, // 发送请求之前触发的函数complete: function () {}, // 表示请求响应结束之后触发的函数（无论成功失败）dataType: 'json', // 预期服务器返回数据的类型，相当于responseTypeheaders: {}, // 用于设置请求头xhr: function () {let xhr = new XMLH........return xhr; // 必须return  xhr对象}, // 允许我们自定义xhr对象来完成一些jQuery做不到的事
});

$.ajaxSetup();

全局配置ajax选项：

$.ajaxSetup({// 对象里面的内容，和$.ajax里面的对象的内容格式一样timeout: 100, // 全局配置请求超时时间为100毫秒type: 'POST', // 全局配置请求方式为POST
});

$(document).ajaxStart();

ajax请求开始，触发的事件

$(document).ajaxStop();

ajax请求终止后触发的事件

例如：NProgress.start() 和 NProgress.done() 的作用相同

$.ajaxPrefilter();

在每个ajax请求发送之前，自定义ajax的选项或修改ajax的选项。

$.ajaxPrefilter(function (options) {// options是当前ajax请求的所有选项// 得到ajax请求的所有选项之后，可以对他进行修改
});

axios简介

它是别人封装的一个能够实现ajax请求的库。
体积小，文件大小官方说6kb。
专门用于处理ajax请求，比jQuery还要强大，没有其他功能

// 有没有类似  $.get的方法
axios.get('http://www.liulongbin.top:3006/api/getbooks').then(function (res) {console.log(res);});

https://github.com/axios/axios

跨域（理解）

同源策略

同源指的是，两个url的协议、域名、端口都相同，那么这两个url就是同源的
如果两个url的协议、域名、端口只要要一个不一样，叫做非同源
如果非同源，以下三种行为会受到限制
- DOM无法操作
- cookie无法获取 (了解)
- Ajax请求无效

两个url，指的是打开页面的url，和ajax请求的地址

跨域Ajax请求

打开页面的url 和接口地址的url 如果非同源，就是跨域请求。

我们之前练习的所有案例，都是跨域请求，之所以能够成功，是因为 liulongbin 老师的接口做了处理。

如何实现跨域请求：

JSONP
- 出现的比较早，浏览器都支持。
CORS
- 出现的完，但是是w3c的标准，是标准的解决ajax跨域问题的方法。

JSONP方案实现跨域请求

原生代码实现JSONP：

前端（准备一个函数，比如叫做abc。并且设置好形参，准备接收结果）
前端（使用script标签src属性，去请求jsonp接口，必须指定callback参数，值就是abc）

细节问题：

请求，可以通过network查看，但是注意它不是ajax请求
通过network查看到，服务器返回一个字符串，这个字符串会被浏览器当做js代码解释
正规的JSONP接口，都必须传递callback参数，值是我们准备好的函数名。

jQuery方法实现JSONP

// 方法一：
$.getJSON('url?callback=?', data, callback);// 方法二：
$.ajax({url: '',data: {},success: function (res) {},dataType: 'jsonp' // 必须指定的一项
});

淘宝搜索建议案例

接口

淘宝搜索建议接口：'https://suggest.taobao.com/sug

请求参数： q – 我们输入的值

步骤：

注册输入框的键盘弹起事件
判断输入框的值是否为空
使用JSONP请求接口，获取搜索建议
将搜索建议渲染到页面中（需要自定义ul和css样式）

#sousuo, #sousuo li {list-style: none;padding: 0;margin: 0;
}
#sousuo li {height: 25px;line-height: 25px;padding-left: 5px;color: gray;
}

<!-- 下面的ul放到搜索区的后面 -->
<!-- 搜索建议区 -->
<ul id="sousuo"></ul>

// 注册输入框的keyup事件，当键盘弹起的时候，完成搜索
$('.ipt').keyup(function () {// 判断输入框的值是否为空let val = $(this).val().trim();if (val === '') {// 清空搜索建议列表$('#sousuo').empty();return;}// 发送JSONP请求，获取搜索建议$.ajax({url: 'https://suggest.taobao.com/sug',data: {q: val},success: function (res) {// console.log(res);let str = '';res.result.forEach(item => {str += '<li>' + item[0] + '</li>';});// 把拼接好的li，放到ul中$('#sousuo').html(str);},dataType: 'jsonp' // 必须指定的});
});

CORS方案实现跨域请求

CORS翻译过来，跨域资源共享。

CORS实现跨域，和前端没有关系。前端还是正常的写代码，完成ajax请求即可。

CORS响应头：https://developer.mozilla.org/zh-CN/docs/Glossary/CORS

CORS介绍：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

防抖和节流（掌握）

防抖

节流

Ajax — 第五天相关推荐

ajax 五种状态,ajax的五种状态
ajax的五种状态(readyState ) 0 - (未初始化)还没有调用send()方法 1 - (载入)已调用send()方法,正在发送请求 2 - (载入完成)send()方法执行完成,已经接 ...
Ajax的五种接收响应头消息（常用）
学习本文你得先了解php与Ajax 我的PHP初探 Ajax的了解与应用五种响应头消息 1. textt/plain 字符串服务端的消息响应头:header("Content-Type: ...
掌握Ajax 第五部分参考资料
学习您可以参阅本文在 developerWorks 全球站点上的英文原文. 学习介绍 Ajax 的本 developerWorks 系列的前几篇文章: "掌握 Ajax,第 1 部分:A ...
前端学习（1430）：ajax封装五
ajax.js // 引用expess框架 const express = require('express'); // 处理路径 const path = require('path');const ...
从零开始学习jQuery (六) AJAX快餐【转】
一.摘要本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章讲解如何使用jQuery方便快捷的实现A ...
$.ajax data怎么处理_不会吧，不会吧，不愧是Ajax，jQuery Ajax啊
Ajax and jQuery Ajax 我们做前端的,肯定不会只满足于写一些静态网页,我们希望做到网站(与服务器)的数据交互.不得不说,现在前端的发展真是太快了,不断的更新迭代,新的技术就如同雨后春 ...
jQuery学习之jQuery Ajax用法详解
jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...
AJAX开发简略（转）
AJAX开发简略... 1 一.AJAX定义... 3 二.现状与需要解决的问题... 3 三.为什么使用AJAX. 4 四.谁在使用AJAX. 6 五.用AJAX改进你的设计... 6 例子1:数据 ...
从零开始学习jQuery (六) AJAX快餐
本系列文章导航从零开始学习jQuery (一) 开天辟地入门篇从零开始学习jQuery (二) 万能的选择器从零开始学习jQuery (三) 管理jQuery包装集从零开始学习jQuery ( ...

Ajax — 第五天