Ajax

参考网址：http://www.cnblogs.com/xiaoluo501395377/archive/2012/10/28/2743181.html

异步JavaScript 及XML（英文：Asynchronous JavaScript And XML 缩写Ajax）。是一种基于 JavaScript和HTTP请求（HTTP requests），广泛应用在浏览器的网页开发技术。Ajax是多项技术的综合应用。Ajax概念由Jesse James Garrett所提出，在2005 年由Google推广开来的编程模式。

1.AJAX具备哪些优点

   传统的web应用允许用户填写表单(form)，当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单，然後返回一个新的网页。这个做法浪费了许多带宽，因为在前後两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。

  与此不同，AJAX应用可以仅向服务器发送并取回必需的数据，它使用SOAP或其它一些基于XML的web service接口，并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少，结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了。

  使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。

  Ajax不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。就像DHTML应用程序那样，Ajax应用程序必须在众多不同的浏览器和平台上经过严格的测试。随着Ajax的成熟，一些简化Ajax使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设计的技术，为那些不支持JavaScript的用户提供替代功能。

2.AJAX的缺陷依然存在

  对应用Ajax最主要的批评就是，它可能破坏浏览器后退按钮的正常行为。在动态更新页面的情况下，用户无法回到前一个页面状态，这是因为浏览器仅能记下历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常都希望单击后退按钮，就能够取消他们的前一次操作，但是在Ajax应用程序中，却无法这样做。不过开发者已想出了种种办法来解决这个问题，当中大多数都是在用户单击后退按钮访问历史记录时，通过建立或使用一个隐藏的IFRAME来重现页面上的变更。（例如，当用户在Google Maps中单击后退时，它在一个隐藏的IFRAME中进行搜索，然后将搜索结果反映到Ajax元素上，以便将应用程序状态恢复到当时的状态。）

  一个相关的观点认为，使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中。该问题的解决方案也已出现，大部分都使用URL片断标识符（通常被称为锚点，即URL中#后面的部分）来保持跟踪，允许用户回到指定的某个应用程序状态。（许多浏览器允许JavaScript动态更新锚点，这使得Ajax应用程序能够在更新显示内容的同时更新锚点。）这些解决方案也同时解决了许多关于不支持后退按钮的争论。

  进行Ajax开发时，网络延迟——即用户发出请求到服务器发出响应之间的间隔——需要慎重考虑。不给予用户明确的回应 ，没有恰当的预读数据，或者对XMLHttpRequest的不恰当处理，都会使用户感到延迟，这是用户不欲看到的，也是他们无法理解的。通常的解决方案是，使用一个可视化的组件来告诉用户系统正在进行后台操作并且正在读取数据和内容。

3. Javascript的Ajax实现

3.1 XMLHttpRequest的创建

包括ie6以前的版本

// 创建XMLHttpRequest对象
        function createXMLHttpRequest() {
            if (window.XMLHttpRequest) {// IE 7.0及以上版本和非IE的浏览器
                xmlHttpReq = new XMLHttpRequest();
            } else {// IE 6.0及以下版本
                try {
                    xmlHttpReq = new ActiveXObject("MSXML2.XMLHTTP");
                }catch (e) {
                    try {
                        xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
                    }catch (e) {}
                }
            }
            if (!xmlHttpReq) {
                alert("当前浏览器不支持!");
                return null;
            }
            return xmlHttpReq;
        }

3.2 ajax的get/post访问

            var requestMethod = 'get';
            if(txtValue!=""){
                var parameter = "code="+txtValue+"&str=中文";
                var requestURL = "http://localhost:8000/ajax2";
                xmlHttpReq = createXMLHttpRequest();
                if("GET" == requestMethod.trim().toUpperCase()){
                    xmlHttpReq.open("GET",requestURL,true);
                    //xmlHttpReq.setRequestHeader("If-Modified-Since","0");
                    xmlHttpReq.send("null");
                }else if("POST" == requestMethod.trim().toUpperCase()){
                    xmlHttpReq.open("POST",requestURL,true);
                    xmlHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
                    xmlHttpReq.send(requestURL);
                }else{
                    alert("错误的请求方式！");
                    return;
                }
                //alert("hello");
                xmlHttpReq.onreadystatechange = function(){
                    if(xmlHttpReq.readyState == 4){
                        switch(xmlHttpReq.status){
                            case 200:
                                //var datas = xmlHttpReq.responseXML.getElementsByTagName("data");
                                //alert(datas.length);
                                document.getElementById("downlist").innerHTML = xmlHttpReq.responseText;
                                break;
                            case 400:
                                alert("错误的请求！\nError Code:400!");
                                break;
                            case 403:
                                alert("拒绝请求！\nError Code:403!");
                                break;
                            case 404:
                                alert("请求地址不存在！\nError Code:404!");
                                break;
                            case 500:
                                alert("内部错误！\nError Code:500!");
                                break;
                            case 503:
                                alert("服务不可用！\nError Code:503!");
                                break;
                            default:
                                alert("请求返回异常！\nError Code:"+xmlHttpReq.status);
                                break;
                        }
                    }
                }

 

4. JQuery的Ajax封装

jQuery 提供多个与 AJAX 有关的方法。

通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

4.1 JQuery load

demo_test.txt

<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $('#test').load('/example/jquery/demo_test.txt');
  })
})
</script>
</head>

<body>

<h3 id="test">请点击下面的按钮，通过 jQuery AJAX 改变这段文本。</h3>
<button id="btn1" type="button">获得外部的内容</button>

</body>
</html>

 

下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素中：

$("#div1").load("demo_test.txt #p1");

回调函数：

$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部内容加载成功！");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

4.2 JQuery get/post

jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。

4.2.1 jQuery $.get() 方法

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

$("button").click(function(){
  $.get("demo_test.asp",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

4.2.2 jQuery $.post() 方法

$.post() 方法通过 HTTP POST 请求从服务器上请求数据。

$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

4.3 ajax方法

该方法一般用在跨域的解决方案上面。

<script type="text/javascript">  
     jQuery(document).ready(function(){   
        $.ajax({  
             type: "GET",  
             async: false,  
             //url: "http://test/jsonp.php",  
             url:"http://localhost:8000/1.php",  
             dataType: "jsonp",  
             jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)  
             jsonpCallback:"bbb",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据  
             success: function(json){  
                 alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。回调函数名为: '+json.func);  
             },  
             error: function(){  
                 alert("fail");  
             }  
         });  
     });  
     </script>

4.4 JQuery ajax解决跨域问题

4.4.1 jsonp

JQuery对于Ajax的跨域请求有两类解决方案，不过都是只支持get方式。分别是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式。

什么是jsonp格式呢？API原文：如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用jsonp类型。使用这种类型的话，会创建一个查询字符串参数 callback=? ，这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名，以便完成一个有效的JSONP请求。意思就是远程服务端需要对返回的数据做下处理，根据客户端提交的callback的参数，返回一个callback(json)的数据，而客户端将会用script的方式处理返回数据，来对json数据做处理。JQuery.getJSON也同样支持jsonp的数据方式调用。

<script type="text/javascript">
    jQuery(document).ready(function(){
        $.ajax({
            type: "GET",
            async: false,
            //url: "http://test/jsonp.php",
            url:"http://localhost:8000/ajax2",
            dataType: "jsonp",
            jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
            jsonpCallback:"bbb",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
            success: function(json){
                //alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。回调函数名为: '+json.func);
                alert("success");
            },
            error: function(){
                alert("fail");
            }
        });
    });
</script>

 

服务器端代码：

$callback = isset($_GET["callback"]) ? $_GET["callback"] : 'flightHandler';
        $a = array(
            'code'=>'CA1998',
            'price'=>'6000',
            'tickets'=>20,
            'func'=>$callback,
        );
        $result = json_encode($a);
        echo "{$callback}($result)";

4.4.2 getScript

getScript方法提供一种更简单的跨域解决方案。

<script type="text/javascript">
$(document).ready(function(){
    var oBtnTest = $("#btnTest");
    oBtnTest.click(function(){
        oBtnTest.disabled = true;    
        var oResult = $("#result");
        oResult.html("loading").css("color","red");
        jQuery.getScript("http://app.cntvs.com/test/js.txt", 
        function(){            
            oResult.html("name:" + jimmy.name + "<br/>email:" + jimmy.email).css("color","black");            
            oBtnTest.disabled = false;            
        });         
    });    
});

 

服务器端js.txt

var jimmy = {name:"jimmy.yang",email:jimmy.yang@163.com}