ajax
1.研究什么是ajax
Asynchronous JavaScript And XML
异步 javaScript 和 xml (Extensiable Markup Languge)
2.ajax的特点
**特点**
异步请求 局部刷新
AJAX 是一种与服务器交换数据时,在不重新加载整个页面的情况下实现网页的部分更新的技术
**优点**
(1)最大的优点就是页面无刷新,用户的体验非常好;
(2) 使用异步方式与服务器通信,具有更加迅速的相应能力;
(3)可以把以前的一些服务器负担的工作转嫁到客户端,利用客户端限制的能力来处理,减轻服务器和带宽的负担,节约空间和带宽租用成本,并且减轻服务器的负担,Ajax的原则是“按需取数据”,可以最大程度地减少冗余请求和相应对服务器造成的负担;
(4)基于标准化的并被广泛支持的技术,不需要下载插件和小程序;
**缺点**
1.Ajax干掉了Back与History功能,即对浏览器机制的破坏在动态更新页面的情况下,用户无法回到前一页的页面状态,因为浏览器仅能记忆历史纪录中的静态页面
2.安全问题 AJAX技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁,Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。
3.对搜索引擎支持较弱
4.破坏程序的异常处理机制
5.违背URL与资源定位的初衷
6.不能很好地支持移动设备
7.客户端肥大,太多客户段代码造成开发上的成本
3.技术构成
ajax 的技术构成
以JS 为基础编程语言
以XML和JSON 作为数据传输格式
以HTML 为显示骨架
以CSS 为渲染手段
以 XMLHttpRequest 对象作为 请求的发送 数据的响应接收的对象
3.1.XMLHttpRequest
XMLHttpRequest对象一共有三个属性:onreadystatechange(全小写)、readyState、status
1.onreadystatechange
xmlhttp.onreadystatechange = function(){
};
每次readyState对象的改变都会触发一次onreadystatechange属性储存的函数,一次有效的Ajax请求一共会触发5次该事件
2.readyState
一共有5个值,0~4分别代表不同的状态。
0 —— 请求未初始化
1 —— 服务器已建立了链接
2 —— 请求已被服务器接收
3 —— 请求正在被处理
4 —— 请求完成处理,响应就绪
if(xmlhttp.readyState==4…):用以判断当前服务器是否已准备好响应
3.Status
代表着Http状态码 200:OK
if(xmlhttp.readyState==4&& xmlhttp.status==200)
3.2. XMLHttpRequest的api
XMLHttpRequest的api
open(method,url,async) 请求准备函数
method 就是请求方式 string 类型 取值有 get post put delete
url 请求的路径 string
async 是否异步 布尔类型 true 代表异步 false 代表同步
onreadystatechange 指定数据处理函数 (回调函数)
function ( ){
// 获取服务端返回的数据 readyState 交互的状态码 status http 响应状态码
if(xhr.readyState==4 && xhr.status == 200){
var text = xhr.responseText;
}
}
send() 发送请求
3.3. 获取请求对象
获取异步请求对象 (判断浏览器类型)
<script type="text/javascript">
function getXHR(){
var xmlhttp;
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
</script>
1.缓存问题
浏览器对同一个get 请求 处理方式 会根据浏览器的类型和版本 表现出不同的处理
一般 火狐和谷歌 浏览器会重新发送这个get 请求。 而IE 浏览器会直接使用上一次
get 请求的结果。 但有时需要对同一个get 请求做出不同的响应 哪这样使用上一次
结果的情况就会出现问题。
2.如何解决
把get 换成 post
在url 后面 拼接 动态参数
3.乱码问题
tomcat8 下 get 请求没有乱码 但是IE浏览器不支持url后面传输中文
可以使用encodeURI(url) 进行转码
post 请求 需要使用 request.setCharacterEncoding("utf-8")
4.研究如何使用jquery 来完成ajax请求的发送
异步请求对象的创建 请求的发送 响应数据的接收 做了封装
同时也考虑了 浏览器的兼容问题(缓存 乱码)
$.ajax({
url:请求的路径 ,
type:请求的方式,
success: 相当于 注册处理函数 并且 readySate 是4 http 状态是200
在注册函数中 直接使用参数 就可以获取到服务端返回的值 ,
async:是否同步请求还是异步请求 默认是true 代表异步,
data:{类json的传递格式},
cache:布尔类型 是否缓存 默认true 改成false 就不缓存,
error:匿名函数 程序出错走方法
});
$.get(url,data,function,datatype)
url:请求地址
data:请求参数
dataType:服务器返回的数据类型
function:服务器正常处理时执行的回调函数
$.post(url,data,function,datatype)
url:请求地址
data:请求参数
dataType:服务器返回的数据类型
function:服务器正常处理时执行的回调函数
$.getJSON(url,data,function)
$obj.load(url,data,function)
Jquery对象的获取方法:
- 可以通过以往的方法来获取,即class(.),id(#)等等
- 可以再对应的事件中传入参数this,并且在script中的方法参数起名(假如acc),之后则可在下方直接${acc},即通过传参的方式来获取对象