javascript Ajax 学习总结

Ajax(Asynchronous JavaScript and XML异步JavaScript和XML)DHTML->'阿贾克斯'

      1.介绍

          1.描述从基于Web的应用到基于数据的应用的转换。

          2.Ajax的核心是JavaScript对象XmlHttpRequest(异步请求的技术)。XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

          3.独立于 Web服务器软件的浏览器技术,用于创建更好更快以及交互性更强的 Web应用程序的技术。可以提高系统性能，优化用户界面

      2.主要包含的技术

          基web标准（standards-based presentation）XHTML+CSS的表示；

          使用 DOM（Document Object Model）进行动态显示及交互

          使用 XML和 XSLT进行数据交换及相关操作；

          使用 XMLHttpRequest进行异步数据查询、检索

      3.优点和缺点

          优点 ->更迅捷的响应速度

           无页面刷新,适合大量的数据

           例如：

           1.AJAX应用可以仅向服务器发送并取回必需的数据，

           2.使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据

           3.Ajax不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

          缺点

           1.不能发送图片只能传送字符串.

           2.不能跨站,跨域名发信息.

      4.Ajax有两种方式：

          1.iframe

          2.xmlhttp-XmlHttpRequest

      5.get,post方式,同步异步区别

          // readyState的取值如下：0-未初始化,1-正在装载,2-装载完毕,3-交互中,4-完成.

          1.同步和异步的区别：

           1.同步适合少量数据，它是需要等待的,异步是适合大批量数据，它无需等待

           2.异步需要一个回调函数.

           异步需要在open和send之间加一个：

           XmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//消息头

          2.get-send()不可以传参,

           1.同步

                 var url = "AjaxServlet.do?timerId=" + (new Date()).getMilliseconds();

                 //创建一个请求对象(协议)

                 var xmlHttpReq = new ActiveXObject("MSXML2.XMLHTTP.3.0");

                 //打开链接，创建一个新的http请求(并指定此请求的方法、url、验证信息)

                 xmlHttpReq.open("GET", url, false);

                 xmlHttpReq.send();

                 alert("getSyncRequest()"); //执行完后台再输出.

                 //将响应信息作为字符串返回  Thread.sleep(3000); 3秒钟后连续输出.

                 alert(xmlHttpReq.responseText);

           2.异步-较同步的速度快.

                 //时间戳-缓存问题.

                 var url = "AjaxServlet.do?name=zhangsan&timerId="+ (new Date()).getMilliseconds();

                 //创建一个请求对象(协议)

                 xmlHttpReq = new ActiveXObject("MSXML2.XMLHTTP.3.0");

                 xmlHttpReq.onreadystatechange = HandleStateChange;

                 //打开链接，创建一个新的http请求(并指定此请求的方法、url、验证信息)

                 xmlHttpReq.open("GET", url, true);

                 xmlHttpReq.send("age=444");//Get方式不能用send传参.

                 alert("getNSyncRequest()"); //先输出,再等待响应结果.

 

                 function HandleStateChange() {

                      if (xmlHttpReq.readyState == 4) {

                            alert("HandleStateChange:" + xmlHttpReq.responseText);//返回响应结果

                      }

                 }

          3.post-send()可以传参,传参需要头文件信息.

           1.同步(open - false)

                 var url = "AjaxServlet.do?name=zhangsan&timerId="+ (new Date()).getMilliseconds();

                 //创建一个请求对象(协议)

                 var xmlHttpReq = new ActiveXObject("MSXML2.XMLHTTP.3.0");

                 //打开链接，创建一个新的http请求(并指定此请求的方法、url、验证信息)

                 xmlHttpReq.open("POST", url, false);

                 xmlHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //头文件

                 xmlHttpReq.send("age=555&sss=ddd");

                 alert("This postSyncRequest"); //等后台执行完,再输出

                 alert(xmlHttpReq.responseText);

           2.异步(true)

                 //时间戳

                 var url = "AjaxServlet.do?name=zhangsan&timerId="+ (new Date()).getMilliseconds();

                 //创建一个请求对象(协议)

                 var xmlHttpReq = new ActiveXObject("MSXML2.XMLHTTP.3.0");

                 xmlHttpReq.onreadystatechange = HandleStateChange;

                 //打开链接，创建一个新的http请求(并指定此请求的方法、url、验证信息)

                 xmlHttpReq.open("POST", url, true);

                 xmlHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

                 xmlHttpReq.send("age=444"); //post可以有send传参.

                 alert("This postNSyncRequest");//先输出,再等待响应结果

 

                 function HandleStateChange() {

                      if (xmlHttpReq.readyState == 4) {

                            alert("" + xmlHttpReq.responseText);

                      }

                 }

      6.处理从服务器得到的数据的两种方式

          1.以文本字符串的方式返回服务器的响应.　　

          2.以XMLDocument对象方式返回响应.

 

      7.浏览器兼容：

      1.　解决方案1

           function createXMLHttp() {

                 if (typeof XMLHttpRequest != "undefined") {

                      return new XMLHttpRequest();

                 } else if (window.ActiveXObject) {

                      var aVersions = [ "MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0",

                                  "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp", "Microsoft.XMLHttp" ];

                      for ( var i = 0; i < aVersions.length; i) {

                            try {

                                  var oXmlHttp = new ActiveXObject(aVersions[i]);

                                  return oXmlHttp;

                            } catch (oError) {

                            }

                      }

                 }

           }

      2.解决方案2(引入js)

      json数据格式对后台数据返回,以对象的方式响应 eval("("+{code:'sss',name:'name',gender:'gender'}+")")json

 

      1.学生信息填写框,javascript进行动态验证.

      2.document.getElementsByClassName("xxx");//兼容firefox 不兼容ie自定义getElementsByClass(className,scope)