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
可以输出一个或多个字符串。输出的内容前台可以拿得到。