Ajax技术

•什么是Ajax

•Ajax的技术的产生

    –Ajax被认为是(AsynchronousJavaScript and XML的缩写）。现在，允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax.

    –“Ajax”这个名字是在2005年2月，AdaptivePath的JesseJames Garrett在他的文章Ajax:ANew Approach to Web Application中创造。

    –而Ajax这项技术，是Google在GoogleLabs发布GoogleMaps和GoogleSuggest后真正为人所认识。

•Ajax工具包

•Ajax并不是一项新技术，它实际上是几种技术，每种技术各尽其职，以一种全新的方式聚合在一起

    –服务器端语言：服务器需要具备向浏览器发送特定信息的能力。Ajax与服务器端语言无关。

    –XML (eXtensibleMarkup Language，可扩展标记语言)是一种描述数据的格式。Aajx程序需要某种格式化的格式来在服务器和客户端之间传递信息，XML是其中的一种选择

    –XHTML（eXtendedHypertext Markup Language,使用扩展超媒体标记语言）和CSS（CascadingStyle Sheet,级联样式单）标准化呈现；

    –DOM（DocumentObject Model,文档对象模型）实现动态显示和交互；

    –使用XMLHTTP组件XMLHttpRequest对象进行异步数据读取

    –使用JavaScript绑定和处理所有数据

•Ajax的缺陷

•AJAX不是完美的技术。使用AJAX，它的一些缺陷不得不权衡一下：

    –由 Javascript和AJAX引擎导致的浏览器的兼容

    –页面局部刷新，导致后退等功能失效。

    –对流媒体的支持没有FLASH、JavaApplet好。

    –一些手持设备（如手机、PDA等）支持性差。

一、XMLHttpRequest

•XMLHttpRequest最早是在IE5中以ActiveX组件的形式实现的。非W3C标准.

•创建XMLHttpRequest对象（由于非标准所以实现方法不统一）

    –InternetExplorer把XMLHttpRequest实现为一个ActiveX对象

    –其他浏览器（Firefox、Safari、Opera…）把它实现为一个本地的JavaScript对象。

    –XMLHttpRequest在不同浏览器上的实现是兼容的，所以可以用同样的方式访问XMLHttpRequest实例的属性和方法，而不论这个实例创建的方法是什么。

1-1•创建XMLHttpRequest对象

•为了每次写Ajax的时候都节省一点时间，可以把对象检测的内容打包成一个可复用的函数：

•

    说明：对window.XMLHttpRequest的调用会返回一个对象或null，if语句会把调用返回的结果看作是true或false（如果返回对象则为true，返回null则为false）。如果XMLHttpRequest对象存在，则把xhr的值设为该对象的新实例。如果不存在，就去检测ActiveObject的实例是否存在，如果答案是肯定的，则把微软XMLHTTP的新实例赋给 xhr

1-2.XMLHttpRequest的方法

1-3.XMLHttpRequest的属性

1-4.发送请求

•利用XMLHttpRequest实例与服务器进行通信包含以下3个关键部分：

  –onreadystatechange事件处理函数

  –open方法

  –send方法

1•onreadystatechange:

    –该事件处理函数由服务器触发，而不是用户

    –在 Ajax 执行过程中，服务器会通知客户端当前的通信状态。这依靠更新XMLHttpRequest对象的readyState来实现。改变readyState属性是服务器对客户端连接操作的一种方式。每次readyState属性的改变都会触发readystatechange事件

2•open(method,url,asynch)

    –XMLHttpRequest对象的open方法允许程序员用一个Ajax调用向服务器发送请求。

    –method：请求类型，类似 “GET”或”POST”的字符串。若只想从服务器检索一个文件，而不需要发送任何数据，使用GET(可以在GET请求里通过附加在URL上的查询字符串来发送数据，不过数据大小限制为2000个字符)。若需要向服务器发送数据，用POST。

    –在某些情况下，有些浏览器会把多个XMLHttpRequest请求的结果缓存在同一个URL。如果对每个请求的响应不同，就会带来不好的结果。在此将时间戳追加到URL的最后，就能确保URL的唯一性，从而避免浏览器缓存结果。

    –url：路径字符串，指向你所请求的服务器上的那个文件。可以是绝对路径或相对路径。

    –asynch：表示请求是否要异步传输，默认值为true。指定true，在读取后面的脚本之前，不需要等待服务器的相应。指定false，当脚本处理过程经过这点时，会停下来，一直等到Ajax请求执行完毕再继续执行。

3•send(data)：

    –open方法定义了Ajax请求的一些细节。send方法可为已经待命的请求发送指令

    –data：将要传递给服务器的字符串。

    –若选用的是GET请求，则不会发送任何数据，给send方法传递null即可：request.send(null);

    –当向send()方法提供参数时，要确保open()中指定的方法是POST，如果没有数据作为请求体的一部分发送，则使用null.

    –完整的 Ajax 的 GET 请求示例：

•setRequestHeader(header,value)

    –当浏览器向服务器请求页面时，它会伴随这个请求发送一组首部信息。这些首部信息是一系列描述请求的元数据(metadata)。首部信息用来声明一个请求是GET还是POST。

    –Ajax请求中，发送首部信息的工作可以由setRequestHeader该完成

    –参数header：首部的名字; 参数value：首部的值。

    –如果用POST请求向服务器发送数据，需要将“Content-type”的首部设置为“application/x-www-form-urlencoded”.它会告知服务器正在发送数据，并且数据已经符合URL编码了。

    –该方法必须在open()之后才能调用

    –完整的 Ajax 的 POST 请求示例：

1-5.接收相应

•用 XMLHttpRequest的方法可向服务器发送请求。在Ajax处理过程中，XMLHttpRequest的如下属性可被服务器更改：

   –readyState

   –status

   –responseText

    –responseXML

1•readyState

  –readyState属性表示Ajax请求的当前状态。它的值用数字代表。

    •0 代表未初始化。还没有调用open方法

    •1 代表正在加载。open方法已被调用，但send方法还没有被调用

    •2 代表已加载完毕。send已被调用。请求已经开始

    •3 代表交互中。服务器正在发送响应

    •4代表完成。响应发送完毕

  –每次readyState值的改变，都会触发readystatechange事件。如果把onreadystatechange事件处理函数赋给一个函数，那么每次readyState值的改变都会引发该函数的执行。

  –readyState值的变化会因浏览器的不同而有所差异。但是，当请求结束的时候，每个浏览器都会把readyState的值统一设为4

2.•status

  –服务器发送的每一个响应也都带有首部信息。三位数的状态码是服务器发送的响应中最重要的首部信息，并且属于超文本传输协议中的一部分。

  –常用状态码及其含义：

    •404没找到页面(notfound)

    •403禁止访问(forbidden)

    •500内部服务器出错(internalservice error)

    •200一切正常(ok)

    •304没有被修改(notmodified)

–在XMLHttpRequest对象中，服务器发送的状态码都保存在status属性里。通过把这个值和200或304比较，可以确保服务器是否已发送了一个成功的响应

•responseText

    –XMLHttpRequest的responseText属性包含了从服务器发送的数据。它是一个HTML,XML或普通文本，这取决于服务器发送的内容。

    –当 readyState属性值变成4时,responseText属性才可用，表明Ajax请求已经结束。

•responseXML

    –如果服务器返回的是XML，那么数据将储存在responseXML属性中。

    –只用服务器发送了带有正确首部信息的数据时，responseXML属性才是可用的。MIME类型必须为text/xml

人

二、数据格式提要

•在服务器端 AJAX是一门与语言无关的技术。在业务逻辑层使用何种服务器端语言都可以。

•从服务器端接收数据的时候，那些数据必须以浏览器能够理解的格式来发送。服务器端的编程语言只能以如下3种格式返回数据：

    –XML

   –JSON

   –HTML

2-1.解析 HTML

    •HTML 由一些普通文本组成。如果服务器通过XMLHttpRequest发送HTML，文本将存储在responseText属性中。

    •不必从 responseText属性中读取数据。它已经是希望的格式，可以直接将它插入到页面中。

    •插入 HTML 代码最简单的方法是更新这个元素的innerHTML属性。

•优点：

    –从服务器端发送的HTML代码在浏览器端不需要用JavaScript进行解析。

    –HTML的可读性好。

    –HTML代码块与 innerHTML属性搭配，效率高。

•缺点：

    –若需要通过AJAX 更新一篇文档的多个部分，HTML 不合适

    –innerHTML并非 DOM 标准。

测试代码：http://blog.csdn.net/ochangwen/article/details/5274298

2-2.•解析 XML

•优点：

    –XML是一种通用的数据格式。

    –不必把数据强加到已定义好的格式中，而是要为数据自定义合适的标记。

    –利用 DOM 可以完全掌控文档。

•缺点：

    –如果文档来自于服务器，就必须得保证文档含有正确的首部信息。若文档类型不正确，那么responseXML的值将是空的。

    –当浏览器接收到长的XML文件后，DOM 解析可能会很复杂

测试代码：http://blog.csdn.net/ochangwen/article/details/5274298

2-3.解析JSON，使用最多

    •JSON（JavaScriptObject Notation）一种简单的数据格式，比xml更轻巧。JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。

     •JSON的规则很简单：对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’对”之间使用“,”（逗号）分隔。

JSON示例

测试代码：http://blog.csdn.net/ochangwen/article/details/5274298

    <script type="text/javascript">        var jsonObject ={            "name":"changwen",            "age":12,            "address":{"city":"bj","school":"haida"},            "studing":function () {                alert("java web");            }        }        alert(jsonObject.address.city);        jsonObject.studing();        //把一个字符串转化为JSON对象        var testStr = "alert('hello eval')";        // eval可以把一个字符串转为本地的JS代码来执行        eval(testStr); //执行到这里会弹出hello eval!!!        var jsonStr = "{'name1':'changwen'}";        // 把JSON字符串转为JSON对象        var testObject = eval("("+jsonStr+")"); //eval(jsonStr)这么写不行        alert(testObject.name1);    </script>

三、jQuery中的Ajax

    •jQuery对 Ajax 操作进行了封装,在 jQuery中最底层的方法时$.ajax(),第二层是 load(),$.get()和$.post(),第三层是$.getScript()和 $.getJSON()

3-1•load()方法

    •load() 方法是 jQuery中最为简单和常用的Ajax方法, 能载入远程的HTML代码并插入到DOM中.它的结构是:   load(url[, data][,callback])

•

    •程序员只需要使用jQuery选择器为HTML 片段指定目标位置,然后将要加载的文件的url做为参数传递给load()方法即可

•load()方法---- 细节

    •如果只需要加载目标HTML页面内的某些元素, 则可以通过load()方法的URL 参数来达到目的.通过URL参数指定选择符,就可以方便的从加载过来的HTML文档中选出所需要的内容.load()方法的 URL 参数的语法结构为“url selector”(注意:url和选择器之间有一个空格)

    •传递方式:load() 方法的传递参数根据参数data 来自动自定. 如果没有参数传递,采用GET方式传递,否则采用POST方式

    •对于必须在加载完才能继续的操作,load()方法提供了回调函数, 该函数有三个参数: 代表请求返回内容的data;代表请求状态的textStatus对象和XMLHttpRequest对象

    <script type="text/javascript" src="../scripts/jquery-1.7.2.js"></script>    <script type="text/javascript">        $(function () {            $("a").click(function () {                var url = this.href + " h2 a ";//一定要有空格，这样只会显示h2里的内容                var args = {"time": new Date()} //加这个用除缓存                $("#details").load(url,args);  //如果没有参数传递,采用GET方式传递,否则采用POST方式                return false;            });        });    </script></head><body><h1>People</h1><ul>    <li><a href="files/andy.html">Andy</a></li>    <li><a href="files/richard.html">Richard</a></li>    <li><a href="files/jeremy.html">Jeremy</a></li></ul>    <div id="details"></div></body></html>

上面这个实验就是将andy.html等文件的内容在details下显示出来。

3-2.•$.get()(或$.post())方法

    •$.get()方法使用GET 方式来进行异步请求.它的结构是:$.get(url[,data][, callback][, type]);

•

    •$.get()方法的回调函数只有两个参数:data代表返回的内容, 可以是 XML 文档,JSON文件,HTML 片段等; textstatus代表请求状态,其值可能为: succuss,error,notmodify,timeout 4种.

    •$.get()  和 $.post() 方法时 jQuery中的全局函数,而 find() 等方法都是对 jQuery对象进行操作的方法

    <script type="text/javascript" src="../scripts/jquery-1.7.2.js"></script>    <script type="text/javascript">        $(function () {            $("a").click(function () {                var url = this.href ;                var args = {"time": new Date()}; //加这个用除缓存                // 将get 修改为post就是post方法                //args: JSON格式                //function:回调函数，当响应结束时，回调函数被触发，响应结果在data中                $.get(url,args,function (data) {                    var name = $(data).find("name").text();                    var email = $(data).find("email").text();                    var website = $(data).find("website").text();                    $("#details").empty()                                 .append("<h2><a href='mailto:" + email+ "'>" +name+"</a></h2>")                                 .append("<a href='"+website+"'>" +website+ "</a>");                });                return false;            });        });    </script>

$.get()与$.getJSON可以替换，但有一点不同，可以看这里的测试代码（解析JSON）：http://blog.csdn.net/ochangwen/article/details/5274298

3-3.$.get()(或$.post())方法应用

1.实验一：验证用户名是否可用.

测试代码（Ajax实验一）：http://blog.csdn.net/ochangwen/article/details/5274298

2.实验二：添加商品

 如需要测试，请到github下载：https://github.com/changwensir/java-web/tree/master/ajax