JavaScript实现Ajax详解
来源:互联网 发布:台湾传奇网络 编辑:程序博客网 时间:2024/05/19 11:46
Ajax
Ajax,是Asynchronous JavaScript + XML 的简写,可以实现页面的局部刷新。虽然 Ajax 中的 x 代表的是 XML,但 Ajax 通信和数据格式无关,所以传输的数据格式不一定使用 XML。
XMLHttpRequest
Ajax 技术核心是XMLHttpRequest 对象(简称 XHR)。
IE7+、Firefox、Opera、Chrome 和 Safari 都支持原生的 XHR 对象,在这些浏览器中创建XHR 对象可以直接实例化 XMLHttpRequest 即可。
var xhr =new XMLHttpRequest();
注意:通常在使用IE内核的浏览器时,我们通过以下代码创建XHR 对象。
var xhr;
if(window.XMLHttpRequest){
xhr=newXMLHttpRequest();
}else{ //表示使用的是IE的老版本内核
xhr=newActiveXObject("Microsoft.XMLHTTP");
}
open()方法
在使用 XHR 对象时,先必须调用open()方法,它接受三个参数:要发送的请求类型(get 、post)、请求的 URL 和表示是否异步。
xhr.open(‘post’, 'test.jsp’, false); //对于test.jsp 的 get 请求,false 同步
open()方法并不会真正发送请求,而只是启动一个请求以备发送。
send()方法
通过 send()方法进行发送请求,send()方法接受一个参数,作为请求主体发送的数据。如果不需要则,必须填 null 。执行 send()方法之后,请求就会发送到服务器上。
xhr.send(null); //发送请求
服务器响应
当请求发送到服务器端,收到响应后,响应的数据会自动填充 XHR 对象的属性。那么一共有四个属性:
responseText :作为响应主体被返回的文本
responseXML :如果响应主体内容类型是"text/xml"或"application/xml",则返回包含响应数据的 XML DOM 文档
status :响应的 HTTP 状态
statusText : HTTP 状态的说明
接受响应之后,第一步检查 status 属性,以确定响应已经成功返回。一般而已 HTTP 状态代码为200 作为成功的标志。当然了还有其他的状态码,如下:
HTTP状态码
状态字符串
说明
200
OK
服务器成功返回了页面
400
Bad Request
语法错误导致服务器不识别
401
Unauthorized
请求需要用户认证
404
Not found
指定的 URL 在服务器上找不到
500
Internal Server Error
服务器遇到意外错误,无法完成请求
503
ServiceUnavailable
由于服务器过载或维护导致无法完成请求
readystatechange 事件
同步的情况下,js会等待请求返回,获取status。不需要onreadystatechange事件处理函数。而异步则需要onreadystatechange事件处理,且值为4再正确处理下面的内容。
如:同步的情况下:
var xhr = new createXHR();
xhr.open('get', 'test.jsp?rand=' +Math.random(), false); //设置了同步
xhr.send(null);
if (xhr.status == 200) { //如果返回成功了
alert(xhr.responseText);//调出服务器返回的数据
} else {
alert('数据返回失败!状态代码:'+ xhr.status + '状态信息:' + xhr.statusText);
}
异步的情况下:
var xhr = new createXHR();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
alert(xhr.responseText);
} else {
alert('数据返回失败!状态代码:'+ xhr.status + '状态信息:'+ xhr.statusText);
}
}
};
xhr.open('get', 'test.jsp?rand=' +Math.random(), true);//设置异步传输
xhr.send(null);
注意:readyState属性除了可以是4,还可以是其它值,如下表:
值
状态
说明
0
未初始化
尚未调用 open()方法
1
启动
已经调用 open()方法,但尚未调用 send()方法
2
发送
已经调用 send()方法,但尚未接受响应
3
接受
已经接受到部分响应数据
4
完成
已经接受到全部响应数据,而且可以使用
头信息
1.使用 setRequestHeader()设置单个请求头信息
//放在 open 方法之后,send 方法之前
如:xhr.setRequestHeader("content-type","text/xml;charset=utf-8");
注意:POST 请求和 Web 表单提交是不同的,需要使用 XHR 来模仿表单提交。
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
2.使用 getResponseHeader()获取单个响应头信息
alert(xhr.getResponseHeader('Content-Type'));
3.使用 getAllResponseHeaders()获取整个响应头信息
alert(xhr.getAllResponseHeaders());
编码处理
特殊字符传参产生的问题可以使用 encodeURIComponent()进行编码处理,中文字符的返回及传参,可以讲页面保存和设置为 utf-8 格式即可。
//一个通用的 URL 提交函数
function addURLParam(url, name, value) {
url +=(url.indexOf('?') == -1 ? '?' : '&'); //判断的 url 是否有已有参数
url += encodeURIComponent(name) + '=' + encodeURIComponent(value);
alert(url);
return url;
}
封装Ajax
//名值对编码function params(data) {var arr = [];for (var i in data) {arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));}return arr.join('&');}//封装Ajaxfunction ajax(obj) {var xhr = new createXHR();//调用creatXHR创建XHR对象obj.url = obj.url + '?rand=' + Math.random();//为url连接添加随机值obj.data = params(obj.data);//调用params方法对数据进行编码处理if (obj.method === 'get')//如果是get请求传输//进行get请求连接的拼凑obj.url = obj.url.indexOf('?') == -1 ? obj.url + '?' + obj.data : obj.url + '&' + obj.data;if (obj.async === true) {//如果是异步传输xhr.onreadystatechange = function () {//异步传输后的响应if (xhr.readyState == 4) //正常返回数据callback(); //调用响应函数};}xhr.open(obj.method, obj.url, obj.async);//启动一个请求if (obj.method === 'post') {//如果是post请求传输xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');//添加头文件xhr.send(obj.data);//发送数据} else {xhr.send(null);//如果不是post请求传输,发送空数据}if (obj.async === false) {//如果是同步传输callback();//调用响应函数}//想用函数function callback () {if (xhr.status == 200) {//服务器成功响应obj.success(xhr.responseText); //回调} else {alert('数据返回失败!状态代码:' + xhr.status + ',状态信息:' + xhr.statusText);}}}//调用 ajaxaddEvent(document, 'click', function () { //IE6 需要重写 addEventajax({method : 'get',url : 'test.jsp',data : {'name' : 'chen','age' : 22},success : function (text) {alert(text);//弹出响应内容},async : true //异步传输});});
- JavaScript实现Ajax详解
- AJAX的使用详解(javascript实现)
- JavaScript Ajax详解
- JavaScript:Ajax详解
- JavaScript中的Ajax详解
- javaScript AJAX详解
- javascript实现AJAX
- javascript实现Ajax代码
- 纯JavaScript实现Ajax
- Ajax实现--javascript
- JavaScript实现AJAX
- 原生JavaScript实现AJAX
- javaScript简单实现ajax
- JavaScript封装实现Ajax
- javascript实现ajax
- javascript实现ajax
- Ajax实现--javascript
- JavaScript jQuery 实现 AJAX
- 线上服务依赖的tair服务随机性的短时大幅超时问题排查处理
- c#改变winform窗体 标题的字体大小 背景 和颜色
- tomcat日志未按天分割
- 【PAT】1116. Come on! Let's C
- 八进制(简单模拟)
- JavaScript实现Ajax详解
- Idea常见使用问题
- 实现简单日历功能
- qt在实现tcp通信
- 1099. Build A Binary Search Tree (30)
- iOS开发中遇到过的坑
- SVN 的常用命令行
- 伪分布式Hadoop及开发环境搭建(三)
- 算法训练 最短路 spfa