首页 > 代码库 > Ajax核心知识总结
Ajax核心知识总结
Ajax的原理
通过XMLHttpRequest对象来向服务器发送异步请求，从服务器获得数据，用JavaScript来操作DOM从而更新页面。
特点
- 提交：不用向服务器提交整个页面
- 返回：不再是整个页面，而是XML，JSON等数据形式
- 效果：局部更新网页。
XMLHttpRequest对象是Ajax技术的核心。
功能
一套可以在Javascript等脚本语言中通过http协议传送或接收XML及其他数据的一套API。
用法步骤：
在做项目的过程中，搜索框的联想功能中用到了Ajax技术，因为当时这个联想功能是属于公共部分，一个人做好，其他系统直接用，而且自己当时没学习Ajax，所以就直接按着文档去实现。现在趁着总结，结合这个联想功能的js文件，来总结XMLHttpRequest的五步使用法。
/*1.针对不同浏览器创建XMLHttpRequest对象*/
if(window.XMLHttpRequest){
//alert("IE7,IE8,FireFox");
xmlhttp =new XMLHttpRequest();
//针对某些特定版本的mozillar浏览器的BUG进行修正
//具体来说：浏览器是通过MIME Type来决定什么内容用什么形式显示
//如果来自服务器的响应没有 XML mime-type 头部，则一些版本的 Mozilla 浏览器不能正常运行。
//对于这种情况，httpRequest.overrideMimeType('text/xml'); 语句将覆盖发送给服务器的头部，强制 text/xml 作为 mime-type。
if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType("text/xml");
}
}else if(window.ActiveXObject){
//alert("IE6,IE5.5,IE5");
var activexName=["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0",
"MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP","Miscrosoft XMLHTTP"];
for(var i=0;i<activexName.length;i++) {
try{
xmlhttp=new ActiveXObject(activexName[i]);
break;
}catch(e){
}
}
}
if(xmlhttp == undefined || xmlhttp == null){
alert("当前浏览器不支持创建XMLHttpRequest对象，请更换浏览器");
return;
}
/*2.在XMLHttpRequest对象上注册回调函数*/
xmlhttp.onreadystatechange=callback; //XMLHttpRequest对象有readyState属性和onreadystatechange属性（函数），当readyState属性改变时，就会调用onreadystatechange // 0: 请求未初始化 // 1: 服务器连接已建立 // 2: 请求已接收 // 3: 请求处理中 // 4: 请求已完成，且响应已就绪 //当onreadystatechange触发时，就会调用callback函数 /*3.使用open方法设置和服务器端交互的基本信息*/
//GET方式交互
xmlhttp.open("GET","AJAX?name=" + userName,true);
//POST方式交互
xmlhttp.open("POST","AJAX",true);
//POST方式交互所需增加的代码
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")/*4.设置发送的数据，开始和服务器端交互 */
//GET方式
xmlhttp.send(null);
//POST方式
xmlhttp.send("name=" + userName);
/*5.更新界面*/
//在回调函数中判断交互是否结束，响应是否正确，并根据需要获取服务器返回的数据，并更新页面
function callback(){
//判断和服务器端的交互是否完成，还要判断服务器端是否正确返回了数据
if(xmlhttp.readyState == 4){
//表示和服务器端的交互已经完成
if(xmlhttp.status == 200){
//表示服务器的是响应代码是200，正确返回了数据
var message=xmlhttp.responseText;
//XML数据对应的DOM对象的接受方法
//使用的前提是，服务器端需要设置contenttype为text/xml
//记忆像div标签中填充文本内容的方法
var div=document.getElementById("message");
div.innerHTML=message;
}
}五步法封装：
在实际使用XMLHTTPRequest当中，不能每次都创建对象，我们需要将公共部分抽象成“类”，在用的时候，我们直接调用对象的属性，方法，并传入相应的参数即可。
//创建一个"类"，这个"类"具有XMLHTTP属性
function CallBackObject()
{
this.XmlHttp = this.GetHttpObject();
}
// 通过原型设置这个类的其他属性：
//通过GetHTTPObject获得XMLHTTPRequest对象，此属性中封装的是第一步
CallBackObject.prototype.GetHttpObject = function()
{
var xmlhttp;
// if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
// try {
// xmlhttp = new XMLHttpRequest();
// } catch (e) {
// xmlhttp = false;
// }
// }
try{
//对于Firefox和Opera等浏览器
xmlhttp=new XMLHttpRequest();
//有此版本的Mozilla浏览器在处理服务器返回的包含XML mime-type头部信息内容时会出错。
//所以，为了确保返回内容是text/xml信息，需要包含下面的语句。
if(xmlhttp.overrideMimeType)
{
xmlhttp.overrideMimeType("text/xml");
}
}catch(e){ //对于IE浏览器
var activexName=new Array('Msxml2.XMLHTTP.7.0',
'Msxml2.XMLHTTP.6.0',
'Msxml2.XMLHTTP.5.0',
'Msxml2.XMLHTTP.4.0',
'Msxml2.XMLHTTP.3.0',
'Msxml2.XMLHTTP',
'Micrsoft.XMLHTTP');
var success=false;
for(var i=0;i<activexName.length && !success;i++){
try{
xmlhttp=new ActiveXObject(activexName[i]);
success=true;
break;
}catch(e){
}
}
if(!success){
alert('Unable to create XMLHttpRequest.');
}
}
return xmlhttp;
}
}
//DoCallBack封装第二步，第三和第四步
CallBackObject.prototype.DoCallBack = function(URL)
{
if( this.XmlHttp )
{
if( this.XmlHttp.readyState == 4 || this.XmlHttp.readyState == 0 )
{
var oThis = this;
this.XmlHttp.open('POST', URL);
this.XmlHttp.onreadystatechange = function(){ oThis.ReadyStateChange(); };
this.XmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
this.XmlHttp.send(null);
}
}
}
CallBackObject.prototype.AbortCallBack = function()
{
if( this.XmlHttp )
this.XmlHttp.abort();
}
CallBackObject.prototype.OnLoading = function()
{
// Loading
}
CallBackObject.prototype.OnLoaded = function()
{
// Loaded
}
CallBackObject.prototype.OnInteractive = function()
{
// Interactive
}
CallBackObject.prototype.OnComplete = function(responseText, responseXml)
{
// Complete
}
CallBackObject.prototype.OnAbort = function()
{
// Abort
}
CallBackObject.prototype.OnError = function(status, statusText)
{
// Error
}
//封装第五步，在回调函数中判断交互是否结束，响应是否正确，并根据需要获取服务器返回的数据，并更新页面
CallBackObject.prototype.ReadyStateChange = function()
{
if( this.XmlHttp.readyState == 1 )
{
this.OnLoading();
}
else if( this.XmlHttp.readyState == 2 )
{
this.OnLoaded();
}
else if( this.XmlHttp.readyState == 3 )
{
this.OnInteractive();
}
else if( this.XmlHttp.readyState == 4 )
{
if( this.XmlHttp.status == 0 )
this.OnAbort();
else if( this.XmlHttp.status == 200 && this.XmlHttp.statusText == "OK" )
this.OnComplete(this.XmlHttp.responseText, this.XmlHttp.responseXML);
else
this.OnError(this.XmlHttp.status, this.XmlHttp.statusText, this.XmlHttp.responseText);
}
}Ajax核心知识总结
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。