什么是ajax
Ajax被认为是(Asynchronous JavaScript and XML)的缩写。现在,允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax.
ajax的工作原理图
客户端 | 传输 | 服务器端 |
xhtml | 协议:xmlhttp | php等语言 |
css | 载体:文本、xml、json等 | 输出结构 |
JavaScript |
的
传输依赖对象:
XMLHttpRequest : 该对象是对JavaScript的一个扩展,可使用网页与服务器进行通信。是创建Ajax应用的最佳选择。实际上通常把ajax当成XMLHttpRequest对象的代名词。
ajax工具包
ajax并不是一项全新的技术,它实际上是几种技术,每种技术各尽其职,以一种全选的方式聚合在一起。
----服务器端语言:服务器需要具备向浏览器发送特定信息的能力。ajax与服务器端语言无关
----xml(extensible Markup Language 可扩展标记语言)是一种描述数据的格式。ajax程序需要某种格式化的格式来在服务器和客户端之间传递信息。xml是其中一种选择,但现在很少用,90%用json。
----xHtml和css标准化呈现
----Dom(Document Object Model 文档对象模型)实现动态显示和交互
----使用XMLHttp组件XMLHttpRequest对象进行异步数据读取
----使用JavaScript绑定和处理所有数据
ajax的优缺点
优点:
1.不需要插件支持(一般浏览器且默认开启JavaScript即可);
2.用户体验极佳(不刷新页面即可获取可更新的数据);
3.提升web程序的性能(在传递数据方面做到按需放松,不必整体提交);
4.减轻服务器和带宽的负担(将服务器的一些操作转移到客户端);
缺点:
1.由JavaScript和ajax引擎导致的浏览器的兼容(jQuery等框架可以解决)
2.页面局部刷新,导致后退等功能失效
3.对流媒体的支持没有flash、java Applet好
4.一些手持设备支持性差
ajax使用XMLHttpRequest实现
1.XMLHttpRequest的概述
XMLHttpRequest最早在IE5中以ActiveX组件的形式实现的,非w3c标准。
2.创建XMLHttpRequest对象(由于非标准所有实现方法不统一)
-IE把XMLHttpRequest实现为一个Active对象
-其他浏览器把它实现为一个本地的JavaScript对象
-XMLHttpRequest在不同浏览器上的实现是兼容的,所以可以用同样的方法访问XMLHttpRequest实例的属性的方法,而不论这个实例创建的方法是什么。
XMLHttpRequest的方法
方法 | 描述 |
abort() | 停止当前请求 |
getAllResponseHeaders() | 把HTTP请求的所有响应首部作为键/值返回 |
getResponseHeader("header") | 返回指定首部的串值 |
open("method","url",asynch) |
建立服务器的调用,Method参数可以是GET、POST或PUT,url参数可以是相对URL或绝对URL,向服务器发送请求.asynch:表示请求是否要异步传输,默认为true。指定true,在读取后面的脚本之前,不需要等待服务器的响应。指定false,当脚本处理过程经过这点时,会停下来,一直等到ajax请求执行完毕再继续执行。 |
send(content) | 向服务器发送请求 |
setRequestHeader("header","value") | 把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。 |
XMLHttpRequest的属性(服务器返回之后处理)
属性 | 描述 |
onreadystatechange | 每个状态改变是都会触发这个事件处理器,通常会调用一个JS函数 |
readyState | 请求的状态,有5个可取值;0=未初始化,1=正在加载,2=已经加载,3=交互中,4=完成。 |
responseText | 服务器的响应,表示为一个串,作为响应主体被返回的文本 |
responseXML | 服务器的响应,表示为XML,这个对象可以解析为Dom对象 |
status | 服务器的HTTP状态码 |
statusText | HTTP状态码的相应文本(ok 或 Not Found) |
HTTP状态码 | 状态字符串 | 说明 |
200 | OK | 服务器成功返回了页面 |
400 | Bad Request | 语法错误导致服务器不识别 |
401 | Unauthorized | 请求需要用户认证 |
404 | Not found | 指定的URL在服务器上找不到 |
500 | Internal Server Error | 服务器遇到意外错误,无法完成请求 |
503 | Service navailable | 由于服务器过载或维护导致无法完成请求 |
javascript请求示例:
window.onload=function(){
//1.获取a节点,并为其添加onclick响应函数
document.getElementsByTagName("a").onclick=function(){
//3.创建一个XMLHttpRequest对象
var request = new XMLHttpRequest();
//4.准备发送请求的数据:url
var url = this.href + "?time=" + new Date();
var method = "GET";
//5.调用XMLHttpRequest对象的open 方法
request.open(method,url);
//6.调用XMLHttpRequest对象的send 方法
request.send(null);
//7.为XMLHttpRequest 对象添加onreadystatechange 响应函数
request.onreadystatechange=function(){
//8.判断响应是否完成:XMLHttpRequest 对象的 readyState 属性值为4的时候
if(request.readyState == 4){
//9.再判断响应是否可用:XMLHttpReq uest 对象的 status 属性值为200
if(request.status == 200 || request.status == 304){
//10.打印响应结果:responseText
alert(request.responseText);
}
}
}
//11.取消a节点的默认行为
return false;
}
};
<a href="helloAjax.txt">HelloAjax</a>
//跨浏览器获取XmlHttpRequest对象
function AjaxXmlHttpRequest()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("您的浏览器不支持AJAX!");
return false;
}
}
}
return xmlHttp;
}
异步和同步
使用ajax最关键的地方,就是实现异步请求、接受响应及执行回调。
异步与同步的区别:
普通的web程序开发基本都是同步的,意为执行一段程序才能执行下一段,类似电话中的通话,一个电话接完才能接听下个电话;
而异步可以同时执行多条任务,感觉有多条线路,类似于短信,不会因为看一条短信而停止接受另一条短信。
ajax也可以使用同步模式执行,但同步的模式属于阻塞模式,这样会导致多条线路执行时又必须一条一条的执行,会让web页面出现假死状态,所以,一般ajax大部分采用异步模式。
jQuery中的ajax
http://www.cnblogs.com/zhangziqiu/archive/2009/05/08/jQuery-Learn-6.html
$.post()与$.get()方法的区别
1.GET 请求是通过URL提交的,而POST请求则是HTTP消息实体提交的;
2.GET 提交有大小限制(2KB),而POST方式不受限制
3.GET方法会被缓存下来,可能有安全性问题,而POST没有这个问题
4.GET方式通过$_GET[]获取,POST方式通过$_POST[]获取
$.ajax()方法对象参数表
参数 | 类型 | 说明 |
url | String | 发送请求的地址 |
type | String | 请求方式:POST或GET,默认GET |
timeout | Number | 设置请求超时的时间(毫秒) |
data | Object或String | 发送到服务器的数据,键值对字符串或对象 |
dataType | String | 返回的数据类型,比如html、xml、json等 |
beforeSend | Function | 发送请求前可修改XMLHttpRequest对象的函数 |
complete | Function | 请求完成后调用的回调函数 |
success | Function | 请求成功后调用的回调函数 |
error | Function | 请求失败时调用的回调函数 |
global | Boolean | 默认为true,表示是否触发全局ajax |
cache | Boolean | 设置浏览器缓存响应,默认为true。如果datatype类型为script或jsonp则为false |
content | DOM | 指定某个元素为这个请求相关的所有回调用函数的上下文 |
contentType | String | 指定请求的内容的类型,默认为application/x-www-form-urlencoded |
async | Boolean | 是否异步处理。默认为true,false为同步处理 |
processData | Boolean | 默认为true,数据被处理为URL编码格式。如果为false,则阻止将传入的数据处理为URL编码的格式 |
dataFilter | Function | 用来筛选响应数据的回调函数 |
ifModified | Boolean | 默认为false,不进行头检测。如果为 true,进行头检测,当相应内容与上次请求改变时,请求被认为是成功的。 |
jsonp | String | 指定一个查询参数名称来覆盖默认的jsonp回调参数名callback |
username | String | 在HTTP认证请求中使用的用户名 |
password | String | 在HTTP认证请求中使用的密码 |
scriptCharset | String | 当远程和本地内容使用不同的字符集时,用来设置script和jsonp请求所使用的字符集 |
xhr | Function | 用来提供XHR实例自定义实现的回调函数 |
traditional | Boolean | 默认为false,不使用传统风格的参数序列化。如为true,则使用 |