ajax实现--技术细节详解
ajax原理和XmlHttpRequest对象
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。
XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。
所以我们先从XMLHttpRequest讲起，来看看它的工作原理。
首先，我们先来看看XMLHttpRequest这个对象的属性。
它的属性有：
onreadystatechange 每次状态改变所触发事件的事件处理程序。
responseText 从服务器进程返回数据的字符串形式。
responseXML 从服务器进程返回的DOM兼容的文档数据对象。
status 从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）
status Text 伴随状态码的字符串信息
readyState 对象状态值
0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
1 (初始化) 对象已建立，尚未调用send方法
2 (发送数据) send方法已调用，但是当前的状态及http头未知
3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据
但是，由于各浏览器之间存在差异，所以创建一个XMLHttpRequest对象可能需要不同的方法。这个差异主要体现在IE和其它浏览器之间。
直接上一个简单的例子，不懂的可以给我留言
ajax.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ajax</title>
<script type="text/javascript">
var xmlhttp = false;
function send_request(url){
xmlhttp = false;
if(window.XMLHttpRequest){//现代浏览器：FireFox，chrome，opare，Safari等
xmlhttp = new XMLHttpRequest();
xmlhttp.overrideMimeType('text/xml');//Firefox有些版本在处理服务器返回未包含XMLmime-type头部信息的内容时会出错，要确保包含
}else{//古代浏览器：IE5、6
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
}
}
if(!xmlhttp){
alert("xmlHttpRequest对象创建失败");
return false;
}
xmlhttp.onreadystatechange = progressRequest;//注意，progressRequest此函数不加括号、参数，也可以用即时定义function（）{}
xmlhttp.open('GET',url,true);//第一个参数有三种，get、post、head,url只能是同网域的，否则没权限
xmlhttp.send(null);//open调用后就要调用send，但如果要post文件（图片等）要设置MIME类别（跟form表单一样：xml.setRequestHeader"Content-Type","application/x-www-form-urlencoded"）;
/*XMLHttpRequest对象方法
xmlhttp.abort();//停止当前请求
xmlhttp.getAllResponseHeaders();作为字符串返回完整的headers
xmlhttp.getResponseHeader("headerLabel");//作为字符串返回单个header标签
xmlhttp.setRequestHeader("label","value");//设置header，并和请求一起发送
*/
/*XMLHttpRequest对象方法
xmlhttp.onreadystatechange;//状态改变事件触发
xmlhttp.readState;//对象状态，0:未初始化，1：读取中，2：已读取，3，交互中，4完成
xmlhttp.responseText;//服务器进程返回数据的文本版本，
xmlhttp.responseXML;//服务器进程返回数据的兼容DOM的XML文档对象，
xmlhttp.status;//服务器状态码。
xmlhttp.statusText;//服务器返回的状态文本信息
*/
}
function progressRequest(){ if(xmlhttp.readyState == 4){//判断对象状态
if(xmlhttp.status == 200){//信息已成功返回，开始执行处理信息 document.getElementById("text").value = xmlhttp.responseText;
}else{
alert("您请求的页面有异常！");
} }
else{
//alert(xmlhttp.readyState);
}
}
</script>
</head> <body> <div class="content">
<input type="text" id="text" />
<input type="button" value="提交" onclick="send_request('abc.php')">
</div>
</body>
</html>
后台程序:abc.php (注：这里可以查询数据库，实现复杂的计算输出)
<?php
echo "i love ajax";
?>
ajax实现--技术细节详解的更多相关文章
- MVC之Ajax.BeginForm使用详解之更新列表 mvc验证jquery.unobtrusive-ajax
MVC之Ajax.BeginForm使用详解之更新列表 1.首先,请在配置文件设置如下:(该项默认都存在且为true) <add key="UnobtrusiveJavaScrip ...
- $.ajax()所有参数详解
原文:https://www.cnblogs.com/everest33Tong/p/6159700.html [一]$.ajax()所有参数详解 url: 要求为String类型的参数,(默认为当前 ...
- ajax方法参数详解与$.each()和jquery里面each方法的区别
JQuery中$.ajax()方法参数详解 url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为g ...
- Ajax.ActionLink参数详解
该语法会生成一个a标签,点击a标签会执行一个Ajax请求. 有12个方法重载,下面详解方法中的各项参数: 参数一:linkText string类型 说明:链接显示的文字内容 参数二:actionNa ...
- Ajax.BeginForm参数详解
在Asp.Net的MVC中的语法,在Razor页面中使用,替代JQuery的Ajax使用,方便快捷. 使用Ajax.BeginForm方法会生成一个form表单,最后以Ajax的方式提交表单数据:需要 ...
- jquery.ajax（）详解
jQuery.ajax() 函数详解 traditional 如果你希望使用传统方式来序列化参数,将该属性设为true. 传递数组时, traditional必须为true var arr = []; ...
- ajax、反向ajax、jsonp详解
ajax详解 什么是ajax 其实ajax已经属于老技术了,现在几乎没人不会用了,在这里主要是把底层的东西给大家分享一下,以备应对装逼的面试官. ajax即“Asynchronous Javascri ...
- JQuery中$.ajax()方法参数详解
url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 ...
- JQuery中$.ajax()方法参数详解 及 async属性说明
url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 ...
随机推荐
- jquery商城购物车右侧悬浮加入购物车动画效果
<script type="text/javascript" src="js/jquery-1.7.min.js"></script> ...
- HTML5 3D动画效果
对以前来讲,3D动画拿到网页上展示是一件非常奢侈的事情,第一是浏览器不够先进,第二是大部分只能用flash实现伪3D.HTML5的出现,让实现网页3D动画变得非常简单,当然前提是你不要再使用像IE67 ...
- 第三篇T语言热键启动方法
热键控件 热键控件的使用方法 第一步:选择热键添加到面板上. 第二步:热键控件属性选择热键键值. 第三步:添加热键事件功能. 热键模式的选择 1.普通模式 2.软件模式 3.硬件模式 脚本的基本操作 ...
- 关于kafka连接不上别的机器问题Connection refused
1.确认config里面的server.properties 正确(包括IP+端口2181记得看清,用hostname的话记得etc/hostnames下面查看全部配置上没,建议用hostname方便 ...
- Java中将16进制字符串转换成汉字
技术交流群:233513714 /** * 将16进制字符串转换成汉字 * @param str * @return */ public static String deUnicode(String ...
- 9款精致HTML5/jQuery日历时钟控件源码下载（源码请见百度云） 链接：http://pan.baidu.com/s/1geIXe75 密码：7m4a
现在的网页应用越来越丰富,我们在网页中填写日期和时间已经再也不用手动输入了,而是使用各种各样的日期时间选择控件,大部分样式华丽的日期选择和日历控件都是基于jQuery和HTML5的,比如今天要分享的这 ...
- Applied Deep Learning Resources
Applied Deep Learning Resources A collection of research articles, blog posts, slides and code snipp ...
- Cycles_per_instruction
https://en.wikipedia.org/wiki/Cycles_per_instruction
- 5分钟让你学会用最高效的工具解析所有Json
如果你是一个Android开发工程师,学会解析Json字符串是你的必修课,本篇文章主要以实例的方式手把手教你怎么做,花五分钟时间阅读本篇文章你就可以学会解析所有的Json字符串啦. 准备: json字 ...
- Mako
from: http://www.yeolar.com/note/2012/08/26/mako-usage/ Python模板库Mako的用法(选译自官方文档) Yeolar 2012-08-26 ...