Ajax工作原理及实例
欢迎访问我的博客,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~
Ajax基本概念
Ajax(Asynchronous JavaScript And XML),异步 JavaScript 和 XML,用于异步请求数据,在不刷新网页的情况下更新页面数据,提升用户体验
基本工作原理
注意:涉及到 AJAX 操作的页面“不能”使用文件协议访问(文件的方式访问)
- 安装用户代理(实例化
XMLHttpRequest()
) - 打开浏览器,输入网址
- 敲回车键,开始请求
1 | // 1. 安装浏览器(用户代理) |
对于上述代码,我们在控制台给 XMLHttpRequest
打印出来看看
XMLHttpRequest中有很多属性和方法,内容太多,不上图了,解释里面一部分
readyState
readyState有5个值,代表了Ajax请求状态
0:初始化,请求对象代理
1:open()方法已经调用,建立一个与服务端特定端口的连接
2:已经接收到了响应报文的响应头
getAllResponseHeaders()
,但是还没有拿到响应体reponseText
3:正在下载响应报文的响应体,有可能为空,也有可能不完整
4:整个响应报文已经下载下来了,请求完成
下面上代码:
这里自己创建一个文件,作为请求用的,我这里创建的是time.php
1 |
|
去控制台打印看看
onreadystatechange
这个事件并不是只在响应时触发,状态改变就触发
上代码
1 |
|
去控制台打印出来看看
因为客户端永远不知道服务端何时才能返回我们需要的响应,所以 AJAX API 采用事件的机制(通知的感觉)
上代码
1 |
|
此时已经能够接收完整的报文
onload
onload
是HTML5
中提供的XMLHttpRequest v2.0
定义的,当页面完全加载完成后执行
上代码
1 |
|
setRequestHeader
设置一个请求头
1 | var xhr = new XMLHttpRequest() |
Ajax优缺点
优点:
- Ajax最大的优点就是能在不刷新整个页面的情况下维持与服务器通信
- 使用异步的方式与服务器通信,不打断用户的操作
- 可将一些后端的工作移到前端,减少服务器与带宽的负担
- Ajax使得界面与应用分离,也就是数据与呈现分离
缺点:
- Ajax干掉了Back与History功能,即对浏览器机制的破坏,在动态更新页面的情况下,用户无法回到前一页的页面状态,因为浏览器仅能记忆历史纪录中的静态页面
- AJAX技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁,Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑
- 对搜索引擎支持较弱
JQuery中的Ajax
$.ajax()方法
1 | $(function(){ |
url
String类型,请求的地址
type
String类型,请求方式,一般为get
或者post
请求,但是http
的其他请求当然也可以
timeout
Number类型,超时时间,单位为毫秒
async
Boolean类型,是否异步,默认设置为true
,所有请求均为异步请求。如果需要发送同步请求,设置为false
cache
Boolean类型,是否从浏览器缓存中加载请求信息,默认为true
,表示会从浏览器缓存中加载请求信息
data
Object或者String类型,发送到服务器的数据。如果已经不是字符串,将自动转换为字符串格式
dataType
String类型,希望服务器返回的数据类型,如果不是,就转化为指定的数据类型,如果不指定,JQuery将自动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递。可用的类型如下:
- xml:返回XML文档,可用JQuery处理
- html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行
- script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下),所有post请求都将转为get请求
- json:返回JSON数据
- jsonp:JSONP格式
- text:返回纯文本字符串
beforeSend
Function类型,表示发送数据之前,进行的操作,例如想在发送数据之前设置请求头
1 | beforeSend: function(request) { |
contentType
String类型,发送信息至服务器时,内容编码类型默认为”application/x-www-form-urlencoded”
dataFilter
Function类型,过滤数据(预处理数据),例如时间格式的预处理等,2个参数,参数一:Ajax返回的原始数据,参数二:dataType
参数
1 | dataFilter: function (data, type) { |
global
Boolean类型,默认为true
,表示触发全局ajax
事件,改为false
则不会触发ajax
全局事件
success
Function类型,请求数据成功回调,2个参数,参数一:必需,服务器返回后经过dataType
参数处理后的数据,参数二:可选,描述状态的字符串
1 | success: function (data, dataStatus) {} |
error
Function类型,请求数据成功回调,3个参数,参数一:必需,XMLHttpRequest对象,参数二:必需,错误信息,参数三:可选,捕获的错误对象
1 | error: function (XMLHttpRequest, status, error) {} |
complete
Function类型,只要请求数据完成就回调,不管成功不成功,2个参数,参数一:必需,XMLHttpRequest对象,参数二:可选,描述请求类型的字符串
1 | complete: function (XMLHttpRequest, status) {} |
jsonp
String类型,在一个jsonp请求中重写回调函数的名字。该值用来替代在”callback=?”这种GET或POST请求中URL参数里的”callback”部分
username
String类型,用于响应HTTP访问认证请求的用户名
password
String类型,响应HTTP访问认证请求的密码