什么是Ajax,Ajax的原理是什么?
目录
(1)创建 Ajax的核心对象 XMLHttpRequest对象
(2)通过 XMLHttpRequest 对象的 open() 方法与服务端建立连接
(3) 构建请求所需的数据内容,并通过XMLHttpRequest 对象的 send() 方法发送给服务器端
(4) 绑定onreadystatechange事件,XMLHttpRequest 对象提供的 onreadystatechange 事件监听服务器端你的通信状态
(2) 如果是使用jQuery插件,首先需要引入插件,然后调用Ajax方法
一、什么是Ajax?
AJAX全称(Async Javascript and XML),即异步的JavaScript 和XML,是一种创建交互式网页应用的网页开发技术。
特点:异步发送请求;无需重新刷新当前页面,采用部分刷新。
二、Ajax的原理是什么?
相当于在用户和服务器之间加了一个中间层,使用户操作和服务器响应异步化,并不是所有的用户请求都提交给服务器,像一些数据处理可以交给Ajax引擎来做,只有确定需要从服务器读取新数据时再由Ajax引擎代为服务器提交请求。
三、Ajax是怎样实现的?
(1)创建 Ajax的核心对象 XMLHttpRequest对象
通过XMLHttpRequest() 构造函数用于初始化一个 XMLHttpRequest 实例对象
const xhr = new XMLHttpRequest();
(2)通过 XMLHttpRequest 对象的 open() 方法与服务端建立连接
xhr.open(method, url, [async][, user][, password])
//method:表示当前的请求方式,常见的有GET、POST
//url:服务端地址
//async:布尔值,表示是否异步执行操作,默认为true
//user: 可选的用户名用于认证用途;默认为null
//password: 可选的密码用于认证用途,默认为null
(3) 构建请求所需的数据内容,并通过XMLHttpRequest 对象的 send() 方法发送给服务器端
xhr.send([body])
//body: 在 xhr 请求中要发送的数据体,如果不传递数据则为 null 如果使用GET请求发送数据的时候,需要注意如下:
//将请求数据添加到open()方法中的url地址中
//发送请求数据中的send()方法中参数设置为null
(4) 绑定onreadystatechange事件,XMLHttpRequest 对象提供的 onreadystatechange 事件监听服务器端你的通信状态
request.onreadystatechange = function(e){
if(request.readyState === 4){ // 整个请求过程完毕
if(request.status >= 200 && request.status <= 300){
console.log(request.responseText) // 服务端返回的结果
}else if(request.status >=400){
console.log("错误信息:" + request.status)
}
}
}
//readyState 属性一共有5个值,分别表示不同的请求响应阶段:
//0: 还未创建请求,即未调用 open() 方法
//1: 已调用 open() 方法,但未发送 send() 方法
//2: 已调用 send() 方法,但未接收到响应
//3: 已接收到部分响应
//4: 已接收到全部的响应
四、原生整体流程
const request = new XMLHttpRequest()
request.onreadystatechange = function(e){
if(request.readyState === 4){ // 整个请求过程完毕
if(request.status >= 200 && request.status <= 300){
console.log(request.responseText) // 服务端返回的结果
}else if(request.status >=400){
console.log("错误信息:" + request.status)
}
}
}
request.open('POST','http://xxxx请求域名')
request.send()
五、jquery插件封装的ajax请求
(1)如果是自己进行封装
function ajax(options) {
//创建XMLHttpRequest对象
const xhr = new XMLHttpRequest()
//初始化参数的内容
options = options || {}
options.type = (options.type || 'GET').toUpperCase()
options.dataType = options.dataType || 'json'
const params = options.data
//发送请求
if (options.type === 'GET') {
xhr.open('GET', options.url + '?' + params, true)
xhr.send(null)
} else if (options.type === 'POST') {
xhr.open('POST', options.url, true)
xhr.send(params)
//接收请求
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
let status = xhr.status
if (status >= 200 && status < 300) {
options.success && options.success(xhr.responseText, xhr.responseXML)
} else {
options.fail && options.fail(status)
}
}
}
}
(2) 如果是使用jQuery插件,首先需要引入插件,然后调用Ajax方法
形式:$.ajax({name:val, name:val,...});
可选字段:
1)url:链接地址,字符串表示
2)data:需发送到服务器的数据,GET与POST都可以,格式为{A: '...', B: '...'}
3)type:"POST" 或 "GET",请求类型
4)timeout:请求超时时间,单位为毫秒,数值表示
5)cache:是否缓存请求结果,bool表示
6)contentType:内容类型,默认为"application/x-www-form-urlencoded"
7)dataType:服务器响应的数据类型,字符串表示;当填写为json时,回调函数中无需再对数据反序列化为json
8)success:请求成功后,服务器回调的函数
9)error:请求失败后,服务器回调的函数
10)complete:请求完成后调用的函数,无论请求是成功还是失败,都会调用该函数;如果设置了success与error函数,则该函数在它们之后被调用
11)async:是否异步处理,bool表示,默认为true;设置该值为false后,JS不会向下执行,而是原地等待服务器返回数据,并完成相应的回调函数后,再向下执行
$.ajax({
url: "/greet",
data: {name: 'jenny'},
type: "POST",
dataType: "json",
success: function(data) {
// data = jQuery.parseJSON(data); //dataType指明了返回数据为json类型,故不需要再反序列化
...
}
});
最后还有什么疑问之处请指出!