在日常工作中，我们做前后端交互时通常会用到Ajax，但是你真的了解什么是Ajax吗？下面让我们重新了解一下Ajax吧。
首先，在了解Ajax之前我们需要了解一个概念，那就是同步和异步。那么什么是同步和异步呢？
同步和异步
同步: 指的就是事情要一件一件做。等做完前一件才能做后一件任务
异步: 不受当前任务的影响，两件事情同时进行，做一件事情时，不影响另一件事情的进行。
编程中：异步程序代码执行时不会阻塞其它程序代码执行,从而提升整体执行效率。
网页异步应用：
1. 验证你的用户名是否已经存在（一边输入，一边获取你的信息，和后台比对）。
2. 百度搜索提示，及相关内容展示（一边输入，一边找出了你可能要的内容）。
3. 新浪微博评论（异步加载）。
ajax的概念
什么是ajax
1 Ajax: asynchronous javascript and xml (异步js和xml)
2 是可以与服务器进行(异步/同步)交互的技术之一。
注：ajax可以以异步方式的请求数据处理程序, 可实现对网页的部分更新， 而不是刷新整个页面
ajax出现的历史
1999年，微软公司发布IE5浏览器的时候嵌入的一种技术。起初名字是XMLHttp
直到2005年，google公司发布了一个邮箱产品gmail，内部有使用ajax技术，该事情引起人们对ajax的注意，也使得一蹶不振的javascript语言从此被人们重视起来
ajax包含技术
Ajax 应用程序所用到的基本技术：
• HTML建立 Web 表单供交互之用。
• JavaScript Ajax核心代码基于javascript。
• DHTML 动态更新表单。常用: div、span 和其他动态 HTML 元素。
• 文档对象模型DOM处理HTML结构和服务器返回的json。
(getElementById(),getElementsByTagName() );
注:ajax不是一门新的语言,而是一种和服务器实现异步通信的技术.
##ajax的使用
XMLHttpRequest对象
XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容。
XMLHttpRequest 对象是名为 AJAX 的 Web 应用程序架构的一项关键功能。
简单地讲， XMLHttpRequest 对象就是浏览器内建对象，用于与服务器通信(交换数据) ， 由此我们便可实现对网页的部分更新，而不是刷新整个页面。这个请求是异步的，即在往服务器发送请求时，并不会阻碍程序的运行，浏览器会继续渲染后续的结构。
注：尽管名为 XMLHttpRequest，它并不限于和 XML 文档一起使用：它可以接收任何形式的文本文档。
ajax的运行
在里介绍一款简单易操作的后台软件PHP study。另外一定要打开phpstudy软件,并且相应的 js文件与php文件在同一主机下（即打开时使用loclhost打开）,才能请求成功.
GET请求的创建
请求的创建与发送
主流浏览器(火狐、google、苹果safari、opera,包括IE8以上的版本)的创建方式,也是现在主要使用的.
//1. 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//2. 设置请求的类型,以及地址
// 第一个参数:请求方式 get/post
// 第二个参数:请求的地址 需要在url后面拼上参数列表
// 第三个参数：默认是异步
xhr.open("get", "01.php?name=Jepson"，异步/同步);
//3.发送请求到服务器
xhr.send(null);
手册位置
http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_create.asp
GET的使用
例1:在页面中添加一个按钮,点击一次向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状态
通过监控请求状态，当状态等于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时-响应内容解析完成
*/
例:获取ajax请求过程的四种状态
// 1 实例化对象
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
// 4 使用回调函数检测当前的状态
console.log(xhr.readyState);
// 获取服务器状态码
console.log(xhr.status)
// 接受服务器返回数据
console.log(xhr.responseText);
}
// 2 创建请求
xhr.open('get','http://localhost/web/index.php');
// 3 发送请求
xhr.send();
返回服务器状态码 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版本
服务器响应值接收
如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
| 属性 | 描述 |
|---|---|
| responseText | 获得字符串形式的响应数据。 |
| responseXML | 获得 XML 形式的响应数据(知道)。 |
接受服务器返回值
<!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();
//显示ajax的状态
/*
ajax的四中状态
0 对象已创建,请求连接未初始化(尚未调用open方法)
1 请求连接已经已经建立没有调用send方法
2 请求连接已建立,调用send方法
3 数据已经开始传输但尚未完成
4 数据传输已经完成,请求已经完成
*/
// 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>
服务器代码
<?php
$a = '1234';
echo $a;
?>
POST方式
请求步骤
1) 创建Ajax对象。
2) 设置回调函数。
3) 初始化对象。
4) 设置请求头信息“Content-type,application/x-www-form-urlencoded”
5) 发送请求。
6) 进行返回状态进行判断，并处理返回数据。
实现请求
setRequestHeader() 设置请求头信息
application/x-www-form-urlencoded 设置传递参数时,使用的编码格式(默认)
例:以post的方式传递数据
<!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>
例1:实现登录的功能
js代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./form.css">
<title>Document</title>
</head>
<body>
<h4 align="center">POST</h4>
<form action="" method="post">
用户名： <input type="text" name="username" >
密码： <input type="password" name="password" >
<input type="button" value="登录">
</form>
<script>
// 1 获取节点
var inputObj = document.querySelectorAll('input');
// 2绑定事件
inputObj[2].onclick = function(){
//3 获取用户名和密码
var name = inputObj[0].value;
var pass = inputObj[1].value;
// 调用ajax
post(name,pass);
}
// 4 构造ajax发送请求
function post(name,pass){
var xhr = new XMLHttpRequest();
xhr.open('post','http://localhost/1923/06-login.php');
// 设置header头
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
//构造参数
var data = 'name='+name+'&pwd='+pass;
xhr.send(data);
// 接受服务器返回的参数
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
// 接受服务器参数
var info = xhr.responseText;
//alert(info);
// 根据服务器返回的状态码，判定成功还是失败
if(info==1){ // 登录成功的业务逻辑
// alert('sucess');
location.href = 'http://www.baidu.com';
}
// 失败的逻辑
if(info==2) alert('error');
}
}
}
</script>
</body>
</html>
php代码
<?php
// 接受参数
$name = $_POST['name'];
$pwd = $_POST['pwd'];
// 真实用户名密码
$trueName = 'chongchong';
$truePwd = '123456';
//比对用户名和密码
if($trueName==$name && $truePwd==$pwd){
//echo '用户名密码正确';
echo 1;
}else{
//echo '用户名密码错误';
echo 2;
}
?>
同步和异步请求
异步：不等待ajax请求响应完毕，直接执行下面的代码
同步：等待ajax请求响应完毕后，再执行下面的代码
ajax的异步
异步示意图
ajax的同步
同步请求
验证同步与异步
js代码
<body>
<input type="button" onclick="fn()" value="点击发送ajax" />
<script>
function fn(){
// 1 实例化对象
let xhr = new XMLHttpRequest();
// 获取ajax的四种状态
xhr.onreadystatechange = function(state){
// console.log(xhr.readyState);
//alert(xhr.responseText)
if(xhr.readyState==4){
console.log(xhr.response)
}
}
// 2 设置请求的类型以及地址,第三个参数设置为false,表示同步,设置为true表示异步(默认)
xhr.open('get','http://localhost/demo.php',false);
// 3 发送请求,get请求则设置为空,post请求则设置参数
xhr.send();
console.log(11111);
}
// console.log(eval('{}'));
// console.log(eval('({})'));
</script>
PHP代码
<?php
$str = '越懒散,越懒!';
$file = './a.txt';
$f = fopen($file,'a');
fwrite($f,$str);
// 让代码沉睡十秒之后,再向下执行
sleep(10);
echo '这是输出的内容';
?>
注：测试同步请求时,获取返回结果的responseText一定要放在send()之前
服务返回数据格式处理
类型
Text（又称HTML格式）
XML格式
JSON格式
Text类型处理
<script type="text/javascript">
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
//接受返回的消息
var info =xhr.responseText;
alert(info);
}
}
xhr.open('get','./geshi.php');
xhr.send(null);
</script>
[php代码]
echo '<h2>完了,就要完了!</h2>';
json数据的处理
使用JOSN.parse()将PHP输出的json字符串转化为对象
[JS代码]
<script type="text/javascript">
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
//接受返回的消息,
var info =xhr.responseText;
//将json数组转化为js对象
var str = JSON.parse(info);
console.log(str);
}
}
xhr.open('get','./geshi.php');
xhr.send(null);
</script>
[PHP代码]
echo json_encode(array("name"=>'张三',"age"=>'12'));
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>';
ajax的封装
参数提取
| 参数名 | 参数类型 | 描述 | 传值 | 默认值 |
|---|---|---|---|---|
| type | string | 请求方式 | get/post | 只要不传post，就是get |
| url | string | 请求地址 | 接口地址 | 如果不传地址，不发送请求 |
| async | boolean | 是否异步 | true/fase | 只要不传false，那就是true，异步请求 |
| data | object | 请求数据 | {key:value,key1:value2} | 需要把这个对象拼接成参数的格式 uname=hucc&upass=12345 |
| dataType | string | 返回的数据类型 | xml/json/text | text |
| success | function | 响应成功时调用 | - | - |
| error | function | 响应失败时调用 |
最终封装
var $ = {
ajax: function (options) {
//如果options参数没有传递，直接返回。
if (!options || typeof options !== "object") {
return;
}
//处理默认参数
//如果参数不是post，那就默认为get
var type = options.type == "post" ? "post" : "get";
//如果没有传url，那就传当前地址
var url = options.url || location.pathname;
//如果参数不是false，那就默认是true，发异步请求
var async = options.async == false ? false : true;
var params = this.getParams(options.data);
var xhr = new XMLHttpRequest();
//设置请求行
if (type == "get") {
url = url + "?" + params;
}
xhr.open(type, url, async);
//设置请求头
if (type == "post") {
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
}
//设置请求参数
xhr.send(params);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
/*根据响应头的content-type属性指定方法接收到的内容*/
var contentType = xhr.getResponseHeader('content-type');
var data = null;
data = xhr.responseText;
/*执行成功函数*/
options.success && options.success(data);
} else {
options.error && options.error(xhr.responseText);
}
}
}
},
getParams: function (obj) {
//将obj对象转换成参数
//将对象转换成参数列表
if (!obj) {
return null;
}
var arr = [];
for (var k in obj) {
arr.push(k + "=" + obj[k]);
}
return arr.join("&");
}
}
1408
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
