ajax分为四步
第一步:得到XMLHttpRequest
var xhr=new XMLHttpRequest();
注意:如果存在IE6用户,那么需要做兼容
第二步:打开连接
xhr.open("GET","ajax.do",true);
open主要有三个参数
第一个参数是一个字符串,代表html的请求方式:GET、POST(大写)
第二个参数代表我们要访问的地址:uri
第三个参数是一个boolean值,表示是否异步
当请求是GET时,参数可以直接在URL后面拼接,如:
ajax.do?name=liujianhong&password=123
当参数拼接时,一定要加?表示携带参数,当存在多个参数时,
每个参数间使用&拼接,注意参数时键值对的方式,以等号连接
第三步 http请求的状态监听
注意:回调函数会触发好几次,但是我们一般只会使用最后一次
就是请求完成的触发,readState 等于4的时候
* 0 请求未初始化(在调用 open() 之前)
* 1 请求已提出(调用 send() 之前)
* 2 请求已发送(这里通常可以从响应得到内容头部)
* 3 请求处理中(响应中通常有部分数据可用,但是服务器还没有完
成响应)
* 4 请求已完成(可以访问服务器响应并使用它)
第四步 发送ajax请求
* 发送数据,如果没有数据,可以不传递数据或者传递null,
如:xhr.send(null);
* 如果post请求传递数据,则这样写
* 首先设置一下xhr的请求头信息
* xhr.setRequestHeader("Content-type","application/x-www-formurlencoded");
* 再这样传递参数
* xhr.send(name=liujianhong&password=123);
第一步:得到XMLHttpRequest
var xhr=new XMLHttpRequest();
注意:如果存在IE6用户,那么需要做兼容
第二步:打开连接
xhr.open("GET","ajax.do",true);
open主要有三个参数
第一个参数是一个字符串,代表html的请求方式:GET、POST(大写)
第二个参数代表我们要访问的地址:uri
第三个参数是一个boolean值,表示是否异步
当请求是GET时,参数可以直接在URL后面拼接,如:
ajax.do?name=liujianhong&password=123
当参数拼接时,一定要加?表示携带参数,当存在多个参数时,
每个参数间使用&拼接,注意参数时键值对的方式,以等号连接
第三步 http请求的状态监听
注意:回调函数会触发好几次,但是我们一般只会使用最后一次
就是请求完成的触发,readState 等于4的时候
* 0 请求未初始化(在调用 open() 之前)
* 1 请求已提出(调用 send() 之前)
* 2 请求已发送(这里通常可以从响应得到内容头部)
* 3 请求处理中(响应中通常有部分数据可用,但是服务器还没有完
成响应)
* 4 请求已完成(可以访问服务器响应并使用它)
xhr.onreadystatechange=function(){
alert(xhr.readyState);
/* readyState等于4表示请求已经结束,服务器响应完成
* status表示http请求的状态,200表示正常响应
* 404表示资源不可达(找不到)
* 500表示服务器端错误/
if(xhr.readyState == 4 && xhr.status == 200) {//说明请求完成,并且成功
alert(xhr.responseText);//得到服务器端的文本数据
alert(xhr.responseXML);//得到服务器端的XML数据
}
}
第四步 发送ajax请求
* 发送数据,如果没有数据,可以不传递数据或者传递null,
如:xhr.send(null);
* 如果post请求传递数据,则这样写
* 首先设置一下xhr的请求头信息
* xhr.setRequestHeader("Content-type","application/x-www-formurlencoded");
* 再这样传递参数
* xhr.send(name=liujianhong&password=123);
var xhr=new XMLHttpRequest();
xhr.open("GET","ajax.do",true);
xhr.onreadystatechange=function(){
//xhr.status==200 代表访问正常
//readyState==4 ajax最后一步
if(xhr.readyState==4 && xhr.status==200){
var mes=document.getElementById("mes");
mes.innerHTML=xhr.responseText;
}
}
xhr.send();