Ajax

最新推荐文章于 2019-09-15 08:44:01 发布

原创最新推荐文章于 2019-09-15 08:44:01 发布 · 395 阅读

1 ·

CC 4.0 BY-SA版权

JavaWeb 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了AJAX技术，一种在不重新加载整个网页的情况下与服务器交换数据并更新部分网页的技术。探讨了AJAX的优点，包括无刷新更新数据、异步通信、负载平衡等，并深入解析了XMLHttpRequest对象的使用方法和属性。

一、基本概念

1.AJAX 是一种在无需重新加载整个网页的情况下，与服务器交换数据并更新部分网页的技术，之前传统的网页如果需要更新内容,必须重新加载整个页面

2.使用XMLHttpRequest对象与Web服务器进行异步数据通信

3.Ajax的优点：

1）无刷新更新数据

    AJAX最大的优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互，
    并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验

2）异步与服务器通信

    AJAX使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。优化了Browser和Server之间的沟通，
    减少不必要的数据传输、时间及降低网络上数据流量

3）前端和后端负载平衡

    AJAX可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。
        并且减轻服务器的负担，AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能

4）基于标准被广泛支持

    AJAX基于标准化的并被广泛支持的技术，不需要下载浏览器插件或者小程序，但需要客户允许JavaScript在浏览器上执行

5）界面与应用分离

    Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离），有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统

二、XMLHttpRequeset对象

1.常用方法

1）open("method","URL",[asyncFlag],["userName"],["password"])     

   建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数，是否异步（默认true,false同步），用户名，密码

2）send(content)

   向服务器发送请求，get.send(null),可以为空，参数在url上，post.send（body里面的数据，url的？后面的部分）

3）setRequestHeader("header", "value")

   把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。设置header并和请求一起发送 ('post'方法一定要 )

2.常用属性

1）onreadystatechange   

   状态改变的事件触发器，每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数（给浏览器程序调用的回调函数）

2）readyState

   请求的状态。有5个可取值：0 = 未初始化，1 = 正在加载，2 = 已加载，3 = 交互中，4 = 完成

3）responseText

   服务器的响应，返回数据的文本

4）status

   服务器的HTTP状态码（如：404 = "文件末找到" 、200 ="成功" ，等等）

5）statusText

   服务器返回的状态文本信息 ，HTTP状态码的相应文本（OK或Not Found（未找到）等等）

3.代码实现（在js中）

1.检查浏览器支持的异步对象

1）IE5，IE6         ActiveXObject

2) 其他             XMLHttpRequest

3）代码示例

    var xmlHttpRequest;
    if (window.XMLHttpRequest) {
            xmlHttpRequest = new XMLHttpRequest();
    } else {
            xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    }

2.测试代码示例

1) Get

 var xmlHttpRequest;
 function ajaxSubmit（）{                     
     xmlHttpRequest = new XMLHttpRequest;     
     if(xmlHttpRequest != null){
           xmlHttpRequest.open("GET", "kdn/logistics/query?shipperCode=" + value1 +"&logisticsCode=" + value2", true);
           xmlHttpRequest.onreadystatechange = ajaxCallback;   
           xmlHttpRequest.send();
     }
}

 function ajaxCallback（）{
     console.log(xmlHttpRequest);   //  这个会打印很多次，因为只要xmlHttpRequest的readyState变化，都会触发这个回调函数
     if(4 == xmlHttpRequest.readState && 200 == xmlHttpRequest.status){
            var responseText = xmlHttpRequest.responseText;
            document.getElementById("div1").innerHTML = responseText;
     }
 }

2) Post

 var xmlHttpRequest;
 function ajaxSubmit（）{                     
     xmlHttpRequest = new XMLHttpRequest;     
     if(xmlHttpRequest != null){
            xmlHttpRequest.open("POST", "kdn/logistics/query", true);
            xmlHttpRequest.onreadystatechange = ajaxCallback;
            xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");    // post方法，一定要加这个方法，且要在send方法之前
            xmlHttpRequest.send("shipperCode=" + value1 +"&logisticsCode=" + value2");
     }
 }

 function ajaxCallback（）{
     if(4 == xmlHttpRequest.readState && 200 == xmlHttpRequest.status){
             var responseText = xmlHttpRequest.responseText;
             document.getElementById("div1").innerHTML = responseText;
     }
 }