Ajax所包含的技术：Ajax并非一种新技术，它是几种原有技术的结合体

68 阅读 0 评论 45 点赞

我是靠谱客的博主火星上自行车，最近开发中收集的这篇文章主要介绍Ajax所包含的技术：Ajax并非一种新技术，它是几种原有技术的结合体，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

● 使用CSS和XHTML来表示

● 使用DOM模型来交互和动态显示

● 使用javascript来绑定和调用。

● 使用XMLHttpRequest来和服务器进行异步通

Ajax交换模型，即Ajax实现原理
首先：创建XMLHttpRequest对象


//创建xhr - 非IE6 - 第一步
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else { //IE6及其以下版本浏览器
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

然后：通过open()与服务器建立连接

// 请求方式是GET，则需要将参数拼接到url后面
xhr.open("GET", options.url + "?" + params, true); // 请求方式，请求url，是否异步发送请求
// 请求方式是POST，参数不需要拼接，但要设置表单提交时的内容类型
xhr.open("POST", options.url, true);
//POST则是通过将数据作为 send 的参数提交到服务器
//设置表单提交时的内容类型
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

接着：通过send()发送请求

//GET 请求方式
xhr.send(null);
// POST方式，需要将数据作为参数
xhr.send(params);

最后：通过onReadyStateChange()监听状态变化，通过readyState=4判断已经全部接收到响应数据，通过status判断状态码是否表示成功

xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
var status = xhr.status;
if (status >= 200 && status < 300) {
options.success && options.success(xhr.responseText, xhr.responseXML);
} else {
options.fail && options.fail(status);
}
}
}

完整的ajax请求如下所示

function ajax(options){
var options = options || {};
options.type = (options.type || 'GET').toUpperCase();
options.dataType = options.dataType || 'json';
var params = objectToString(options.data);
var xhr;
//创建xhr - 非IE6 - 第一步
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else { //IE6及其以下版本浏览器
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
if( type =='GET' ){
// 请求方式是GET，则需要将参数拼接到url后面
xhr.open("GET", options.url + "?" + params, true); // 请求方式，请求url，是否异步发送请求
xhr.send(null);
}else if( type == 'POST' ){
// 请求方式是POST，参数不需要拼接，但要设置表单提交时的内容类型
xhr.open("POST", options.url, true);
//POST则是通过将数据作为 send 的参数提交到服务器
//设置表单提交时的内容类型
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// POST请你去方式，需要将数据作为参数
xhr.send(params);
}
// 监听状态变化
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
var status = xhr.status;
if (status >= 200 && status < 300 || status ==304){
options.success && options.success(xhr.responseText, xhr.responseXML);
} else {
options.fail && options.fail(status);
}
}
}
}
function objectToString(obj){
var arr = [];
for( var key in obj ){
arr.push( encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]) );
}
arr.push(('v='+ Math.random()).replace('.','') );
return arr.join('&');
}