Asynchronous JavaScript And XML: ajax
- Ajax概念: 前端程序和后端程序交换方式;
- Ajax的特点: 可以实现动态不刷新(局部刷新);也就是所说的局部数据交互(没有页面跳转);
- Ajax的作用:ajax是一种用于创建快速动态网页的技术,通过在后台与服务器进行少量数据交换,ajax可以使网页实现异步更新;
Ajax基本语法:
- Ajax使用的是面向对象的编程方式: 通过内置构造函数 创建ajax实例化对象,通过ajax实例化对象的函数方式执行对应的程序;
1.创建ajax实例化对象;
2.设定请求方式 设定请求url地址;
3.如果是post方式需要设定请求头格式:
4.发送设定好的请求;
5.接收请求结果;
Ajax常用属性和方法:
onabort: 表示请求中断后要处理的事。和 xhr.abort() 一起使用。
ontimeout: 表示请求的超时，执行的方法。和timeout设定的事件一起使用。
response: 响应的主体内容。
responseText: 响应的具体内容是字符串，一般是 json 字符串
responseXML: 响应的具体内容是文档。
status: http 的状态码。
statusText: 状态码描述
withCredentials：表示是否允许跨域。
getAllResponseHeaders：获取所有响应头信息。
xhr.open()：打开URL请求。
xhr.send()：表示发送 ajax。
setRequestHeader(): 设置请求头。这个属性在必须在xhr.open()后面
Ajax请求- get请求方式:
get方式:
<button>发送请求</button>
<script>
const oBtn = document.querySelector('button');
oBtn.addEventListener('click' , ()=>{
const xhr = new XMLHttpRequest();
console.log( xhr );
xhr.open( 'get' , 'http://localhost:8888/test/first' );
xhr.send();
xhr.addEventListener('load' , ()=>{
console.log( xhr.response );
})
})
总结:
请求方式 请求地址 携带参数 参数名称 都是后端程序决定的;
1, 使用 内置构造函数创建ajax实例化对象
const xhr = new XMLHttpRequest();
普通浏览器
const xhr = new ActiveXObject('Microsoft.XMLHTTP');
低版本IE浏览器
2, 使用 open() 方法 设定 请求方式 请求url地址
xhr.open( '请求方式' , '请求的url地址' );
3, 如果 post方式 需要设定请求头格式
4, 使用 send() 方法 发送 设定好的 请求
xhr.send();
5, ajax是异步程序 当 ajax请求结束 触发执行函数程序
xhr.addEventListener( 'load' , ()=>{
请求结束 触发执行的函数程序
})
</script>
Ajax状态码:
Ajax实例化对象.readyState:
Ajax状态码 :
0 表示只是创建了ajax实例化对象
1 表示ajax实例化对象设定了 open 以及 请求头
2 表示ajax实例化对象执行了 send 发送了请求
3 表示ajax请求结束了 接收了 响应报文
4 表示ajax从 响应报文中解析了响应体数据,存储到 ajax实例化对象的 response 和 responseText 中
当 ajax状态码 是 4 时 表示 请求结束 并且 解析完成了 响应体数据
Ajax实例化对象.status:
http状态码:
100-199 提示信息 – 表示请求正在处理
200-299 成功 – 表示请求正常处理完毕
300-399 [重定向]要完成请求必须进行更进一步的处理
400-499 客户端错误 – 请求有语法错误或请求无法实现
500-599 服务器端错误 – 服务器处理请求出错。
Ajax-get方式携带参数:
- get方式携带参数: 携带参数的语法形式和超链接携带参数的语法形式完全相同;是浏览器地址栏携带参数的语法形式;
总结:
ajax实例化对象.open( 'get' , 'url地址?键名=键值&键名=键值...' );
参数键值对 和 url地址 之间 使用 ?问号 间隔
多个键值对 之间 使用 & 符号间隔
Ajax-get方式携带参数:
姓名:<input type="text"><br>
年龄:<input type="number"><br>
<button>发送请求</button>
<script>
// 获取button标签
const oBtn = document.querySelector('button');
// 获取input标签对象
const oIptName = document.querySelectorAll('input')[0];
const oIptAge = document.querySelectorAll('input')[1];
// 添加点击事件:
oBtn.addEventListener('click' , ()=>{
// 1,创建ajax实例化对象
const xhr = new XMLHttpRequest();
// 2,设定open()
// url地址后携带参数
xhr.open( 'get' , `http://localhost:8888/test/third?name=${oIptName.value}&age=${Number(oIptAge.value)}`);
//在 设定 open() 方法时 在 参数2 也就是 请求的url地址后携带参数
// 3,如果是post方式设定请求头格式
// 4,设定send()
xhr.send();
// 5,请求结束 执行的函数程序
xhr.addEventListener( 'load' , ()=>{
// 解析的响应体内容
console.log( xhr.response );
})
})
<script>
Ajax请求- post请求方式:
- post设定请求头的**目的:**是为了可以正常解析携带的参数
- post方式请求头的固定格式: xhr.setRequestHeader( 'Content-Type' , 'application/x-www-form-urlencoded' );
- post方式携带参数的方式: post方式在send( );函数方法中设定携带的参数;
- post方式携带参数的语法形式: 键值对形式,多个键值对之间使用& 符号间隔,特别注意post方式没有问号;
post方式:
<body>
姓名:<input type="text"><br>
年龄:<input type="number"><br>
<button>发送请求</button>
<script>
//获取button标签对象
const oBtn = document.querySelector("button");
//获取input标签对象
const oIptName = document.querySelectorAll("input")[0];
const oIptAge = document.querySelectorAll("input")[1];
//给button标签添加点击事件
oBtn.addEventListener("click",()=>{
//1.使用内置构造函数创建实例化对象
const xhr = new XMLHttpRequest();
//2.设定open()
xhr.open('post', 'http://localhost:8888/test/fourth');
//3.如果是post 则需要写请求头格式
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")//post方式 请求头的设定 是固定的语法形式
//4.send() 发送请求
// xhr.send(`name=${oIptName.value }&age=${Number(oIptAge.value)}`);
xhr.send(`name=${oIptName.value}&age=${Number( oIptAge.value )}`);
//5.接收请求()
xhr.addEventListener("load",()=>{
console.log(xhr.response);
})
})
</script>
</body>
Ajax封装函数:
外部文件:
function myAjax( resObj = { } ){
const valObj = {
type:'get',
data:'',
url:'',
};
if( typeof( resObj.data ) === 'object' ){
let str = '' ;
for( let key in resObj.data ){
str += `&${key}=${resObj.data[key]}` ;
}
resObj.data = str.substr(1);
}
for( let key in valObj ){
if( resObj[key] !== undefined ){
valObj[key] = resObj[key];
}
}
const xhr = new XMLHttpRequest() ;
if( valObj.type.toLowerCase() === 'get' ){
xhr.open( 'get' , valObj.data === '' ? valObj.url : `${valObj.url}?${valObj.data}` );
xhr.send();
}else if( valObj.type.toLowerCase() === 'post' ){
xhr.open( 'post' , valObj.url );
xhr.setRequestHeader( 'Content-Type' , 'application/x-www-form-urlencoded' );
xhr.send( valObj.data );
}
xhr.addEventListener( 'load' , ()=>{
console.log( xhr.response );
})
}
json字符串 :
- 概念: 所谓的json字符串是一种特殊的字符串,用于不同计算机语言交互数据使用;
- 原因是:不同的计算机程序 数据结果语法不同;
- 例如: JavaScript 语法与PHP 语法:
JavaScript 中 数组存储对象:
[
{ id:1 , name:'张三' , age:18 , sex:'男' },
{ id:2 , name:'李四' , age:19 , sex:'女'},
{ id:3 , name:'王五' , age:20 , sex:'保密'},
]
PHP 中 数组存储数组
[
[ 'id' => 1 , 'name' => '张三' , 'age' => 18 , 'sex' => '男' ],
[ 'id' => 2 , 'name' => '李四' , 'age' => 19 , 'sex' => '女' ],
[ 'id' => 3 , 'name' => '王五' , 'age' => 20 , 'sex' => '保密' ],
]
如果PHP程序直接将数组存储数据的数据结构返回给JavaScript程序时,此时JavaScript程序它自己不能直接并且正确的识别 PHP程序返回的数据;
此时,将PHP的数组存储的数据可以通过 Json字符串转化成字符串后,再返回给前段JavaScript程序;
这个时候前段JavaScript程序就可以识别 Json字符串,再将Json字符串还原成JavaScript可以使用的数据结构;
- JavaScript中 操作json字符串的方法 :
JSON.parse( json字符串 )
将 json字符串 转化为 对应的JavaScript数据结构
JSON.stringify( js数据结构 )
将 JavaScript数据结构 转化为 对应的 json字符串
