ajax介绍及使用

一、什么是ajax:(只刷新局部页面的技术)

    AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScriptXML),是指一种创建交互式网页应用的网页开发技术。 Ajax并不是一种全新的技术,而是整合了几种现有的技术:javascriptxmlcss。使用Ajax的好处是提供友好的用户体验,只刷新局部页面,有效利用带宽等。其特点是不刷新整个页面。

    异步:发送请求后不等返回结果,继续做别的事情,由回调函数处理结果

    JavaScript :通过XMLHttpRequest对象向服务器发起请求,获得返回结果,更新页面

    XML:封装数据

    Css:用于美化页面样式。

二、用途

    使用JavaScript从服务器获取数据而不必刷新整个页面

三、怎样使用Ajax

    AJAX 遵循Request/Response 模式,这个框架的基本流程为:对象初始化->发送请求->服务器接收->服务器返回->客户端接收->修改客户端页面内容。这个过程是异步进行的。

    1、  初始化对象并发出XMLHttpRequest 请求

  1. functionCreateXmlHttpRequest(){
  2. if(window.ActiveXObject){
  3. xmlHttpRequest =newActiveXObject("Microsoft.XMLHTTP");
  4. }elseif(window.XMLHttpRequest){
  5. xmlHttpRequest =newXMLHttpRequest();
  6. }
  7. return xmlHttpRequest;
  8. }
  9. //为了让Javascript 可以向服务器发送HTTP 请求,必须使用XMLHttpRequest 对象。各个浏览器对这个实例化过程的实现方式不同。IE 以ActiveX 控件的形式提供,而Mozilla 等浏览器则直接以XMLHttpRequest 类的形式提供

    2、指定响应处理函数

        指定当服务器返回信息时客户端的处理方式,相应的处理函数名称赋给XMLHttpRequest 对象的onreadystatechange属性。

        例如:xmlHttpRequest.onreadystatechange=haolejiaowo;

    3、发出HTTP 请求

        指定响应处理函数之后,就可以向服务器发出HTTP 请求。这一步调用XMLHttpRequest 对象的open send 方法。

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

        xmlHttpRequest.send(null);

        open 的第一个参数是HTTP 请求的方法,为GetPost或者Head

        open 的第二个参数是目标URL

        open 的第三个参数只是指定在等待服务器返回信息的时间内是否继续执行下面的代码。如果为True,则不会继续执行,直到服务器返回信息。默认为True

    4、处理服务器返回的信息

        首先,它要检查XMLHttpRequest 对象的readyState 值,判断请求的当前状态。服务器返回信息后,还需要判断返回的HTTP 状态码,确定返回的页面没有错误。

        所有的状态码都可以在W3C 的官方网站上查到,http状态码

        请求状态:

            0 -- 未初始化

           1 -- 初始化

           2 -- 发送请求

           3 -- 开始接受结果

           4 -- 接受结果完毕,信息已经返回,可以开始处理

        每次状态改变都会调这个函数

        HTML返回码:

            200 – OK,代表页面正常

            404 -- Not found(没有找到资源)

            500 -- 服务器端出错

  1. function haoLeJiaoWo(){
  2. if( xmlHttpRequest.readyState ==4&& xmlHttpRequest.status ==200){
  3. var b = xmlHttpRequest.responseText;
  4. if(b=="true"){
  5. alert("用户名已经存在");
  6. }else{
  7. alert("用户名可以使用");
  8. }
  9. }
  10. }

            XMLHttpRequest 对成功返回的信息有两种处理方式:

               responseText 将传回的信息当字符串使用;

               responseXML 将传回的信息当XML 文档使用,可以用DOM 处理。

        整体的函数:

  1. Function check(){
  2. // 发送请求到服务器,判断用户名是否存在
  3. // 请求字符串
  4. var url ="?operate=doCheckUserExists&uname="+uname;
  5. // 1. 创建XMLHttpRequest组件
  6. xmlHttpRequest = createXmlHttpRequest();
  7. // 2.设置回调函数
  8. xmlHttpRequest.onreadystatechange = haoLeJiaoWo;(状态改变时,将要调用的函数的名字)
  9. // 3.初始化XMLHttpRequest组件
  10. xmlHttpRequest.open("GET",url,true);
  11. // 4.发送请求
  12. xmlHttpRequest.send(null);
  13. }
四、Ajax缓存

    ajax缓存:当再次请求同一url,浏览器会直接取出缓存里的内容返回,而不向服务器端发送请求.这只有在提交方式使用get时才会发生,解决方法是在url后面加上一个参数来告诉浏览器这是一个新的请求,通常可以用new Date()来生成时间戳。post方式提交每次都会向服务器发送请求,不要考虑缓存.

解决方法如下:

    方法1:

        js中添加代码

        Js代码

        xmlhttp.setRequestHeader("If-Modified-Since","0"); 

    方法2:

        jspresponse设置

    Java代码

        response.setHeader("Cache-Control", "no-cache, must-revalidate"); 

    方法3:

        url后面加上获取本地时间的参数





郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。