什么是ajax?
ajax是异步的javascript和XML ( Asynchronous Javascript And XML )
优点：节省用户操作时间，提高用户体验。减少数据请求次数。
什么是异步？同步？
异步是非阻塞模式，前面的代码不会影响后面代码执行。
同步是阻塞模式，要前面的执行后再执行后面的。
ajax请求后台数据流程
1 创建 ajax 对象
var xhr=new XMLHttpRequest();
|
兼容ie低版本：
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject('Microsoft.XMLHTTP');
}
|
2 创建请求
调用open方法。
open方法有三个参数。
第一个： 提交方式(method) ，一般有两种。 get 和 post 。
第二个： 请求地址url。
第三个： 异步还是同步。 true 和 false 。 默认为 true ，异步。
xhr.open('get','1.txt','true')
|
3 发送请求
相当于表单 form 中的 submit 。
调用 send() 方法。
4 判断 ajax 状态
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
alert(xhr.responseText)
}
}
|
onreadystate 当ajax状态发生改变的时候
readystate 状态：
0 ajax对象已创建。
1 开始调用 send 方法，发送数据。
2 数据已返回，但没有解析。
3 表示数据正在解析中。
4 表示所有工作已经完成，可以调用数据了。
例：通过ajax请求txt中的文本
1. 搭建本地服务器环境。
2. 创建文件 1.txt ，内容：“txt中的文本”
3. 创建文件 index.html ，js内容：
var xhr=new XMLHttpRequest();
xhr.open('get','1.txt','true')
xhr.send();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
alert(xhr.responseText)
}
}
|
4. 访问 127.0.0.1 。
还可以同时判断服务器状态码： status==200 表示所请求的文档已找到并正常返回。
if(xhr.readyState==4&&xhr.status==200){
alert(xhr.responseText)
}
|
服务器状态码
200 ok 请求的文档已经找到并正确返回。
304 not modified 拥有一个本地缓存副本，服务端内容与其相同。
403 Forbidden 请求者对所请求的文档不具备相应权限。
404 notfound 所请求的文档没有找到。
get与post的区别
post
统一把数据放在页面的请求头中。
理论上 post 携带的数据没有限制（但是服务器一般有限制）。
get
统一把数据放在url?的后面。
get 方式提交的数据长度有限制，因为 url 长度有限制，数据量根据浏览器不同。
相同点：
把数据名和数据值用等号(=)连接，多组数据用和号(&)连接。
不同点：
与 post 相比， get 方式简单、快速，大部分情况下能用。
以下几种使用post请求：
1. 向服务器发送大量数据；
2. 向服务器发送未知字符的用户输入时，post更加可靠。（不知道用户会输入什么的时候）
例：通过get发送和接收数据
get.php 文件中的内容：
<?php
header('content-type:text/html,charset="utf-8"');
error_reporting(0);
$username=$_GET['username'];
$age=$_GET['age'];
echo "您的姓名是：{$username},年龄是{$age}";
|
普通方式发送和接收数据：
index.html 文件中的内容：
<!--
Author: XiaoWen
Create a file: 2016-12-28 13:51:39
Last modified: 2017-01-04 18:40:25
Start to work:
Finish the work:
Other information:
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax</title>
</head>
<body>
<form action="get.php" method="get" >
姓名: <input type="text" name="username"/>
年龄: <input type="text" name="age"/>
<input type="submit" value="提交" />
</form>
</body>
</html>
当点击提交后，页面的url跳转并变成：
http://127.0.0.1/get.php?username=小文&age=21
get发送的数据是拼接在url中的。
可以看出：
get.php?
1 请求文件的后面以问号(?)拼接：
username=小文&age=21
2 数据以 name属性=value值 的方式拼接，多个数据用和号(&)接连：
上面是普通的提交方式，提交时页面url会改变会跳转。
那么，使用 ajax 是这样的：
其实也就是 不使用html标签来发送请求，而是使用js来拼接出url，使用 ajax 来发送和接收数据。
ajax发送和接收数据：
index.html 文件中的内容：
<!--
Author: XiaoWen
Create a file: 2016-12-28 13:51:39
Last modified: 2017-01-04 18:40:36
Start to work:
Finish the work:
Other information:
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax</title>
</head>
<body>
<!-- <form action="get.php" method="get" > -->
姓名: <input type="text" name="username"/>
年龄: <input type="text" name="age"/>
<input type="submit" value="提交" />
<!-- </form> -->
</body>
<script>
var input=document.getElementsByTagName('input');
var str;
input[2].onclick=function(){
//http://127.0.0.1/get.php?username=小文&age=21
str='get.php?'+input[0].name+'='+input[0].value+'&'+input[1].name+'='+input[1].value;
var xhr=new XMLHttpRequest()
xhr.open('get',str,true)
xhr.send()
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
console.log(xhr.responseText)
}
}
}
</script>
</html>
state 和 status
state 已知的
status 不确定的
例：
readyState 值一般就5个
statusText 可以任意的文字
onreadystatechange 值一般就5个
window.status 可以任意的文字