一、什么是ajax
1 Ajax: asynchronous javascript and xml (异步js和xml)
2 是可以与服务器进行(异步/同步)交互的技术之一。
ajax的语言载体是javascript。 最大特点：页面不刷新
ajax的一些常见应用,使网页无刷新向web服务器发送请求数据.
二、同步和异步
同步: 指的就是事情要一件一件做。等做完前一件才能做后一件任务
异步: 不受当前任务的影响，两件事情同时进行，做一件事情时，不影响另一件事情的进行。
↓↓下图完成同步完成需要17秒，异步需要10秒
三、ajax的使用
XMLHttpRequest对象
通过这个对象，您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。
ajax的运行
一定要打开phpsudy,js文件与php文件在同一主机下,才能请求成功.
get和post的区别
1 get是地址栏的方式访问的,是可见的
2 get方式传递数据量比较小.安全性低.
3 post以非地址栏的形式访问,能够安全且大量的穿递数据
方法
//1. 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//2. 设置请求的类型,以及地址
// 第一个参数:请求方式 get/post
// 第二个参数:请求的地址 需要在url后面拼上参数列表
// 第三个参数：默认是异步
xhr.open("get", "01.php?name=Jepson"，异步/同步);
//3.发送请求到服务器
xhr.send(null);
列如：在页面中添加一个按钮,点击一次向php后台发送一个请求,php将一段文字写入a.txt
<body>
<input type="button" onclick="fn()" value="点击发送ajax" />
<script>
function fn(){
// 1 实例化对象
let xhr = new XMLHttpRequest();
// 2 设置请求的类型以及地址
xhr.open('get','./02.php');
// 3 发送请求,get请求则设置为空,post请求则设置参数
xhr.send();
}
</script>
</body>
php代码如下
<?php
$str = '越懒散,越懒!';
$file = './a.txt';
$f = fopen($file,'a');
fwrite($f,$str);
?>
ajax状态 xhr.readyState
通过监控请求状态，当状态等于4的时候才能接受数据
xhrObj.onreadystatechange - 监听readyState状态，当状态发生改变可调用对应函数处理
ajax五种状态的作用
xhrObj.readyState - 返回当前请求的状态
xhr.readyState = 0时-未初始化,对象已建立,尚未调用open()
xhr.readyState = 1时-初始化,对象建立未调用send()
xhr.readyState = 2时-发送数据,send()方法调用,但是当前的状态及http头未知,请求未完成
xhr.readyState = 3时-数据传输中,接受部分数据
xhr.readyState = 4时-响应内容解析完成
服务器状态码 xhr.status
1**：请求收到，继续处理
2**：操作成功收到，分析、接受
3**：完成此请求必须进一步处理
4**：请求包含一个错误语法或不能完成
5**：服务器执行一个完全有效请求失败
100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本
200——客户端请求成功
201——提示知道新文件的URL
202——接受和处理、但处理未完成
203——返回信息不确定或不完整
204——请求收到，但返回信息为空
205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件
206——服务器已经完成了部分用户的GET请求
300——请求的资源可在多处得到
301——删除请求数据
302——在其他地址发现了请求数据
303——建议客户访问其他URL或访问方式
304——客户端已经执行了GET，但文件未变化
305——请求的资源必须从服务器指定的地址得到
306——前一版本HTTP中使用的代码，现行版本中不再使用
307——申明请求的资源临时性删除
400——错误请求，如语法错误
401——请求授权失败
402——保留有效ChargeTo头响应
403——请求不允许
404——没有发现文件、查询或URl
405——用户在Request-Line字段定义的方法不允许
406——根据用户发送的Accept拖，请求资源不可访问
407——类似401，用户必须首先在代理服务器上得到授权
408——客户端没有在用户指定的饿时间内完成请求
409——对当前资源状态，请求不能完成
410——服务器上不再有此资源且无进一步的参考地址
411——服务器拒绝用户定义的Content-Length属性请求
412——一个或多个请求头字段在当前请求中错误
413——请求的资源大于服务器允许的大小
414——请求的资源URL长于服务器允许的长度
415——请求资源不支持请求项目格式
416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段
417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求
500——服务器产生内部错误
501——服务器不支持请求的函数
502——服务器暂时不可用，有时是为了防止发生系统过载
503——服务器过载或暂停维修
504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长
505——服务器不支持或拒绝支请求头中指定的HTTP版本
get请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<script type="text/javascript">
function f1(){
//创建ajax对象
var xhr = new XMLHttpRequest();
//设置请求的地址
xhr.open('get','./reponse.php');
//发送请求,如果是get请求则参数设置为null
xhr.send();
// onreadystatechange 当请求的状态发生改变时,就会触发
xhr.onreadystatechange=function(){
//显示五种状态
//console.log(xhr.readyState);
//判断当的请求状态等于4时,代表数据传输完成
if(xhr.readyState==4 && xhr.status==200){
//使用responseText接受服务器端传递的数据
//alert(xhr.responseText);
//追加显示到页面中
document.body.innerHTML+=xhr.responseText;
}
}
//alert(xhr.responseText);
}
</script>
<body>
<input type="button" name="" value="点我发送请求" onclick="f1();">
</body>
</html>
post请求
请求步骤
1 创建Ajax对象。
2 设置回调函数。接收后台返回的结果
3 初始化对象。(获取节点对象)
4 设置请求头信息“Content-type,application/x-www-form-urlencoded”
5 发送请求。
发送请求,get请求则设置为空,post请求则设置参数
xhr.send();
实现请求
setRequestHeader() 设置请求头信息
application/x-www-form-urlencoded 设置传递参数时,使用的编码格式(默认)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<script type="text/javascript">
function f1(){
//实例化ajax对象
var xhr = new XMLHttpRequest();
//设置请求的参数,设置以post方式发送请求
xhr.open('post','./post.php');
//如果需要像 HTML 表单那样 POST 数据,以&形式传输数据
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
//构造传递的参数,形式与get传参的方式一致
var data = 'name=张三&age=19';
//发送请求
xhr.send(data);
//接受返回的信息
xhr.onreadystatechange=function(){
//验证当前的装态接受返回的信息
if(xhr.readyState==4){
//接受服务器返回的信
var info = xhr.responseText;
alert(info);
}
}
}
</script>
<body>
<input type="button" name="" value="post请求" onclick="f1();">
</body>
</html>
同步和异步请求
异步：不等待ajax请求响应完毕，直接执行下面的代码
同步：等待ajax请求响应完毕后，再执行下面的代码
设置请求的类型以及地址,第三个参数设置为false,表示同步,设置为true表示异步(默认)
xhr.open('get','http://localhost/demo.php',false);最后一个参数是表示同步或者异步，默认异步
同步示意图：
异步示意图：
服务返回数据格式处理
类型
Text（又称HTML格式）
XML格式
xml数据的处理(了解)
<script type="text/javascript">
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
//接受返回的消息,使用responseXML接受
var info =xhr.responseXML;
var msg=info.getElementsByTagName('msg')[0].innerHTML;
console.log(msg);
}
}
xhr.open('get','./geshi.php');
xhr.send(null);
</script>
[PHP代码]
<?php
header('content-type:text/xml;charset=utf-8');
echo '<?xml version="1.0" encoding="utf-8" ?>
<response>
<status>1</status>
<msg>返回的的消息</msg>
</response>';
JSON格式
使用JOSN.parse()将PHP输出的json字符串转化为对象
四、promise改造ajax依赖调用
使用promise检测ajax的请求状态，利用promise的成功状态函数，返回ajax请求到的数据
promise使用
Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态.
var p = new Promise(function(resolve,reject){})
resolve 代表 决定(成功); reject 代表 失败
方法
.then(callback)的使用(成功时调用)
.catch(callback的用法(失败时调用)
p.then(function(data){
console.log('resolved成功回调');
console.log('成功回调接受的值：',data);
}).catch(function(reason, data){
console.log('catch到rejected失败回调');
console.log('catch失败执行回调抛出失败原因：',reason);
});
效果和写在then的第二个参数里面一样。它将大于10的情况下的失败回调的原因输出
文章最后，放一份自己同Promise封装的ajax
/*
@params = {}
method 方法
url 地址
data 发送的数据
dataType 数据类型
*/
class axios {
static get(params = {}) {
return this.http('get', params)
}
static post(params = {}) {
return this.http('post', params)
}
//http是通用样式
static http(method, params) {
//解构参数
let { url, dataType, data } = params;
//判断url是否为空
if (!url) {
//抛出问题
throw new Error("url不能为空");
}
//判断data,处理data传进来的数据，数据是以对象形式保存的，咱们把他处理成字符串，并拼接上
let param = null;
if (data) {
param = [];
//forin遍历对象，data上以对象形式保存的
for (let attr in data) {
// 使用push以数组的方式保存
param.push(`${attr}=${data[attr]}`)
}
}
//使用join把数组以字符串的形式保存
param = param.join("&");
//回调
if (method == 'get') {
url = url + '?' + param
param = null
}
//promise检查ajax请求状态
return new Promise(function (resolve, reject) {
//实例化ajax
let xhr = new XMLHttpRequest();
//设置传输方式
xhr.open(method, url, true);
if (method == 'post') {
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded")
}
xhr.send(param);
xhr.onreadystatechange = function () {
//先判断一次，当ajax状态为4的时候执行，不然0-4会执行多次
if (xhr.readyState === 4) {
//当ajax状态为4，服务器状态200的时候执行
if (xhr.readyState == 4 && xhr.status == 200) {
//接收服务器返回值
let res = xhr.response
//判断是不是json，是则json转对象
if (dataType == 'json') {
res = JSON.parse(res)
}
//成功时返回
resolve(res)
} else {
// 失败时返回状态码
reject(xhr.status)
}
}
}
})
}
}
ajax用处很多，也很有用，可以实现登录功能，用来验证，实现与服务器的交互等等
谢谢大家！！！
希望大家看了我的阐述之后对大家有所帮助。
