快速的实现交互式的动态页面
异步
XML被用来传输和存储数据的
Ajax优点:可以无需刷新页面与服务器端进行通信
允许你根据用户事件来更新部分页面内容
缺点:没有浏览历史,不能回退
存在跨域问题(同源)
seo(搜索引擎)不友好
HTTP协议【超文本传输协议】,按照规则来进行传输
请求报文
行 1、请求类型 (POST GET) 2、url 3、
头 名字:值
空行
体
响应报文
简单实现ajax请求
创建一个XMLHttpRequest实例
调用open方法,开始发送请求
调用send的方法
注册监听
渲染页面
<script>
// 动态页面 静态页面
// async hronous javascript and xml
// 创建一个XMLHttpRequest实例
varxhr=newXMLHttpRequest()
// console.log(xhr);
// 调用open方法,开始发送请求
// 参数1:请求方式:get(请求) post(携带数据 向下拉取)
// 参数2:请求地址 url
// 参数3:布尔值 ture---异步 false--同步
xhr.open('get','./数据.json',true)
// // 调用send的方法
xhr.send()
// 注册监听
// 0:初始化
// 1:调用open(),但是请求还没有结束
// 2:调用send(),请求完成
// 3:正在处理数据
// 4:完成数据的处理
// console.log(xhr);
注册监听
xhr.onreadystatechange=function(){
if (xhr.readyState===4) {
if (xhr.status===200) {
// 渲染页面
console.log(xhr.responseText);
}
}
}
转化数据格式
字符串的数据格式转化成json
JSON.parse()
将json转成字符串
JSON.stringify()
// 动态页面 静态页面
// async hronous javascript and xml
// 创建一个XMLHttpRequest实例
varxhr=newXMLHttpRequest()
// console.log(xhr);
// 调用open方法,开始发送请求
// 参数1:请求方式:get(请求) post(携带数据 向下拉取)
// 参数2:请求地址 url
// 参数3:布尔值 ture---异步 false--同步
xhr.open('get','./数据.json',true)
// // 调用send的方法
xhr.send()
// 注册监听
// 0:初始化
// 1:调用open(),但是请求还没有结束
// 2:调用send(),请求完成
// 3:正在处理数据
// 4:完成数据的处理
console.log(xhr);
xhr.onreadystatechange=function(){
if (xhr.readyState===4) {
if (xhr.status===200) {
// 渲染页面
vartext=JSON.parse(xhr.responseText)
document.body.innerHTML=text[0].name
}
}
}
get携带数据
varxhr=newXMLHttpRequest()
xhr.open('get','./数据.json?name=z&password=123',true)
xhr.send()
xhr.onreadystatechange=function(){
if (xhr.readyState===4) {
if (xhr.status===200) {
console.log(xhr.responseText);
}
}
}
post携带参数
varxhr=newXMLHttpRequest()
xhr.open('post','./数据.json',true)
xhr.send('name=123&password=123')
xhr.onreadystatechange=function(){
if (xhr.readyState===4) {
if (xhr.status===200) {
console.log(xhr.responseText);
}
}
}
get和post区别:
请求携带参数不同,
携带参数的大小不同,get大约2kb,post比get大很多
get和post安全性不同,get有缓存,post没有
get和post携带的参数后端获取方式也不同
封装
functionajax(method, url, data, callback) {
varxhr=newXMLHttpRequest()
if (method.toUpperCase() ==='GET') {
// xhr.send()
url=url+"?"+data
}
xhr.open(method, url, true)
if (method.toUpperCase() ==='POST') { xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
xhr.send(data)
} else {
xhr.send()
}
xhr.onload=function () {
if (xhr.readyState===4) {
if (xhr.status===200) {
callback&&callback(xhr.responseText);
}
}
}
}
ajax('post', './数据.json', 'name=zhangswan', functionfn(options) {
console.log(options);
})