ajax对象XMLHttpRequest详细解析
文章简述:
这篇文章主要借助一个简单的程序对ajax对象进行详细的分析。
主要知识点有如下部分:
1.如何创建一个ajax对象(解决兼容性问题);
2.open方法的各个参数的主要作用,包括get,post的区别,异步与同步的区别;
3.ajax的onreadystatechange方法的详细的解析。
第一部分 从一个简单的程序说起
该程序的主要功能是从服务器中获取一些数据展示在页面上。
源码
ajax2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax第二篇</title>
<script>
window.onload=function(){
var obtn=document.getElementById('btn');
obtn.onclick=function(){
var xhr=null;
//创建ajax的对象
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject('Microsoft.XMLHTTP');
}
//调用ajax的open方法
xhr.open('get','1.php?username='+encodeURI("张三")+'&age='+encodeURI("30"),true);
//提交
xhr.send();
//等待服务器返回数据
xhr.onreadystatechange=function(){
//readyState是指ajax的工作状态
if(xhr.readyState==4){
//status指的是服务器的状态
if(xhr.status==200){
//JSON.parse是将json数据进行解析成相应的数据
var data = JSON.parse(xhr.responseText);
var username = data[0];
var age= data[1];
alert("用户名是:"+ username +",年龄是:"+age);
}else{
alert('出错了,错误是:'+xhr.status);
}
}
}
}
}
</script>
</head>
<body>
<input type="button" id="btn" value="按钮"/>
</body>
</html>
1.php
<?php
header('content-type:text/html;charset="utf-8"');
$username = $_GET['username'];
$age = $_GET['age'];
$arr1 = array($username,$age);
//对变量进行 JSON 编码
echo json_encode($arr1);
第二部分 分析XMLHttpRequest对象。
ajax的执行流程:
1.创建一个XMLHttpRequest对象。
2.调用open的方法,设置数据请求的方式,数据请求的地址,是否是异步。
3.调用send的方法,提交参数。
4.等待获取服务器的数据。
1.创建一个XMLHttpRequest对象
var xhr=null;
//创建ajax的对象
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject('Microsoft.XMLHTTP');
}
代码解析:上诉代码主要是处理浏览器的兼容性问题,首先判断在浏览器中是否存在XMLHttpRequest对象(一般都有,除了ie7以下版本)。如果存在就直接创建;如果没有就使用ActiveXObject插件中创建(Microsoft.XMLHTTP),创建一个ajax的对象。
2.调用open的方法,设置数据请求的方式,数据请求的地址,是否是异步。
open()方法有三个参数,分别如下:
1.数据的请求方式:如get,post。
2.数据请求的地址:如1.php。
3.是否是异步:true--->异步;false--->同步。
1.get,post的区别
在传输方式上:GET方式通过url地址传输;POST通过浏览器的头部信息中传输。
传输数据量:GET有数据量的限制;POST在理论上是无限的。
2.异步与同步的区别
异步:当ajax发送请求后,在等待服务器返回的这个过程中,前台会继续执行ajax块后面的脚本。
同步:当ajax发送请求后,在等待服务器返回的这个过程中,前台不会继续执行ajax块后面的脚本。
3.调用send方法,向服务器提交参数。
注:如果数据请求方式是以post方式提交,那么提交的参数就写在send方法的参数中;
如:send("username=张三&password=111");
4.onreadystatechange事件
该事件主要用于对请求状态进行监控的。每当ajax的工作状态发生改变时,该事件就会被触发。
readystate:ajax的工作状态。
0:未初始化,还没有执行open方法。
1:载入,已经调用了send方法,正在发送请求。
2:载入完成,send方法已经执行完了,收到从服务器端返回的全部数据。
3:解析,正在解析从服务器返回的数据。
4:解析完成,响应的内容已经准备好了,可以在浏览器中展示。
responseText:ajax请求数据返回内容的存放容器。(主要是以文本的形式)。
status:服务器的响应状态码。(由三位阿拉伯数字组成)
1xx:关于消息的状态码。
2xx:关于成功的状态码。
3xx:关于重定向的状态码。
4xx:关于浏览器错误(请求出错)的状态码。
5xx:关于服务器出错的状态码。