JavaScript和Ajax部分

Posted 2020-10-31 Starer

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

          }

        }

     }

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

 

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

 

24、 为什么使用Ajax框架？

1).简化javascript的开发难度

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

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

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

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

3).简化开发流程

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

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

26、 什么是jQuery 

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

jQuery优势：

1).轻量级

2).强大的选择器

3).出色的DOM操作封装

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

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

6).完善的Ajax支持

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

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

27、 你为什么要使用jQuery？

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

28、 你在公司是怎么用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>

29、 jQuery 能做什么？

答：1. 获取页面的元素

2. 修改页面的外观

3. 改变页面大的内容

4. 响应用户的页面操作

5. 为页面添加动态效果

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

7. 简化常见的javascript任务

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

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

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

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