基于2013年版本之前的总结:
一:什么是Ajax?
Ajax的技术产生:
-它被认为是Asynchronous JavaScript and XML的缩写,现在,允许浏览器与服务器通信
而无需刷新当前页面的技术都被叫做Ajax。
-它是一种不用刷新整个页面就可以与服务器进行通讯的办法:
1.flash
2.java applet
3.框架:如果使用一组框架构造了一个网页,可以只更新其中一个框架,而不必惊动整个
页面。
4.隐藏的iframe
5.XMLhttprequest:该对象是对javascript的一个扩展,可以使网页与服务器进行通讯。
是创建ajax应用的最佳选择,实际上通常把ajax当成XMLHttpRequest对象的代名词。
二:ajax的工作原理:
三:ajax工具包
这东西并不是一个新技术,它实际上是几种技术,每一种技术各自完成一个职能,以一种全新的方式聚合在一起。
-服务器端语言:服务器需要具备向浏览器发生特定信息的能力。 ajax与服务端用什么语言无关。
-xml :一种数据传输的格式。ajax程序需要用一种格式化的文本在服务器和客户端之间进行信息传递,xml是其中的一种
-dom :文档。 实现动态显示和交互、
-xmlhttp 组件XMLHttpRequest对象进行异步数据读取
-使用JavaScript绑定和处理所有数据
四:ajax的缺陷
ajax不是完美的技术,使用ajax 它的一些缺陷如下:
-由JavaScript和ajax引擎导致的浏览器兼容
-页面局部刷新,导致后退功能失效
-对流媒体的支持没有flash javaapplet好
-一些手持设备(如手机、pda等)支持性差
五:XMLHttpRequest介绍
`XMLHttpRequest这玩儿最早是在ie5里边以Activex组件的形式实现的,不是w3c标准。
`创建XMLHttpRequest对象(由于它不是标准的,所以实现方法不统一)
-IE把XMLHttpRequest实现为一个本地的JavaScript对象。
-XMLHttpRequest在不同的浏览器上的实现是兼容的。所以可以用同样的方式访问XMLHttpRequest实例上的属性和方法,
而不讨论这个实例创建的方法是啥
-------------------------------------说这老半天,这个对象咋创建呢?
创建XMLHttpRequest对象:
为了每次写ajax的时候都节约一点时间,可以把对象检测的内容打包成一个可复用的函数:
function getHTTPObject(){
var xhr=false;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else if(window.ActiveXObject){
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}
虽然都能看懂这代码,还是说明一下吧,
它对window.XMLHttpRequest的调用会返回一个对象或null,if语句会把调用返回的结果看做是true或者false(如果返回对象则为true,返回null则为false)。如果XMLHttpRequest对象存在,则把xhr的值设为该对象的新实例。如果不存在,就去检测ActiveXObject的实例是否存在,如果答案是肯定的,就把XMLHTTP的新实例赋给xhr。
XMLHttpRequest的方法:
方法() | 描述 |
abort() | 停止当前请求 |
getAllResponseHeaders() | 把HTTP请求的所有响应首部作为键/值对返回 |
getResponseHeader(“header”) | 返回制定首部的串值 |
open(“method”,“url”) | 建立对服务器的调用。Method参数可以使GET、POST或PUT。url参数可以是相对URL或者绝对URL |
send(content) | 向服务器发送请求 |
setRequestHeader(“header”,“value”) | post请求用这个。把指定首部设置为所提供的值,在设置任何首部之前必须调用open() |
实践一下:
点击a标签,弹出另一个文本的内容
<script>
window.οnlοad=function (){
1.获取a节点,并为其添加点击事件
document.getElementsByTagName("a")[0].οnclick=function(){
3.创建一个XMLHttpRequest对象
var request=new XMLHttpRequest()
4.准备发送请求的数据:url
var url =this.href;
var method="GET"
5.调用XMLHttpRequest对象的open方法
request.open(method,url )
6.调用XMLHttpRequest对象的send方法
request.send(null);
7.为XMLHttpRequest对象添加onreadystatechange响应函数
request.onreadystatechange=function(){
8.判断响应是否完成:XMLHttpRequest对象的onreadystatechange的属性值为4的时候
if(request.readyState==4){
9.再判断响应是否可用:XMLHttpRequest对象的status属性值为200
if(request.status==200||request.status==304){
10.打印响应结果:responseText
alert("request.responseText");
}
}
}
2.取消a节点的默认行为
return false;
}
}
</script>
<body>
<a href="1.text">点我</a>
</body>
六、ajax的数据格式
。在服务器端Ajax是一门与语言无关的技术,在业务逻辑层使用任何服务器语言都可以。
。从服务器端接收数据的时候,那些数据必须以浏览器能够理解的格式来发送,服务器端的编程语言只能以如下3中格式返回数据
-XML
-JSON
-HTML
解析HTML
。html由一些普通文本组成,如果服务器通过XMLHttpRequest发送HTML,文本将存储在responseText属性中
。不必从responseText属性中读取数据,它已经是希望的格式,可以直接将它插入到页面中。
。插入HTML代码最简单的方法是更新这个元素的innerHTML属性。
优点:
1.从服务器端发送的HTML代码在浏览器端不需要用JavaScript进行解析
2.HTML的可读性好
3.HTML代码与innerHTML属性搭配效率高
缺点:
1.如果需要通过ajax更新一篇文档的多个部分,HTML不合适
2.innerHTML并非DOM标准(问题不大,浏览器都支持)
解析XML
。XML格式 ,所以需要使用responseXML 来获取
。结果不能直接使用,必须先创建对应的节点,再把节点插入到对应的元素里边去(说白了就是把XML里边的数据,放到html的节点里边去)
优点:
1.XML是一种通用的数据格式(它就是为了数据传输而生的)
2.不必把数据强加到已定义好的格式中,而是要为数据自定义合适的标记
3.利用DOM可以完全掌控文档
缺点:
1.如果文档来源于服务器,就必须得保证文档含有明确的首部信息。如果文档类型不明确,那responseXML的值就是空的了
2.当浏览器接收到长的XML文件后,DOM解析可能会很复杂
json简介:(JSON(JavaScript Object Notation) 一种简单的数据格式,比xml更轻巧。JSON是JavaScript原生格式,意味着在JavaScript中处理JSON数据不需要任何特殊的api或工具包)
解析JSON
。JSON只是一种文本字符串,他被存储在responseText属性中
。为了读取存储在responseText属性中的JSON数据,需要根据JavaScript的eval语句,函数eval会把一个字符串当做它的参数,然后这个字符串会被当做JavaScript代码来执行,因为JSON的字符串就是由JavaScript代码构成的,所以它本身是可执行的
。
。JSON提供了json.js包,下载http://www.json.org/json.js后,使用parseJSON()方法将字符串解析成JS对象
优点:
。作为一种数据传输格式,JSON与XML很相似,但是它更加灵巧
。JSON不需要从服务器发送含有特定内容类型的首部信息
缺点:
。语法过于严禁
。代码不易读
。eval函数存在风险
jquery中的ajax
。jquery对ajax操作进行了封装,在jquery中最底层的方法是$.ajax(),第二层是load(),$.get()和$.post(),第三层是$.getScript()和$.getJSON()
load方法:
load()方法是jquery中最简单和常用的ajax方法,能载入远程的HTML代码并插入到DOM中
它的结构是load(url,[data],[callback])
总结:
1.什么是ajax ?不用刷新页面,但可以和服务器进行通讯的方式,使用ajax的主要方式是XMLHttpRequest对象
2。使用XMLHttpRequest对象实现ajax
3.ajax输出数据的三种方式:
a.XML:笨重,解析困难,但XML是通用的数据格式
b.HTML:不需要解析可以直接放到文档中,若仅更新一部分区域
c.小巧,有面向对象的特征,且有很多第三方的jar包可以把java对象或集合转换为json字符串
4.使用jquery完成ajax操作
a.load方法:可以用于HTML文档的元素节点,把结果直接加为对应节点的子元素,¥
b.$get,$post,$getJSON:更加灵活,出去使用load方法的情况,大部分都使用这三个方法