JavaScript和Ajax部分(3)
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载入就绪时就对其进行操纵,并调用执行绑定的函数。
JavaScript和Ajax部分(3)的更多相关文章
- 最新JavaScript、Ajax典藏级学习资料下载分类汇总 (2011年12月21日更新)
其他网站开发相关资料 超强HTML和xhtml,CSS精品学习资料下载汇总 最新htm ...
- 初识JavaScript,Ajax,jQuery,并比较三者关系
一.基本认识 1.JavaScript 定义: javaScript的简写形式就是JS,是由Netscape公司开发的一种脚本语言,一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态 ...
- JavaScript实现Ajax小结
置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<TCP的三次握手和四次挥手> 作者主页:myvin 博主QQ:851399101(点击QQ和博主发起临 ...
- 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求
转http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 ...
- javascript版Ajax请求
什么是Ajax请求,Ajax也就是“Asynchronous JavaScript and XML”(异步JavaScript和XML),无刷新数据读取.能减少流量的消耗,也提高了浏览的流畅性,给用户 ...
- Javascript与Ajax
不使用jquery来处理ajax请求该怎么做? 首先要明确html中的某些数据需要从服务端获得,也就是客户端向服务端请求(request)数据,服务端就响应(response)这个请求,把客户端要的数 ...
- javascript进阶——Ajax
统的Web 页面和应用中,用户每点击页面上的某个部分,浏览器就会向服务器发出一个请求,等待服务器做出响应,然后返回一个完整新网页,但在大多数情况下用户不得不忍受页面闪烁和长时间的等待.随着Web技术的 ...
- Javascript and AJAX with Yii(在yii 中使用 javascript 和ajax)
英文原文:http://www.yiiframework.com/wiki/394/javascript-and-ajax-with-yii /*** http://www.yiiframework. ...
- javascript实现ajax
什么是 ajax ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取. http 请求 首先需要了解 htt ...
- JavaScript和ajax 跨域的案例
今天突然想看下JavaScript和ajax 跨域问题,然后百度看了一下,写一个demo出来 <!DOCTYPE html> <html xmlns="http://www ...
随机推荐
- X86给龙芯笔记本编译本地工具链(未完待续)
我买了一台龙芯2F的笔记本来当玩具. 买回来发现,这台笔记本上没法安装软件,因为既没有软件仓库,也没有GCC. 因此需要构建交叉工具链和构建本地工具链. 下面是我研究如何搞定着一切的笔记. 工具链组件 ...
- ffmpeg源码编译安装(Compile ffmpeg with source) Part 1 : 通用部分
本页内容包含了在Unix/Linux中用源码包编译的通用的结构 可能不仅仅适用于ffmpeg 为啥使用源码包编译 编译源码可以扩展功能, 实现相对于自己平台的最优化, 还可以自定义的修改 概述 大部分 ...
- vue中集成pdfjs自定义分页
<template> <div id="div_read_area_scrool" class="no-scrollbar--x" :styl ...
- 分享几个写 demo 的思路
好久没有动笔,最近发现了一个新的写 demo 的思路,非常有意思.仔细一想,自己仿佛积累了不少写 demo 的思路和想法,总结一下,抛砖引玉. 本文所说 demo 主要分以下三种: 本地 demo 外 ...
- 在 npm 中使用 ES6 module
node 从 v8.5.0起 支持了 ES6 module. 只需保存文件名为 .mjs ,并通过一个option 可以开启执行,如 node --experimental-modules index ...
- 【ProtoBuffer】windows上安装ProtoBuffer3.1.0 (附已编译资源)
------- 17.9.17更新 --- 以下这些方法都是扯淡,对我的机器不适用,我后来花了最后成功安装并亲测可用的方法不是靠vs编过的,vs生成的库引入后函数全部报undefine refere ...
- python网络编程 双人多人聊天
在学习网路编程时,我们首先要考虑的是其中的逻辑,我们借助打电话的形式来了解网络编程的过程, 我们打电话时属于呼叫方,接电话的属于被呼叫方,那么被呼叫方一直保持在待机状态,等待主呼叫方 呼叫,只有在被呼 ...
- matplotlib&numpy画图
import numpy as np import matplotlib.pyplot as plt x=np.linspace(0,6,100) y=np.cos(2*np.pi*x)*np.exp ...
- #254 Reverse a String
翻转字符串 先把字符串转化成数组,再借助数组的reverse方法翻转数组顺序,最后把数组转化成字符串. 你的结果必须得是一个字符串 这是一些对你有帮助的资源: Global String Object ...
- 插入排序之Java实现
插入排序类似于大多数人安排扑克牌的方式. 1.从你手中的一张牌开始, 2.选择下一张卡并将其插入到正确的排序顺序中, 3.对所有的卡重复上一步. /** * * 代码理解:只需要记住两点: * 1.当 ...