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
箭头函数