什么是Ajax？我们怎样使用Ajax？

在日常工作中，我们做前后端交互时通常会用到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——没有发现文件、查询或URl405——用户在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请求则参数设置为nullxhr.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;// 调用ajaxpost(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，那就默认为getvar 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("&");}}