AJAX
什么是Ajax？
是指一种创建交互式网页应用的网页开发技术。
- AJAX：Asynchronous Javascript And XML（异步JavaScript和XML）
- 交互：这里的交互指客户端和服务器的数据是可以相互传递和使用的。
- XML：一种类似于HTML的标记语言，可以将数据结构化，XML已经被JSON淘汰了。
- 异步：异步指程序可以同时执行，同步指程序需要按照顺序执行。
特点:
在不提交整个页面的情况下,实现页面的局部刷新;
AJAX产生的背景：
以前做数据交互的时候，大家通常选择使用表单的方式提交数据，表单提交这种方式，默认的时候会由当前页面跳转到action页面，所以用户体验及其糟糕，所以需要想办法让当前页面，不跳转的同时把数据传递过去，把服务器响应的内容拿回来。
AJAX解决的问题：
指不刷新当前页面，把某些数据传递给服务器，把某些数据从服务器拿回客户端。
注意：AJAX必须依赖www服务执行，即使用http协议来运行。
ajax常用代码
// 建立ajax请求对象
var xhr = new XMLHttpRequest();
// 创建TCP连接，请求行
xhr.open("get", "../php/data.php");
// 发送请求
xhr.send();
// 等待响应结果
xhr.onreadystatechange = function () {
// xhr.readyState == 4 服务器处理完毕返回响应结果(4)
// xhr.status == 200 服务器响应结果也是成功的
console.log(xhr.readyState, xhr.status);
if (xhr.readyState == 4 && xhr.status == 200) {
// 获取响应的数据（文本）
var GoodsListText = xhr.responseText;
// console.log('响应的数据：',GoodsListText);
// 转化为对象类型
var goodsListData = JSON.parse(GoodsListText);
// console.log(goodsListData);
}
}
创建Ajax核心对象
// W3C标准：
var xhr = new XMLHttpRequest();
// IE标准：
var xhr = new ActiveXObject("Msxml2.XMLHTTP"); // msxml3.0
// or
var xhr = new ActiveXObject("Microsoft.XMLHTTP"); // msxml2.6
建立连接
// 语法：
xhr.open("get", url, true);
open() 方法中:
- 第1个参数指请求的发送方式，值为get或post。
- 第2个参数指请求的url路径。
- 第3个参数指请求是异步还是同步，如果写true表示异步（默认true），写false表示同步，现在不允许使用false。
发起请求
是异步的（暂时理解为有一个延时器）
// 语法：
xhr.send();
如果是get方式发送请求，send()命令中不用写任何参数
传递的数据可以写在url中，服务器php文件用$_GET[“参数名”]接收。
接收响应
// 异步时需要通过 onreadystatechange 监听
// 指如果xhr对象的预备好的状态发生了变化时，触发函数。
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
alert(xhr.responseText);
}
}
// 请求状态4：响应已完成；您可以获取并使用服务器的响应了。
// HTTP状态码200：ok，页面正确打开，并得到完整的响应内容。
- onreadystatechange指本次ajax请求的状态发生改变时所触发的事件
- readyState 指请求状态
0：请求未初始化（还没有调用 open()）。
1：请求已经建立，但是还没有发送（还没有调用 send()）。
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
4：响应已完成；您可以获取并使用服务器的响应了。
- status 指http状态（常用的http状态码，稍微了解下即可）
- 请求中 100
- 成功 200
- 重定向 300
- 失败 400
200：ok，页面正确打开，并得到完整的响应内容。
301：被请求的资源已永久移动到新位置
302：请求的资源临时从不同的 URI响应请求
304：缓存
404：页面不存在。
500：常指后端代码发生错误
503：由于临时的服务器维护或者过载，服务器当前无法处理请求。
- responseText指接收到的响应结果
GET和POST
W3C建议我们使用get获取数据，使用post发送数据。
但实际上，无论是get还是post，都即可以发送数据，也可以接收数据。
区别：
- get是以url的方式传递数据；而post是以http请求中的body部分传递数据。所以有种说法说post更安全。
- get传递数据时，直接在浏览器地址栏中可以看到；而post可以使用开发者工具中看到。
- get传递的数据，中文会被编码或有可能出现乱码；而post不会。
- get在IE下会走缓存；而post不会。
GET 和 POST 可传递的最大值是多少？
网上流传的一种说法是，GET 256b，POST 2M，这种说法不太准确。
-
GET 是通过 URL 传递的，HTTP协议没有对URL长度和参数个数进行限制。这个限制是特定的浏览器和服务器对URL进行了限制。IE为2083字节（2KB+35）；Firefox为65535字节；Safari为80000字节；Opera为190000字节；Chrome为8182字节；Apache能够接收url最大长度为8192字节；IIS为16384字节。
-
POST理论上没有长度的限制，HTTP协议没有对POST进行限制，起限制的是服务器的处理程序的处理能力。
Tomcat默认为2M；IIS默认为4M，也可以通过设置，让POST内容无限大，但要注意服务器和内存能力。
ajax使用post
-
设置请求头，将传输的数据改为formData类型
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); -
post 方式传递的参数要放在send（）中
xhr.send("数据名1=数据值&数据名2=数据值")
var xhr = new XMLHttpRequest();
xhr.open("post", url, true);
// 如果是post方式发送请求，需要设置请求头才能正确把数据传递给后端页面。
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// 客户端向服务器端发送数据，服务器php用$_POST["参数名"]接收。
xhr.send("数据名1=数据值&数据名2=数据值")
// 客户端接收服务器的响应内容
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
alert(xhr.responseText);
}
}
Ajax的异步问题
同步和异步的概念
同步: 按步骤 按顺序进行
异步: 同时执行,也叫并发;
举例说明: 假如
吃饭(10分钟) 洗衣服(30分钟) 玩游戏(60分钟)
同步(按步骤 按顺序进行)
先吃饭 -> 洗衣服 -> 玩游戏 (100) // 单线程
异步(同时执行,也叫并发)
吃饭
洗衣服 => 60 // 多线程
玩游戏
但是很尴尬 JS是单线程的.
为什么JavaScript是单线程？
JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。
JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？
Javascript 如何解决异步问题?
单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。
JavaScript语言的设计者也意识到这个问题，于是，所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入”任务队列”（task queue）的任务，只有”任务队列”通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行;
具体来说，异步执行的运行机制如下。
（1）所有同步任务都在主线程（同步代码）上执行，形成一个执行栈（execution context stack）。
（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
（3）一旦"执行栈"中的所有同步任务执行完毕（主线程执行完毕），系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈（主线程），开始执行。
（4）主线程不断重复上面的第三步
同步
同步执行很快
异步
xhr.send()；异步任务（等主线程执行完毕之后执行）发送请求
console.log(xhr.readyState)；事件=>readystate改变时触发
页面加载时，获取不到元素，元素还没有渲染出来，无法获取对应元素绑定事件
ajax绑定事件
解决方法1
- 先动态生成，再获取元素，绑定事件
解决方法2
- 事件委托（给未来生成的元素绑定事件 => 利用事件冒泡的原理，把子元素的事件委托给父元素执行）
- 计时器
- 延时器
- ajax的send那一步
ajax封装
post
post封装1 缺点：参数必须一一对应
get("../php/get.php", "user=a123123&pwd=123123", true, "json", function () {
console.log("请求结束");
});
// 封装
function get(url,data,async,dataType,success) {
var xhr =new XMLHttpRequest();
xhr.open = ("get",url+ "?" + data,async);
xhr.send();
xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status == 200 ){
var result = xhr.responseText;
if (dataType == "json") { // JSON.parse()之后赋值原来的变量
result = JSON.parse(result);
}
console.log(result);
}
// 请求成功返回回调函数
if(success) {
success(result);
}
}
}
封装2 对象数据，让参数排名不分先后
但是 data数据还需要自己手动拼接
{type,ur1,data,async,dataType,success}
get({
url: "../php/get.php",
data : "user=a123&pwd=123",
// async:true,
dataType:"json",
success : function (result){
console.log(result)
}
})
// 封装
function get(options) {
var {url,data = "",async = true,dataType = "text",success} = options;
var xhr = new XMLHttpRequest();
xhr.open = ("get", url + "?" + data, async);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var result = xhr.responseText;
if (dataType == "json") { // JSON.parse()之后赋值原来的变量
result = JSON.parse(result);
}
console.log(result);
}
// 请求成功返回回调函数
if (success) {
success(result);
}
}
}
封装3 将data传入对象数据，自动拼接为参数队列
- 判断 data数据的类型，如果是对象类型遍历对象拼接为对应的字符串
for ...in 遍历拼接
// 对象，拼接url参数队列
get({
url: "../php/get.php",
data: {
user: "a123123",
pwd: "123123",
},
dataType: "json",
success: function (result) {
console.log(result);
}
})
// 封装
function get(options) {
var { url, data = "", async = true, dataType = "text", success } = options;
var xhr = new XMLHttpRequest();
// 判断data的数据类型，如果是对象类型，则遍历拼接为对应的字符串
if(data instanceof Object){
var dataStr = "";
for(var key in data){
dataStr += key + "=" +data[key] + "&";
}
// 去掉最后一个&
data = dataStr.substring(0, dataStr.length - 1);
}
xhr.open("get", url + "?" + data, async);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var result = xhr.responseText;
if (dataType == "json") { // JSON.parse()之后赋值原来的变量
result = JSON.parse(result);
}
console.log(result);
}
// 请求成功返回回调函数
if (success) {
success(result);
}
}
}
封装
$.ajax({
type: "get",
url: "../php/isExist.php",
data: {
user: user,
},
// async:true,
dataType: "json",
success(data) { // 形式参数 (后台返回的数据(已经处理好的))
if (data.status) {
userSpan.className = "user_span right";
userSpan.textContent = "√";
userFlag = true;
// console.log(userFlag);
} else {
userSpan.className = "user_span err";
userSpan.textContent = data.msg;
}
}
})
// 模拟jquery的$ajax的封装
$.ajax({
type, // get(默认是get)/post
url, // 请求的地址
data, // "user=a123123" {user:"a123123"} 请求过程中传递的数据
async, // true/false 是否异步
dataType, // text(默认)/json 如果数据格式为json，需要JSON.parse
success: function (res) { } // 成功时的回调函数
})
回调函数
把函数当成参数（形参）传递到另一个函数中，让它在另一个函数中执行
// ajax_get_post
// url, data, async = true, dataType = "text", success
function ajax(options) { //此处只接受对象参数
// let url = options.url;
// let data = options.data;
let { type = "get", url, data, async = true, dataType = "text", success } = options;
var req = new XMLHttpRequest();
// req.open("get", "../php/isExistUser.php?user=a123123", true);
// 如果data 是字符串 就直接拼接
// 是对象 遍历对象 转化为字符串
if (Object.prototype.toString.call(data) == "[object Object]") { //是对象 遍历对象 转化为字符串
var str = "";
for (var key in data) {
console.log(key, data[key]);
str += key + "=" + data[key] + "&";
}
console.log(str); //"user=a123123&pwd=123123&" 在讲多余的 & 去掉
data = str.substring(0, str.length - 1);
}
if (type == "get") {
req.open("get", url + "?" + data, async)
req.send();
} else {
req.open("post", url, async);
req.setRequestHeader("content-type", "application/x-www-form-urlencoded");
req.send(data);
}
req.onreadystatechange = function () {
if (req.readyState == 4 && req.status == 200) {
// console.log(req.responseText);
var result = req.responseText; // 请求的数据（普通文本/JSON类型的字符串）
if (dataType.toLowerCase() == "json") {
result = JSON.parse(result); // JSON类型的字符串
}
// console.log(result);
if (success) {
success(result); // result 函数success调用时的实际参数
}
}
}
}
ajax请求本地文件
ajax请求
- 可以请求后端接口（php=> apache）
- 可以请求本地文件 （有服务器环境即可 apache,live server,hbulider.）
ajax二次封装
细节：
-
参数默认值
-
请求类型，给默认值放到最后
使用前提：
-
实际参数一一对应
-
params 必须是对象数据
-
接口返回数据必须是json类型的字符串
-
引入前提
-
先引入ajax.js
-
再引入request.js
箭头函数
2149
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
