【澳门葡京手机网站】ajax原理总结附简单实例及其优点

在职业中用了Ajax
N多次了,也看过一些有关地点的书籍,也算是认知了它,不过平昔尚未当真计算和整理过有关的东东,败北!

近有闲情,将之总计如下:

【名称】

Ajax是Asynchronous JavaScript and XML(以及 DHTML 等)的缩写。
详细情况请移步Ajax: A New Approach to Web Applications

【原理】

总结一些,就是经过应用XmlHttpRequest对象向服务器发送异步请求,获取重返的数额,并采纳Javascript和DOM操作页面内的因素,从而完结改造页面内容的指标。
内部XmlHttpRequest对象是重点,因为它匡助异步请求。XMLHttpRequest是一心用来向服务器发出1个伸手的。它所蕴藏的情势和属性如下所示:
方法:
abort() 导致当前正值呼吁被打消
getAllResponseHeaders() 再次回到一个字符串,包涵氖 响应标头的称号和值
getResponseHeader(name) 再次回到内定的响应标头的值
open(method, url, async, username, password)
设置请求的主意和对象U汉兰达L。请求能够评释为联合的(可选),也能够给急需依据窗口何人的乞请而提供用户名和口令(可选)
send(content) 发起带有钦点内容(可选)的伸手
setRequestHeader(name, value) 利用钦赐的名目和值,设置二个伸手标头
属性:
onreadystatechange 指派在央浼的景色产生变化时所运用的事件管理程序
readyState 3个偏分头值,提醒请求的事态如下:
0—-未伊始化
一—-正在加载
2—-已加载
3—-交互
4—–完成
responseText 在响应里所重回的从头到尾的经过
responseXML 借使剧情是XML,就遵照内容而创办XML DOM
status
从服务器所再次回到的响应状态码。譬喻:200表示成功,40四表示未找到,参考HTTP标准
【澳门葡京手机网站】ajax原理总结附简单实例及其优点。statusText 响应所重返的境况文本音信
对于此目的别的介绍请移步:XMLHttpRequest概述

【所涵盖的技艺】

· 基于XHTML和CSS标准的意味;
· 使用Document Object Model实行动态显示和互相;
· 使用XMLHttpRequest与服务器举行异步通讯;
· 使用JavaScript绑定一切;
· 使用XML和XSLT;交流和操作数据。
上述的工夫都以部分普遍使用了的技巧,都属于相比旧的本事,ajax是这三种技巧的结合体。

【轻便实例】

复制代码 代码如下:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title></title>
<meta http-equiv=”Content-Type” content=”text/html;
charset=UTF-8″>
<script type=”text/javascript”>
function ajax() {
var xmlHttp;
// 依据对象决断,而不是依据浏览器
if(window.XMLHttpRequest) {
xmlHttp=new XMLHttpRequest();//mozilla浏览器
}else if(window.ActiveXObject){
try{
xmlHttp=new ActiveXObject(“Msxmlx2.XMLHTTP”); //IE老版本
}catch(e){}
try{
xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”); //IE新版本
}catch(e){}

if(!xmlHttp){
window.alert(“无法创设XMLHttpRequest对象实列”);
return false;
}
}

if (!xmlHttp) {
alert(“创立XMLHttpRequest对象失利!”);
return false;
}

xmlHttp.open(‘POST’, ‘index.php?get_a=2&get_b=3’, false);
xmlHttp.setRequestHeader(‘Content-type’,
‘application/x-www-form-urlencoded;charset=UTF-8;’);
xmlHttp.send(“post_a=1&post_b=2”);
xmlHttp.onreadystatechange = function() {
alert(xmlHttp.readyState);
}
if(xmlHttp.readyState == 4){ //判定对象意况
var content_obj = document.getElementById(“content”);
content_obj.innerHTML = “正在处理数据…”;
if(xmlHttp.status == 200){ //新闻已经打响再次回到,开首拍卖信息
var returnStr = xmlHttp.responseText;
content_obj.innerHTML = returnStr;
}else{ //页面不正规
content_obj.innerHTML = “您所请求的页面存在特别!”;
}
}
}
</script>
</head>
<body>
<input type=”button” value=”ajax” onclick=”ajax();” />
<div id=”content”>ajax内容彰显区</div>
</body>
</html>

记住:当发起一个POST请求时,须求对报头
Content-type(内容类型)进行设置。那样,服务器就领悟怎么着来管理上传的始末。要是要效仿通过HTTP协议的POST格局来发送表单,则应将内容类型设置为application/x-www-form-urlencoded。

【优点】

页面无刷新,用户体验好;
异步,不封堵用户操作,响应速度快;
“按需取数据”,减弱冗余请求,缓慢解决服务器担负;
传闻标准化的并被广泛匡助的技术,没有须求附加的插件;
能够使数码和表现分离;
【存在的主题素材】
一些设施还不辅助
开选择度升高
使back按键失效,用户操作后不可能回去;
对流媒体帮忙未有flash之流好;
对搜索引擎不友善
毁掉程序的不得了机制
留存部分康宁主题材料,暴光了一些程序接口和数量逻辑

你恐怕感兴趣的篇章:

  • ajax中文乱码的各样化解办法总计
  • ajax难题总括 相比全
  • Ajax与JSON的部分就学总括
  • ajax请求get与post的区分总括
  • ajax 入门基础之
    XMLHttpRequest对象总计
  • 关于ajax对象一些常用属性、事件和办法大小写相比普及的难点总括
  • 小结AJAX相关JS代码片段和浏览器模型
  • 有关Ajax手艺原理的三点总计
  • 利用ajax异步提交表单的两种艺术总计
  • 初学者不可不看的Ajax总计篇

相关文章