AJAX是网页交互过程中，通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新，不必加载重复的内容，提高了交互速度。
一、XMLHttpRequest 事件
在我们与后台交互过程中，我们首先需要创建XMLHttpRequest对象，创建后我们就可以通过发送请求到服务器，然后我们执行一些基于响应的任务。
readyState存有XMLHttpRequest的状态信息，会随着状态的改变返回响应的参数，而每次 readyState 改变时，就会触发onreadystatechange事件。
下面是 XMLHttpRequest 对象的三个重要的属性：
| 属性 | 描述 |
|---|---|
| onreadystatechange | 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
| readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪 |
| status | HTTP: Status 200 – 服务器成功返回网页 HTTP: Status 404 – 请求的网页不存在 HTTP: Status 503 – 服务不可用 |
二、open()函数
xml.open(method,url,boolean);
open()函数有三个参数，第一个是向后台发送数据的方式，分别是get和post。
第二个参数是请求的地址，我们直接写上请求的地址即可，如果是get请求的话，必要时加上我们需要发送给后台的参数。通常的写法如下：
//'?'是分隔符
//'&'是参数连接符
xml.open("GET","/xampp/ajax/ajax01.php?age=26&name="+name,true);
第三个参数是发送请求的同步异步：
-
参数为false的时候，此为同步进行，当代码执行到该请求的时候，在请求尚未得到回应，下面代码不再执行，直到该请求超时
-
参数为true的时候， 此为异步进行，当代码执行到该请求的时候，不论是否得到后台回应，代码都会执行下去，不会出现阻塞现象
三、GET和POST请求
get请求：
xml.open("GET","/xampp/ajax/ajax01.php?name="+name,true);
xml.send(null);
post请求：
xml.open("POST","/xampp/ajax/ajax01.php",true);
xml.send("name=Gao&age=25");
二者在发送请求的区别在于get请求是将需要添加的参数放于open()函数中，send()中不发送任何信息，而post请求是将发送到后台的信息通过send()函数发送到后台。
同时get一般发送数据量比较小的数据，并且地址栏能看到发送的信息，所以安全性较差。而post的请求可以发送大量数据，并且前端界面看不到发送的信息，安全性较高。
四、例子
点击按钮，向后台发送数据，将后台返回的数据文本放于id=data的div中。
<body>
<input type="text" id="name" value="LiHua" />
<input type="button" value="按钮" onclick="submit()"/>
<div id="data"></div>
<script type="text/javascript">
var name = document.getElementById("name").value;
function submit(){
//在后台与前台交互中我们需要创建 XMLHttpRequest 对象
var xml=new XMLHttpRequest();
//readyState属性发生改变触发onreadystatechange函数
xml.onreadystatechange=function(){
//成功后readyState为4，status为200
if(xml.readyState === 4 || xml.status === 200){
//获取返回的数据
document.getElementById("data").innerHTML=xml.responseText;
}
}
//以get的方式向后台发送请求，并且为异步
xml.open("GET","ajax.php?name="+name,true);
xml.send(null);
}
</script>
</body>
五、后台代码
之前在学习ajax的时候，不知道后台代码是什么，不知道怎么发送请求，后台怎么处理的，这里我就贴出来简单的后台处理代码，让你清楚后台简单的一个流程。
<?php
$name = $_GET["name"];
echo 'Hello '.$name;
?>
这里我用的是php后端语言，首先是声明一个变量$name，$_GET是php内带函数，用于获取前台以GET请求发送的数据。echo可以输出一个或多个字符串。输出的内容前台可以拿得到。
网友评论