了解AJAX
AJAX
全名async javascript and xml
- 是前后台交互得到能力
- 也就是我们客户端给服务端发送消息的工具,以及接受响应的工具
- 是一个默认异步执行机制的功能
- 以前是:
- 在浏览器地址栏输入某些内容,显示一个页面
- 浏览器地址栏输入一个php的地址,php返回的内容就给了浏览器
- 现在是:
- js去请求一个php地址
- PHP输出的内容就不会直接显示在浏览器上
- 而是把PHP返回的内容给js这个语言
- 如果你还想让他显示在页面上,那么就需要js去渲染,如:
document.write()
AJAX的异步
使用AJAX的四个步骤
- 创建ajax对象,同步代码
- 配置请求信息,同步代码
- 发送请求,异步代码
- 根据open的第三个参数决定是"同步请求"还是"异步请求"
- 但他本身是异步代码
- 接受响应,异步代码
书写建议
- 异步请求:
- 书写代码的顺序是:1–>2–>3–>4
- 书写顺序也可以是:1–>2–>4–>3
- 同步请求:
- 结论:
- 不管你是发送同步还是异步请求
- 我们代码书写顺序都是:1–>2–>4–>3
- 建议:
AJAX的使用
- 在js 中有内置的构造函数来创建AJAX对象
- 创建AJAX对象以后,我们就使用AJAX对象的方法去发送请求和接受响应
1. 创建AJAX对象
const xhr = new XMLHttpRequest()
const xhr = new ActiveXObject('Mricosoft.XMLHTTP');
2. 配置链接信息
- AJAX对象中的 open 方法是来配置请求信息的
xhr.open('请求方式','请求地址','是否异步');
- 第一个参数:是本次请求的请求方式 get、post、put
- 第二个参数:是本次请求的 url地址
- 第三个参数:是本次请求是否异步,默认 true 表示异步,false 表示同步
const xhr = new XMLHttpRequest();
xhr.open('get','./date.php');
4. 接受响应
- 因为js和php交互了,php的输出内容都给了js,所以使用一个事件来接受
const xhr = new XMLHttpRequest();
xhr.open('get','./date.php');
xhr.onload = function(){
console.log('请求已经完成');
console.log(xhr);
console.log(xhr.response);
document.getElementById('box').innerHTML = xhr.response;
}
xhr.onreadystatechange = function(){
if(xhr.readyState==4&&/^2\d{2}$/.test(xhr.status)){
console.log('确定状态码是4');
console.log(xhr.status);
console.log(xhr.responseText);
}
}
3. 发送请求
- 使用ajax对象.send()方式
- 表示把我配置好的这个请求发送出去
const xhr = new XMLHttpRequest();
xhr.open('get','./deta.php');
xhr.onload = function(){
console.log('请求已经完成');
console.log(xhr);
console.log(xhr.response);
}
xhr.send();
接收响应
AJAX状态码
- AJAX状态码-
xhr.readyState
- 是用来表示一个AJAX请求的全部过程中的某一个状态
readyState === 0
:表示未初始化完成,也就是open
方法还没有执行
readyState === 1
l:表示配置信息已经完成,也就是执行完open
readyState === 2
:表示send
方法已经执行完成
readyState === 3
:表示正在解析响应内容
readyState === 4
:表示响应内容已经解析完毕,可以在客户端使用了
- 这个时候我们就会发现,当一个AJAX请求的全部过程中,只有当
readyState===4
的时候,我们才可以正常使用服务端给我们的数据
- 所以,配合http状态码为200-299
- 一个AJAX对象中有一个成员叫做
xhr.status
- 这个成员就是记录本次请求的http状态码的
- 两个条件都满足的时候,才是本次请求正常完成
readyStateChange
- 在AJAX对象中有一个事件,叫做
readyStateChange
事件
- 这个事件是专门用来监听AJAX对象的
readyState
值改变的行为
- 也就是所只要
readyState
的值发生变化了,那么就会出触发该事件
- 所以我们就在这个事件中来监听AJAX的
readyState
是不是到4了
const xhr = new XMLHttpRequest();
xhr.open('get','./data.php');
xhr.send();
xhr.onreadyStateChange = function(){
if(xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)){
console.log(xhr.responseText);
}
}
responseText
- AJAX对象中的
responseText
成员
- 就是用来记录服务端给我们响应体内容的
- 所有我们就用这个成员来获取响应体内容就可以
const xhr = new XMLHttpRequest();
xhr.open('get','./data.php');
xhr.send();
xhr.onreadyStateChange = function(){
if(xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)){
/我们在这里直接打印xhr.reaponseText 来查看服务端给我们返回的内容
console.log(xhr.responseText);
}
}
使用AJAX发送请求时携带参数
- 我们使用AJAX发送请求也是可以携带参数的
- 参数就是和后台交互的时候给他的一些信息
- 但是携带参数get和post两个方式还是有区别的
发送一个带有参数的get请求
const xhr = new XMLHttpRequest();
xhr.open('get','./date.php?a=100$b==200');
xhr.send();
- 这样服务端就能接受到两个参数
- 一个是a,值是100
- 一个是b,值是200
发送一个带有参数的post请求
- post请求的参数是携带在请求体中的,所以不需要再url后面拼接
application/x-www=form-urlencoded
表示的数据格式就是key=value&key=value
const xhr = new XMLHttpRequest();
xhr.open('get','./data.php');
xhr.setRequesHeader('content-type','application/x-www-form-urlencoded');
xhr.send('a=100&b=200');
封装AJAX
- ajax 使用起来太麻烦,因为每次都要写很多的代码
- 那么我们就封装一个 ajax 方法来让我们使用起来简单一些
确定一下使用的方式
- 因为有一些内容可以不传递,我们可以使用默认值,所以选择对象传递参数的方式
ajax({
url: '',
type: '',
async: '',
data: '',
dataType: '',
success: function () {
}
})
封装
function ajax(options) {
var defInfo = {
url: '',
type: 'GET',
async: false,
data: '',
dataType: 'string',
success () {
},
}
if (!options.url) {
throw new Error('url 必须传递')
}
for (let key in options) {
defInfo[key] = options[key]
}
if (!(typeof defInfo.data === 'string' && /^(\w+=\w+&?)*$/.test(defInfo.data) || Object.prototype.toString.call(defInfo.data) === '[object Object]')) {
throw new Error('请按照要求传递参数')
}
if (typeof defInfo.async !== 'boolean') {
throw new Error('async 参数只接受布尔数据类型')
}
if (!(defInfo.type.toUpperCase() === 'GET' || defInfo.type.toUpperCase() === 'POST')) {
throw new Error('目前本插件只接受 GET 和 POST 方式,请期待更新')
}
if (Object.prototype.toString.call(defInfo.success) !== '[object Function]') {
throw new Error('success 只接受函数数据类型')
}
var str = ''
if (Object.prototype.toString.call(defInfo.data) === '[object Object]') {
for (let attr in defInfo.data) {
str += `${
attr}=${
defInfo.data[attr]}&`
}
str = str.slice(0, -1)
defInfo.data = str
}
function createXHR() {
if (XMLHttpRequest) {
return new XMLHttpRequest()
} else {
return new ActiveXObject('Microsoft.XMLHTTP')
}
}
var xhr = createXHR()
xhr.open(defInfo.type, defInfo.url + (defInfo.type.toUpperCase() === 'GET' ? `?${
defInfo.data}&_=${
new Date().getTime()}` : ''), defInfo.async)
if (defInfo.type.toUpperCase() === 'POST') {
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
}
xhr.send((defInfo.type.toUpperCase() === 'POST' ? `${
defInfo.data}` : ''))
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && /2\d{2}/.test(xhr.status)) {
if (defInfo.dataType === 'json') {
defInfo.success(JSON.parse(xhr.responseText))
} else {
defInfo.success()
}
}
}
}