JavaScript和Ajax部分（3）

2一、 原生（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返回值操做页面元素

          }

        }

     }

2二、 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格式的内容信息

 

2三、 怎么处理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：不推荐

 

2四、 为何使用Ajax框架？

1).简化JavaScript的开发难度

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

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

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

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

3).简化开发流程

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

2五、 经常使用的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应用场景封装为简单的标签。

2六、 什么是jQuery 

jQuery也就是JavaScript和Query(查询),便是辅助JavaScript开发的库。

jQuery优点：

1).轻量级

2).强大的选择器

3).出色的DOM操做封装

4).可靠的事件处理机制

5).出色的浏览器兼容性

6).完善的Ajax支持

7).出色的浏览器兼容性等

8).jQuery理念：写的少，作的多

2七、 你为何要使用jQuery？

答：由于jQuery是轻量级的框架，大小不到30kb,它有强大的选择器，出色的DOM操做的封装，有可靠的事件处理机制(jQuery在处理事件绑定的时候至关的可靠)，完善的ajax(它的ajax封装的很是的好，不须要考虑复杂浏览器的兼容性和XMLHttpRequest对象的建立和使用的问题。) 出色的浏览器的兼容性。 并且支持链式操做，隐式迭代。行为层和结构层的分离，还支持丰富的插件，jQuery的文档也很是的丰富。

2八、 你在公司是怎么用jQuery的？

答：在项目中是怎么用的是看看你有没有项目经验(根据本身的实际状况来回答)

你用过的选择器啊，复选框啊，表单啊，ajax啊，事件等

配置JQuery环境的步骤

1）下载jQuery类库，在jsp页面引用jQuery类库便可

<script type="text/javascript" src="jQuery/jQuery-1.7.2.min.js"/>

2）jQuery的调用示例：

<script>

//建立一个页面默认启动调用的特效

$(document).ready(

function(){

alert("页面启动时调用该方法!");

}

);

 

//以上代码也能够写成以下的简写方式

$(function(){

alert("页面启动时调用该方法!");

});

</script>

2九、 jQuery 能作什么？

答：1. 获取页面的元素

2. 修改页面的外观

3. 改变页面大的内容

4. 响应用户的页面操做

5. 为页面添加动态效果

6. 无需刷新页面，便可以从服务器获取信息

7. 简化常见的javascript任务

30、 $(document).ready()方法和window.onload有什么区别？

答: 两个方法有类似的功能，可是在执行时机方面是有区别的。

1） window.onload方法是在网页中全部的元素(包括元素的全部关联文件)彻底加载到浏览器后才执行的。

2） $(document).ready() 方法能够在DOM载入就绪时就对其进行操纵，并调用执行绑定的函数。