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 请求已完成(可以访问服务器响应并使用它)
第四步 发送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();
0 0
- ajax原理及方法
- AJAX原理及属性和方法
- Ajax原理及应用
- Ajax原理及应用
- Ajax原理及入门
- Ajax实例及原理
- AJAX原理及应用
- Ajax原理及应用
- AJAX原理及优缺点
- Ajax 原理及优缺点
- ajax原理及xmlhttpRequest
- AJAX原理及封装
- AJAX工作原理及功能
- Ajax -- 原理及简单示例
- ajax的原理及使用
- http协议及ajax原理
- ajax技术原理及工作原理
- ajax上传文件方法 原理
- 排序算法
- 关于数据库
- 递归与分治策略
- Golang-------IntelliJ IDEA配置Golang开发环境
- WikiOI 3269 混合背包 (动规+多重背包优化)
- ajax原理及方法
- 使用Struts2(二)HelloWorld
- jquery实现鼠标右击出现菜单
- bzoj 1293: [SCOI2009]生日礼物 (单调队列)
- qt线程分析
- windows下监控进程自动重启
- Hibernate二级缓存详解
- 更改Altium中PCB大小/精确确定板子尺寸 (转载)
- Zigbee智能开关和单火取电技术