Ajax

1、              你是怎么理解Ajax的,什么是Ajax?

Ajax 的全称是Asynchronous JavaScript and XML,其中Asynchronous 是异步的意思,它有别于传统web开发中采用的同步的方式。

Ajax并非一种新的技术,而是几种原有技术的结合体。它由下列技术组合而成。

1)        使用CSS和XHTML来表示。

2)        使用DOM模型来交互和动态显示。

3)        使用XMLHttpRequest来和服务器进行异步通信。

4)        使用javascript来绑定和调用。

2、              实现AJAX异步调用需要哪些步骤

1)     创建XMLHttpRequest对象,也就是创建一个异步调用对象.

2)     创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.

3)     设置响应HTTP请求状态变化的函数.

4)     发送HTTP请求.

5)     获取异步调用返回的数据.

6)     使用JavaScript和DOM实现局部刷新.

3、     原生(native)Ajax使用实例

    //创建XMLHttpRequest对象的方法

    function createXmlHttpRequest(){

    if(window.ActiveXObject){

       return  new ActiveXObject("Microsoft.XMLHTTP");

    }else if(window.XMLHttpRequest){

       return  new XMLHttpRequest();

    }

    }

    //ajax操作

    function showContent(titleobj){

        var url="ShowContentServlet?id="+titleobj.id;  //设置提交路径

        XmlHttp2 = createXmlHttpRequest();   //创建对象 

        XmlHttp2.onreadystatechange = contentProcessRequest;  //设置回调函数

        XmlHttp2.open("get",url,true);//get表示路径中带参传值,post表示send方法传值

        XmlHttp2.send("null");   //发送请求

     }

     //回调函数, 就是返回响应后调用的函数

     function contentProcessRequest(){

        if(XmlHttp2.readyState == 4){

          if(XmlHttp2.status == 200){

             //根据ajax返回值操作页面元素

          }

        }

     }

4、     XMLHttpRequest对象简介?

1).XMLHttpRequest常用方法,

    open("post/get","请求的地址","true/false") :第三个参数是是否使用异步请求,可以为true;和false

    send(content): 发送请求,content参数指定请求的参数,如果不需要,则为null,

    setRequestHeader(header,value) :设置请求的头信息

2)XMLHttpRequest常用属性,

    a) onreadystatechange 指定XMLHttpRequest对象的回调函数。相当于一个事件,当XMLHttpRequest的状态发生

    改变的时候,都会调用onreadystatechange指定的回调函数。

    代码案例: XMLHttpRequest对象.onreadystatechange =  函数名;

    b) readyState: XMLHttpRequest的状态信息,取值如下

        0:已经创建了XMLHttpRequest对象,但是还没有初始化

        1:此时,代码已经调用open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器

        2:此时,已经通过一个send()方法把一个请求发送到了服务器,但还没收到响应

        3:此时已经接受了HTTP响应头部信息,但是消息体部分还没完全接收结束

        4:响应被完全接收

    c) status:HTTP的状态码,仅当readyState的值为3或4的时候,status属性才可,status的值为: 200 :服务器响应正常   , 400:无法找到请求的资源 , 403:没有访问权限 404:访问的资源不存在、 500:服务器内部错误

    d)responseText: 获得响应的文本内容(服务器返回的普通文本信息)

    f)responseXML:获取响应的XML格式的内容信息

 

5、              怎么处理Ajax中的缓存

1)        在服务端加 header("Cache-Control: no-cache, must-revalidate");

2)        在ajax发送请求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0");

3)        在ajax发送请求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache");

4)        在 Ajax 的 URL 参数后加上 "?fresh=" + Math.random(); //当然这里参数 fresh 可以任意取了

5)        第五种方法和第四种类似,在 URL 参数后加上 "?timestamp=" + new Date().getTime();

6)        用POST替代GET:不推荐

 

6、     为什么使用Ajax框架?

1).简化JavaScript的开发难度

过去JavaScript的往往用于实现一些小玩意、

弹出警告信息、动态文字等。而JavaScript被赋予的操作文档对象模型(DOM)与测控CSS的强大能力被忽视了。

2).解决浏览器的兼容性问题

即使能轻松使用JavaScript,但一旦遇到各式浏览器也会头痛。不同浏览器对JavaScript的支持并不一致,同一浏览器的版本不同的支持也不一样

3).简化开发流程

之前开发客户端与服务器异步交互程序一定能体会到在开发过程中相当繁琐,必须检查处理状态、指定服务器处理程序和设置回调函数等细节

7、     常用的Ajax框架有哪些?

1).Prototype

是一個純粹的JavaScript函數庫,對Ajax提供了良好的支持

2).jQuery

另一個非常優秀的JavaScript庫,對Ajax提供良好的支持,與Prototype設計思想不同的是在使用JQuery之後,開發者提供了不再是DOM對象而是JQuery對象。

3).DWR

非常专业的Java Ajax框架,通过DWR框架,可以将Java类中的方法直接暴露给客户端

4).Dojo

功能强大,包含许多内容,AJax只是其中之一,特点在于控件和控件系统

5).AjaxTags

由一系列JSP标签组成,将常用的Ajax应用场景封装为简单的标签。

posted @ 2018-04-19 19:34  Mr丶Gim  阅读(95)  评论(0)    收藏  举报