Ajax是一种浏览器端与服务器端交互技术,核心对象是XMLHttpRequest,允许在不刷新整个页面的情况下动态维护数据.
优点:提高用户体验,减少服务器端压力
缺点:1、破坏浏览器的Back行为
/**
* 创建XMLHttpRequest对象
*/
function createXHR() {
var xhr = null;
try{
xhr = new XMLHttpRequest();
} catch(e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}
/**
* 发送ajax请求
* method - [post(数据通过表单提交,没有长度限制,先发请求头再发数据体)| get(通过url传递,有长度限制2k,用户可见不安全,容易出现乱码)]
* url - 请求url
* async - [true(异步) | false(同步)]
* param - 参数
* cb - 回调方法
*/
function sendReq(/*{method, url, async, param, cb}*/obj) {
var method = obj.method || 'get';
var url = obj.url || '';
var async = obj.async || true;
var param = obj.param || {};
var cb = obj.cb || function(){};
var xhr = createXHR();
//当xhr的readyState改变时触发
xhr.onreadystatechange = cb(xhr);
xhr.open(method, url, async);
xhr.send(param);
}
/**
* 回调函数
* --------------------------------------------------------------------------
* readyState的五种状态:
* 状态码 名称 描述
* 0 uninitialized 初始化状态,XMLHttpRequest对象已经被创建
* 1 open open()方法已调用,但send()方法未调用,请求未发出
* 2 send send()方法被调用,HTTP请求已发送至服务器,未收到响应
* 3 interative 所有请求头已经接收到,响应体开始接收但未完成
* 4 complete HTTP响应接收成功
* --------------------------------------------------------------------------
* Status状态码:
* 代码 说明
* 1xx 临时响应
* 2xx 服务器成功的处理了请求
* 3xx 重定向
* 4xx 浏览器请求错误
* 5xx 服务器内部错误,即服务器在处理一个正确请求时发生错误
*/
function cb(xhr) {
//返回请求头字段
if(xhr.readyState == 3) {
var date = xhr.getResponseHeader('Date');
}
//返回处理结果
if(xhr.readyState == 4) {
if(xhr.status == 200) {
//do something
}
}
}
优点:提高用户体验,减少服务器端压力
缺点:1、破坏浏览器的Back行为
2、一些手持设备没法支持Ajax
3、因为其异步交互的特性,若同时有多个Ajax请求,无法保证哪一个先获得响应,需要手动处理
js操作ajax代码:/**
* 创建XMLHttpRequest对象
*/
function createXHR() {
var xhr = null;
try{
xhr = new XMLHttpRequest();
} catch(e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}
/**
* 发送ajax请求
* method - [post(数据通过表单提交,没有长度限制,先发请求头再发数据体)| get(通过url传递,有长度限制2k,用户可见不安全,容易出现乱码)]
* url - 请求url
* async - [true(异步) | false(同步)]
* param - 参数
* cb - 回调方法
*/
function sendReq(/*{method, url, async, param, cb}*/obj) {
var method = obj.method || 'get';
var url = obj.url || '';
var async = obj.async || true;
var param = obj.param || {};
var cb = obj.cb || function(){};
var xhr = createXHR();
//当xhr的readyState改变时触发
xhr.onreadystatechange = cb(xhr);
xhr.open(method, url, async);
xhr.send(param);
}
/**
* 回调函数
* --------------------------------------------------------------------------
* readyState的五种状态:
* 状态码 名称 描述
* 0 uninitialized 初始化状态,XMLHttpRequest对象已经被创建
* 1 open open()方法已调用,但send()方法未调用,请求未发出
* 2 send send()方法被调用,HTTP请求已发送至服务器,未收到响应
* 3 interative 所有请求头已经接收到,响应体开始接收但未完成
* 4 complete HTTP响应接收成功
* --------------------------------------------------------------------------
* Status状态码:
* 代码 说明
* 1xx 临时响应
* 2xx 服务器成功的处理了请求
* 3xx 重定向
* 4xx 浏览器请求错误
* 5xx 服务器内部错误,即服务器在处理一个正确请求时发生错误
*/
function cb(xhr) {
//返回请求头字段
if(xhr.readyState == 3) {
var date = xhr.getResponseHeader('Date');
}
//返回处理结果
if(xhr.readyState == 4) {
if(xhr.status == 200) {
//do something
}
}
}