ajax原理及方法

来源:互联网 发布:中国联通通信网络维护 编辑:程序博客网 时间:2024/06/08 20:55
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 请求已完成(可以访问服务器响应并使用它)


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();


0 0