一、Ajax对象
<script type="text/javascript">
//W3C标准方式获取Ajax对象
var xhr = new XMLHttpRequest();
console.log(xhr);
//IE7及其以下版本浏览器下获取Ajax对象的方式
var xhr = new ActiveXObject('Microsoft.XMLHTTP');
alert(xhr);
</script>
<script type="text/javascript">
//解决兼容性问题
function getajax(){
var xhr = new XMLHttpRequest();
if(!xhr){
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
return xhr;
}
alert(getajax());
</script>
二、Ajax对象的属性和方法
1、Ajax对象的属性：
①readyState：Ajax状态码
0：表示对象已建立，但未初始化，只是new成功获取了对象，但是未调用open()方法
1：表示对象已初始化，但未发送，调用了open()方法，但是未调用send()方法
2：表示已调用send方法进行请求
3：表示正在接收数据（接收到一部分），客户端已经接收到了一部分返回的数据
4：表示接收完成，客户端已经接收到了所有数据
②status：http状态响应码，202、404等等
③statusText：http响应文本状态
④responseText：如果服务器端返回字符串，使用responseText进行接收
⑤responseXML：如果服务器端返回XML数据，使用responseXML进行接收
⑥onreadystatechange：当readyState状态码发生改变时所触发的回调函数
2、Ajax对象的方法：
①open(method,url,[aycs])：初始化Ajax对象
method：http请求方式，get/post
url：请求的服务器地址
aycs：同步与异步
②setRequestHeader(header,value)：设置请求头信息
header：请求头名称
value：请求头的值
③xhr.getAllResponseHeaders()：获取全部响应头信息
④xhr.getResponseHeader('key')：获取指定头信息
⑤send([content])：发送Ajax请求
content：如果是get请求时，此参数为null；如果是post请求时，此参数就是要传递的数据
注意：所有相关的事件绑定必须在调用send()方法之前进行
简单示例：
<script type="text/javascript">
document.getElementById("t").onblur = function(){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
alert(xhr.responseText);
}
}
//true异步 false同步 默认为true
xhr.open('get','./js.php',true);
xhr.send();
}
</script>
三、简单案例
1、验证注册用户名是否可用
html代码：
<body>
<input type="text" id="inp">
<span id="sp"></span>
</body>
<script type="text/javascript">
document.getElementById("inp").onblur = function(){
//创建Ajax对象
var xhr = new XMLHttpRequest();
//监听状态变化
xhr.onreadystatechange = function(){
//判断状态值
if(xhr.readyState == 4){
//判断服务器返回的信息
if(xhr.responseText==1){
document.getElementById('sp').innerHTML = "<font color='red'>用户名已被注册！</font>";
}else{
document.getElementById('sp').innerHTML = "<font color='green'>用户名验证通过！</font>";
}
}
}
//打开链接
xhr.open('get','./js.php?id='+this.value);
//发送链接
xhr.send();
}
</script>
php代码：
//设置响应头（告诉客户端不要缓存数据）
header('Cache-Control:no-cache');
if($_GET['id'] == 'admin'){
echo 1;
}else{
echo 0;
}
Ajax使用get或post方式代码如图：
2、Ajax通过使用FormData对象实现文件上传
FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据(keyed data)，而独立于表单使用。如果表单enctype属性设为multipart/form-data，则会使用表单的submit()方法来发送数据，从而，发送数据具有同样形式。
html代码：
<body>
<form name="form" enctype="multipart/form-data" id="form">
<input type="file" name="fl" id="inp">
<input type="submit" value="上传">
</form>
</body>
<script type="text/javascript">
document.getElementById("form").onsubmit = function(){
//创建Ajax对象
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.responseText==1){
alert("成功");
}else{
alert("失败");
}
}
}
xhr.open('post','./js.php');
//创建FormData对象，FormData对象会把表单数据（包括文件流）整体打包
var fmd = new FormData(this);
xhr.send(fmd);
//阻止表单的提交
return false;
}
</script>
php代码：
echo move_uploaded_file($_FILES['fl']['tmp_name'],'./img/'.$_FILES['fl']['name']) ? 1 : 0;
3、关于http请求头信息中Content-Type的类型
Content-Type的类型也就是form表单中enctype=""的属性值，共三种对应如下：
"text/plain"：get方式
"application/x-www-form-urlencoded"：post方式
"multipart/form-data"：有关文件上传<input type="file">
另外，如果在使用Ajax而不使用表单提交传输数据的情况下，post方式需要使用setRequestHeader()函数设置请求头信息的Content-Type，示例：
Ajax对象.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
网友评论