ajax学习总结
来源:互联网 发布:淘宝装修免费代码 编辑:程序博客网 时间:2024/06/07 03:16
一、什么是ajax
AJAX的全称是Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
ajax不是新的编程语言,而是一种使用现有标准的新方法。ajax是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。
ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换。ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。而传统的网页(不使用ajax)如果需要更新内容,必须重载整个网页面。
ajax的应用使用支持以上技术的web浏览器作为运行平台。这些浏览器目前包括:Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式对象,也不支持XSLT。
ajax前景非常乐观,可以提高系统性能,优化用户界面。AJAX现有直接框架AjaxPro,可以引入AjaxPro.2.dll文件,可以直接在前台页面JS调用后台页面的方法。但此框架与FORM验证有冲突。另微软也引入了AJAX组建,需要添加AjaxControlToolkit.dll文件,可以在控件列表中出现相关控件。
ajax的优点:
1、最大的一点是页面无刷新,用户的体验非常好。
2、使用异步方式与服务器通信,具有更加迅速的响应能力。。
3、可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,ajax的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。
4、基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。
5、ajax可使因特网应用程序更小、更快,更友好。
ajax的缺点:
1、ajax不支持浏览器back按钮。
2、安全问题 AJAX暴露了与服务器交互的细节。
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制。
5、不容易调试。
二、ajax的工作原理
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获取完整的回应数据。
三、ajax的用法
**
1、 纯原生态的ajax
----------
第一步:ajax引擎对象的创建(相对简单的创建方法,更严格的方式请参考W3C):
//创建Ajax引擎对象 function getXmlHttpRequest(){ var xmlHttpRequest= ""; if(window.XMLHttpRequest){ // 火狐 xmlHttpRequest = new XMLHttpRequest(); } else{ // IE xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } return xmlHttpRequest;}
函数getXmlHttpRequest()返回一个ajax对象,所以使用的时候可以直接赋值:
var myAjaxObject=null; myAjaxObject = getXmlHttpRequest();
第二步:创建请求机制:(建立与服务器端的通信接口)
ajax请求方式有两种:get和post,下面分别介绍如何建立连接以及它们之间的区别。
◆ get 方式请求格式:
/**** 方式一:get 方式请求 ******/var url = "process.php?userName="+$("userName").value;myAjaxObject.open("get",url,true);//回调处理函数指定为 calback();myAjaxObject.onreadystatechange=callBack; myAjaxObject.send(null);
其中open方法的三个参数解释:
1、请求方式:get / post :
2、向服务器请求的 url(后台处理的地址) :
3、 true:异步机制;false:同步机制(ajax的最大好处就是异步,所以基本选择true)
onreadystatechange=callback 意思就是服务器返回的状态改变的时候所选择的处理方式,callback为一个函数(不可写成callback()),也可写成:
onreadystatechange=function(){ /*code here...*/ }
◆post 方式请求格式:
/******** 方式二:post 方式请求 ********/var url = "process.php";//【不同之处1】发送的数据另写var data = "userName="+$("userName").value; myAjaxObject.open("post",url,true);// 【不同之处2】post方式一定要加上这句话myAjaxObject.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //回调处理函数指定为 callback();myAjaxObject.onreadystatechange=callBack; myAjaxObject.send(data); //【不同之处3】 send()函数带参数
最后说明get和post在形式上和性能上的差异:
▪ post传输数据时,不需要在URL中显示出来,而get方法要在URL中显示。
▪ post传输的数据量大,可以达到2M,而get方法由于受到URL长度的限制,只能传递大约1024字节.
▪ post是为了将数据传送到服务器段,get是为了从服务器段取得数据。当然get之所以也能传送数据,只是用来设计告诉服务器,你到底需要什么样的数据,post的信息作为http请求的内容,而get是在Http头部传输的。
第三步:如何处理返回的数据?
当 readyState 等于 4 且状态为 200 时,表示响应已就绪,可以在前端进行数据处理了。
其次,返回的数据格式主要有文本(.responseText)、JSON(.responseText)和XML(.responseXML),它们各自的处理方式都不相同。
● 文本格式的处理方式:
此时对应于服务器端的process.php文件大致为:
header("Content-type: text/html; charset=utf-8");header("Cache-Control: no-cache");$username=$_POST['userName'];if($username=="tangbc" || $username=="admin"){ /*只做简单的判断例子,实际项目中应该查找数据库*/echo "<b>抱歉!不可用</b>";}else{echo "<b>恭喜!可以使用!</b>";}
此时前端的处理函数callback为:
function callBack(){ if(myAjaxObject.readyState==4 && myAjaxObject.status==200){ /* 1,返回格式是 文本格式 (responseText) 的处理方式:*/ $("isExist").innerHTML=myAjaxObject.responseText; }}
● JSON格式的处理方式:
此时对应于服务器端的process.php文件大致为:
header("Content-Type: text/html; charset=utf-8");header("Cache-Control: no-cache");$username=$_POST['userName'];if($username=="tangbc" || $username=="admin"){ //输出的是 类JSON格式 的字符串 echo '{"msg":"抱歉!不可用!!"}'; }else{ echo '{"msg":"恭喜!可以用"}';}
此时前端的处理函数callback为:
function callBack(){ if(myAjaxObject.readyState==4&&myAjaxObject.status==200){ // str为服务器返回来的字符串 {"msg":"抱歉!不可用!!"} var str = myAjaxObject.responseText; // 将字符串str转换为JSON格式(对象数组) var obj = eval("("+str+")"); // obj.msg 即为要在浏览器显示的数据 “抱歉!不可用!!” $("isExist").innerHTML=obj.msg; }}
● XML格式的处理方式:
此时对应于服务器端的process.php文件大致为:
header("Content-type: text/xml; charset=utf-8");header("Cache-Control: no-cache");$username=$_POST['userName'];if($username=="tangbc" || $username=="admin"){ echo "<res><mes>抱歉!不可用</mes></res>";}else{ echo "<res><mes>恭喜!可以用</mes></res>";}
此时前端的处理函数callback为:
function callBack(){ if(myAjaxObject.readyState==4&&myAjaxObject.status==200){ /* 2,返回格式是 XML(responseXML) 的处理方式:*/ //获取服务器端生成的XML的标签名var tag=myAjaxObject.responseXML.getElementsByTagName('mes'); //获取该标签名下的文本内容(需要的信息) var val = tag[0].childNodes[0].nodeValue; $("isExist").innerHTML=val; } }
**
呵呵以上说了这么多,却不是我们项目中经常见到的,因为写大量的源码会加重我们的工作量而导致效率下降,下面重点来了,看看框架中的ajax是什么样子的呢
2.jquery中的ajax
$.ajax({ type: "GET", url: "Services/EFService.svc/Members", //数据提交的服务器路径 data: "{}",//需要提交的数据,键对值的形式提交。逗号隔开例如{"name":name,"pwd":pwd} contentType: "application/json; charset=utf-8", dataType: "json",//数据类型 success: function (data) { // Play with returned data in JSON format }, error: function (msg) { alert(msg); } });
过多的就不多解释了,到这了,对于ajax相信大家已经了解个大概了,如果想看更过关于ajax在jquery中的用法可以去http://www.w3school.com.cn/jquery/ajax_ajax.asp
当然了,项目中还是用到框架中的ajax的多,比较框架做了一些内部封装处理使我们用起来更方便。建议大家多了解了解
- Ajax 学习总结[转载]
- Ajax 学习总结
- AJAX学习总结
- Ajax学习总结1
- ajax 学习总结
- AJAX入门学习总结
- AJAX入门学习总结 .
- AJAX学习步步总结
- Ajax入门学习总结
- AJAX入门学习总结
- ajax学习总结2
- Ajax学习总结
- Ajax 初步学习总结
- Ajax学习总结
- struts2 学习总结 ---- Ajax
- javascript Ajax 学习总结
- Ajax学习总结
- AJAX技术学习总结
- Android生命周期
- 安装php Memcached扩展
- C++索引查找与指针数组
- JQUERY FILE UPLOAD在项目中的应用
- 第八章线程学习总结
- ajax学习总结
- 关于Apache Commons DbUtils工具类的使用记录
- 赚享客系统模式app技术开发
- 卷积神经网络_(1)卷积层和池化层学习
- DialogFragment的使用及利用自定义interface点击事件并解决旋转屏幕点击事件失效问题
- Using com.bea.xml.stream package on android
- Java 使用jxl读取Excel文件到Txt
- js判断数组中是否有重复值得三种方法
- SpringMVC+jetty框架搭建