ajax 详解
|
这两天工作需要用到ajax，就在w3c上面对ajax进行了全面的学习，并将学习内容记录下来。后来发现可以去api.jquery.com上面，有更详细的解释。
Ajax 基础 1.Ajax = asynchronous javascriptand xml(异步javascript和xml) 2.Ajax 历史 Ajax 是google在2005年使用与googlesuggest。到目前已经非常流行。所以上个世纪的技术要跟着IBM走。而这个世纪跟随google是没错的。所以建议大家可以开始学习go语言了（虽然我还没开始，因为没时间）。 3.就是做网页的时候，可以异步的提交和获取结果。不用等待服务器的返回而造成的延时。也不用等整个页面提交和更换。其流程如下： 4. Ajax 是在internet编程的基础上发展而来的。主要依赖于： a) XMLHttpRequest Object (用来与后台服务器交换数据) b)javascript/DOM(用来展示获取的信息) c)css (格式化显示数据) d)xml(多数后台数据返回都是以xml格式，当然目前也有很多人会用json格式) ajax 示例 根据w3c 官网对ajax的介绍。要学习ajax先从一个例子入手，代码如下： <!DOCTYPE html> <html> <head> <script> function loadXMLDoc() { /*ajax 代码开始*/ var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+,Firefox,Chrome,Opera,Safari xmlhttp=newXMLHttpRequest(); } else {// code for IE6,IE5 xmlhttp=newActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4&& xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); /*ajax 代码结束*/ } </script> </head> <body> <div id="myDiv"><h2>Let AJAX change thistext</h2></div> <button type="button"onclick="loadXMLDoc()">Change Content</button> </body> </html> 例子释疑，并通过例子来讲解ajax： 1.整个过程是通过点击change content 的按钮，调用loadXMLDoc() 来改变myDiv中的字符串的值。 2.通过ajax达到的目的是，a. 异步操作，不用等待。 b. 不用整张网页都提交。 Ajax技术介绍 Ajax的核心内容，XMLHttpRequest 对象。所有的浏览器都支持XMLHttpRequest对象，只不过在IE5和IE6中叫做ActiveXObject.我觉得可以不用理他们了。XMLHttpRequest对象就是用来和后台服务器进行交换数据的。并且可以不用该重新加载真个页面。使用过程如下： 1.创建ajax对象。Variable = new XMLHttpRequest();在IE5和IE6中使用。Variable= new ActiveXObject(“Microsoft.XMLHTTP”);如例子所示: if (window.XMLHttpRequest) {// code for IE7+,Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6,IE5 xmlhttp=newActiveXObject("Microsoft.XMLHTTP"); } 2.发送request 到一个server 发送一个request，在ajax中使用的是一个open函数和send函数。如例子： Xmlhttp.open(“GET”,”ajax_info.txt”,true); Xmlhttp.send(); Open函数的使用如下：open（method,url,async）; method: 发送request 的类型，有”get”和”post”两种方法。url:服务器url请求。async是true和false，分别表示异步获取和同步获取。 Param1：Method的类型。Get方法比post方法快，并且大多数情况下都可以使用。不过绝大部分的开发者都习惯于用post。因为post可以满足所有要求，而get在以下三个方面会有问题。A.无法使用缓存文件的时候（更新服务器文件或者数据库）B. 数据量大的时候，post没有限制。C. 请求包括无法识别的字符和特殊安全要求。 Post方法可以使用setRequestHeader函数，来将ajax请求设置成与form相同的格式。函数不做详细介绍。 Param2： url路径，没有什么好说的。 Param3：当async==true. Javascript会直接执行。不会等待返回。当返回后通过回调函数来实现。 请求例子如下（与上面例子相同）： xmlhttp.onreadystatechange=function() 当async==false. 请求会等待服务器返回，才会继续执行javascript。如果服务器在忙 或者没有回复。你的前端可能就要悲剧了。 3.接收数据。使用XMLHttpRequest 的两个属性：responseText和responseXML. Text是返回的数据是text,而xml是返回的数据是XML。使用方法例子就很好的诠释了： document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 4.Onreadystatechange event.就是ajax的状态改变消息。用来告知我们ajax的状态改变了，比如服务器返回数据了，赶紧处理吧。我们就可以监控到消息改变，来处理返回的数据了。这些都是XMLHttpRequest的属性。 Onreadystatechange 存储了一个函数，每次ajax请求服务器的状态改变就会自动调用该函数，这 也就是传说中，ajax异步经常使用的回调函数。 Readystate 存储了XMLHttpRequest的状态，值是0-4，一共5个状态。0 是请求没有初始化，1.服务器建立连接。2. 请求已收到。3. 正在处理请求。4. 请求结束并且已经返回。 Status 只有两个值200,就是服务器返回ok，404就是没有找到服务器。 具体使用方法可以看例子。 Ajax练习 看完教程去http://www.w3schools.com/ajax/ajax_examples.asp官网去做个练习。就会更好了！ Jquery 使用ajax 有了javascript的ajax，并且看起来又不麻烦，为什么我们要用jquery的ajax呢？哈哈，答案就是因为不同的浏览器处理方法是不同的，比如上面例子中的IE5 IE6 等等，我们必须实现额外的代码来处理这些事情，很是恼火。而jquery项目组，把这些都处理ok了。我们不用关心这些问题，所以使用jquery。 Jquery 所有有关ajax方法： 主要使用$.ajax() $.load() $.get() $.post . $.ajax(); 执行异步ajax请求，比较常用。所有的jqueryajax 方法都会调用这个方法，这个方法经常用在其他方法不能使用的情况下。 语法：$.ajax({name:value,name:value,…}) 参数: name : value 参数部分： async true/false; 是否是异步，默认true beforeSend(xhr) 一个再request sent之前调用的函数,使用时beforeSend:function,xhr 就是一个XMLHttpRequest对象。 cache true/false; 告诉浏览器是否需要缓存请求页。 complete(xhr,status); 当请求结束时调用的函数。（在success和error后面调用） contentType 设置发送到后台的content的type。默认为”application/x-www-form-urlencoded” context 上下文，制定所有回调函数所使用的”this”值 data指定传向服务器的数据 dataFilter(data,type) 一个处理XMLHttpRequest 返回的原始数据的回调函数。 dataType 期望从服务器返回的数据类型 error(xhr,status,error) 当请求失败了，回调的函数。 global true/false 是否要触发全局ajax事件,默认是true ifModified true/false 告诉服务器当内容改变了才返回内容，否则返回的为空值。默认false jsonp 一个重写了json请求的字符串 jsonpCallback json请求的字符串 password 密码 processData scriptCharset request 字符集 success(result,xhr)返回成功后调用的回调函数 traditional true/false 指定请求是否使用传统风格 type GETOR POST url username xhr 一个创建XMLHttpRequest对象的回调函数 e.g. <script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({url:"demo_ajax_load.txt",beforeSend:hello(),async:false,success:function(result){
$("div").html(result);
}});
});
});
functionhello(){
alert("hello world");
}
</script>
函数第二部分： $.ajaxPrefilter() ajax请求前调用。 $.ajaxSetup() $.ajaxSetup({name:value,... }) 设置ajax请求
$.ajaxTransport() $.get() $.get(URL,data,function(data,xhr),dataType)
dataType:xml htmltext script json jsonp
$.getJSON() $(selector).getJSON(url,success(data,xhr))
$.getScript(); $.param() 串行化参数 e.g.
<script>
$(document).ready(function(){
personObj=new Object();
personObj.firstname="John";
personObj.lastname="Doe";
personObj.age=50;
personObj.eyecolor="blue";
$("button").click(function(){
$("div").text($.param(personObj));
});
});
</script>
$.post() $(selector).post(URL,dataType)同$.get();
ajaxComplete() <script>
$(document).ready(function(){
$(document).ajaxStart(function(){
$("#wait").css("display","block");
});
$(document).ajaxComplete(function(){
$("#wait").css("display","none");
});
$("button").click(function(){
$("#txt").load("demo_ajax_load.asp");
});
});
</script>
ajaxError() ajaxSend();ajax send的时候调用的函数 ajaxStart() ajaxStop() ajaxSuccess() load() serialize() serializeArray() 参考 W3C 官网 ：http://www.w3schools.com/jquery/jquery_ref_ajax.asp api官网，更详细的描述 http://api.jquery.com/ （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |