6.1
AJAX = Asynchronous JavaScript and XML.
AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
AJAX 是一种用于创建快速动态
网页的技术。
AJAX 通过在后台与服务器进行少量数据交换,使网页实现异步更新。这意味着可以在不重载整个页面的情况下,对网页的某些部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个页面。
AJAX如何工作
AJAX是基于现有的Internet标准,并且联合使用它们:
- XMLHttpRequest 对象 (异步的与服务器交换数据)
- JavaScript/DOM (信息显示/交互)
- CSS (给数据定义样式)
- XML (作为转换数据的格式)
XMLHttpRequest 是AJAX的基础
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
<body>
<!--
原生Ajax的实现流程:
1.得到XMLHttpRequest对象
var xhr = new XMLHttpRequest();
2. 打开一个请求
xhr.open();
//形参method表示的是请求方式,通常是get或post
//第二个参数url是访问的地址,
//async为是否是异步。true表示为异步,false表示同步。
3.发送请求
xhr.send(params);
params:需要传递给后台的参数。POST请求的时候用
如果是GET请求,设置为null。(GET请求的参数设置在url后面)
如果是POST请求,无参数设置为null,有参数则设置参数
4. 接收响应
xhr.status 响应状态 200为响应成功,404资源未找到,500服务器异常
xhr.reponseText 对应响应结果
post请求需要服务器
xhr.readState值。0表示还没打开请求,1表示打开请求了但还没有发送,当去发送的时候,后台会接受2 3 4 ,2是接受请求但还没有处理,3是接受请求但没有处理完,4是接受请求并且已经处理完了。
由于是异步请求,所以需要知道后台已经将请求处理完毕,才能获取响应结果。
监听状态 xhr.onreadystatechange = function(){
}
只要有值的变化,就会调用这个函数
-->
<script>
//得到XMLHttpReques对象
function test01(){
var xhr = new XMLHttpRequest();
/*xhr.onreadystatechange = function(){
console.log(xhr.readyState);
}*/
//打开请求
xhr.open("get","./data.json",false);//同步请求
//写成data.json会报错
//发送请求
xhr.send(null);
if (xhr.status == 200){
console.log(xhr.responseText);
}else{
console.log("状态码:" + xhr.status + ",原因:" + xhr.responseText);
}
console.log("异步请求。。");
}
//test01();
function test02(){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
console.log(xhr.readyState);
}
//打开请求
xhr.open("get","./data.json",true);//异步请求
//异步的话信息是读不出来的
//写成"data.json"会报错
//发送请求
xhr.send(null);
if (xhr.status == 200){
console.log(xhr.responseText);
}else{
console.log("状态码:" + xhr.status + ",原因:" + xhr.responseText);
}
console.log("异步请求。。");
}
test02();
</script>
</body>