编写Ajax的四个步骤:
1、创建Ajax对象;
ActiveXObject("Microsoft.XMLHTTP")
XMLHttpRequest()//IE7+, Firefox, Chrome, Opera, Safari
2、发送请求(准备资料,真正发送);
send()
3、连接服务器;
4、接收服务器返回的数据,进一步分析处理,然后进行DOM的操作;
异步请求必须处理readystatechange事件。在异步请求中,XMLHttpRequest对象提供了readyState属性,该属性包含一个数值,每个值都代表请求生存期中的特定状态(http就绪状态)。如:
- 0:已经创建对象,但还没有调用open()方法。
- 1:已经调用open()方法,但还没有发送请求。
- 2:请求已经发送,标题和状态已经收到,并可用。
- 3:接收到来自服务器的响应。
- 4:接收完请求数据,表示已经完成请求。 IE7+:1,2,3,4 。没有0。 其他浏览器:2,3,4 。没有0和1。
在web浏览器中您可能经常看到过这几个状态码:
- 200:存在请求文件
- 401:未经授权
- 403:禁止访问
- 404:没有找到网页
原生未封装的Ajax函数如下:
get方式完整代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.οnlοad=function(){
function $(id){
return document.getElementById(id);
}
function getXHR(){
//1号线:创建ajax对象
var oAjax;
if(window.XMLHttpRequest){
//IE7+, Firefox, Chrome, Opera, Safari
oAjax=new XMLHttpRequest();
}
else{
oAjax=new ActiveXObject("Microsoft.XMLHTTP")
}
return oAjax;
}
//验证ajax对象是否创建成功
$('btn').οnclick=function(){
var xhr=getXHR();
//2号线:发送请求(准备资料,真正的发送)
//open(get,url,true)
//第一个参数:数据传输方式 get post
//第二个参数:处理文件 xx.php xx.txt ,要数据:直接写路径就好;提交数据:在地址那里写数据(get方式)
//第三个参数:同步或者异步方式,默认是异步true
var url='/checkName.php?time='+new Date()+'&name='+$('username').value;
xhr.open('GET',url,true);
//send() 如果是get方式,写null或者为空
//如果是post,参数那就直接写要传输的内容
xhr.send(null);
//4号线:接收3号线传来的数据,进行处理
xhr.onreadystatechange=function(){
//alert('现在的状态是:'+xhr.readyState);
if(xhr.readyState==4){
//alert(xhr.responseText);
$('inf').innerHTML=xhr.responseText;
}
}
}
}
</script>
</head>
<body>
<form action="checkName.php" method="post">
用户名:<input type="text" id="username" /><input type="button" name="btn" id="btn" value="验证" /><span id="inf"></span><br />
密码:<input type="password" /><br />
<input type="submit" value="注册"/>
</form>
</body>
</html>
处理页面checkName.php
<?php
//3号线:获取ajax传来的信息,做处理,再返回给ajax:后台做,或者后台协作
$userName=$_GET['name'];
if($userName=='admin'){ //把内容拿到,进行判断,输出信息返回给ajax
echo '该用户名不能使用';
}
else{
echo '该用户名能使用';
}
?>
原生封装的Ajax函数如下:
//参数有四个:传输的方式,路径,数据,回调函数
function ajax(method,url,data,fnsuccess){
//1号线:创建ajax对象
var xhr;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}
else{
xhr=new ActiveXObject('Microsoft.XMLHTTP');
}
//2号线:发送http请求(准备数据,真正的发送)
if(method=='GET' && data){
//如果是get方式,并且有data:传数据到服务器
url=url+'?'+data;
}
xhr.open(method,url,true);
if(method=='GET'){
xhr.send(null);
}
else{
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send(data);
}
//4号线:拿到的数据返回给调用ajax函数的地方
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
if(fnsuccess){
fnsuccess(xhr.responseText);//注意这里只能接收字符串,json和html数据。如果传过来的是xml数据格式,要换用responseXML属性
}
}
else{
alert('出差了,出错状态是:'+xhr.status);
}
}
}
}