前言
关于ajax对于大多数前段框架,都本身在jquery的ajax基础上进行了封装,底层原理实现大体一致,了解ajax实现方式,并可以使用原生ajax方式编程,在后续基础上在慢慢了解原生ajax实现的底层代码便可.javascript
1 ajax简介
ajax技术至关于异步js和xml。ajax是一种用于建立快速动态网页的技术。经过在后台与服务器进行少许数据交换,ajax 可使网页实现异步更新。这意味着能够在不从新加载整个网页的状况下,对网页的某部分进行更新。传统的网页(不使用 ajax)若是须要更新内容,必需重载整个网页面。html
web发展过程当中,为了改善传统web应用中,请求–>等待–>响应这种模式的弊端和提升用户的体验度,相对于传统的模型:服务器响应数据以前,用户对页面不能进行其余操做,致使用户体验较差.从而致使ajax技术:服务器响应数据以前,用户对于页面仍是能够操做的,等优点来提升用户体验度和交互体验.java
ajax在javascript中使用ajax技术,调用浏览器提供的XMLHttpRequest对象进行请求访问.向服务器发送的请求是异步的,此时浏览器没有丢失任何数据,用户仍然能够对页面进行操做.jquery
2 ajax技术实现描述
(2.1)、建立XMLHttpRequest 对象web
*XMLHttpRequest对象 是 AJAX 的基础。
--> 使用Ajax 必须先获得XMLHttpRequest对象
*XMLHttpRequest xmlReq = new XMLHttpRequest();
(IE5 和 IE6 使用 ActiveXObject)
IE5&IE6 没有 XMLHttpRequest 对象
须要获取 ActiveXObject
(移动、联通、电信、广电 --> OA 管理系统 所有必须 运行在(ie) IE6 上)
*对于不一样浏览器 获取的方式不同(IE7 如下的版本)
(2.2)、向服务器发送请求ajax
*XMLHttpRequest对象
open(method ,url ,async); --> 对请求进行设定(请求地址,请求方式,同异步)
post|get 请求地址 同步|异步
async:参见JAVA同步锁
send(); --> 发送
*get
open(method ,url ,async); //须要携带数据,在url后面拼接
send();//不能 传参
*post
open(method ,url ,async);
//若是有参数 须要设定 请求头的 contextType
setRequestHeader("Content-type","application/x-www-form-urlencoded");
send();//若是有参数,能够写在send(参数) string类型的-->key=value&key1=value1……
(2.3)、等待服务器响应,处理响应结果编程
onreadystatechange = 方法 循环调用方法
readyState 的状态码 判断何时执行
0: 请求未初始化(没有调用open())
1: 服务器链接已创建(有没有调用 send())
**过渡状态
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
** responseText 默认值是一个空字符串
当请求状态没有变成4时 即使浏览器已经拿到了数据
也不会 将拿到的值 赋值给responseText,
当请求状态变为4时,才会去赋值
status 的页面状态码 判断响应是否是正常,常见的状态码有:200,404,500,403,201
3 ajax请求几种实现方式
(3.1) $.getJSON(url,data,callback); // 是以 HTTP get 方式提交请求json
url: ajax请求地址
data: ajax请求时须要携带的参数
callback: ajax请求完成时调用函数(function)
getJSON 接收的是服务返回的字符串,将返回的字符串,按照JSON格式字符串进行转换成JSON对象。
function(data){
// data 表示的时 请求后 服务器返回的JSON对象
}
(3.2) $.post(url,data,callback,type) 是以 HTTP post 方式提交请求浏览器
url: ajax请求地址
data: ajax请求时须要携带的参数
callback: ajax请求完成时调用函数
function(data){
// data 表示的时 请求后 服务器返回数据
}
type:指定返回数据的类型
方法自己根据type指定的类型进行预处理
被返回的数据的类型 (html,xml,json,jasonp,script,text)
若是不指定默认是响应头中Content-Type 指定的类型
根据返回的字符串格式进行自动转换
(3.3) $.get(url,data,callback,type)是以 HTTP get 方式提交请求服务器
url: ajax请求地址
data: ajax请求时须要携带的参数
callback: ajax请求完成时调用函数
function(data){
// data 表示的时 请求后 服务器返回数据
}
type: 指定返回数据的类型
方法自己根据 type 指定的类型 进行预处理
被返回的数据的类型 (html,xml,json,jasonp,script,text)
若是不指定默认是响应头中Content-Type 指定的类型
根据返回的字符串格式进行自动转换
(3.4) $(selector).load(url,data,callback)
把远程数据加载到被选的元素中,正常的ajax请求发送,服务器正常响应,load获取到数据,将数据直接写入到 调用 load方法的 元素中
url: ajax请求地址
data: ajax请求时须要携带的参数
callback: ajax请求完成时调用函数
function(data){
// data 表示的时 请求后 服务器返回数据
}
(3.5) $.ajax(options) jquery的普通AJAX方法
options --> json格式的字符串 (用户自定义)
key:value,key:value
async 同异步 true|false
data 请求须要传递的参数 JSON格式字符串|String
dataType 请求服务器,服务器返回的数据类型 text|json|xml|html|script|jsonp
error 请求错误时执行的方法 function(){}
success 请求成功后执行的方法 function(){}
type 请求类型 get|post|put|delete
url 请求地址