一、ajax是什么?
1、ajax 的全称是Asynchronous JavaScript and XML,其中,Asynchronous 是异步的意思。
2、是7种技术的综合,它包含了:JavaScript、xml、xstl、xhtml、dom、 xmlhttprequest、css
3、ajax是一个与服务器端语言无关技术
4、ajax返回的数据格式(文本格式、xml、json)
5、作用:
1、页面五刷新的动态数据交互
2、局部刷新页面
3、界面的美观
4、对数据库的操作
5、可以返回简单的文本格式,也可以返回xml文件格式、json数据格式
6、原理
数据库
↑ ↓
↑ ↓
服务器
↑ ↓
http请求 ↑ ↓ http响应(文本/json/xml)
↑ ↓
创建ajax引擎对象
(浏览器) 相当于是一个代理 (帮我买东西,这个就类似ajax 我自己干自己事情)
(XmlHttpRequest)
↑ ↓
↑ ↓
页面
二、传统三种方式浏览器向服务器发送请求
1、url 回车 刷新
2、特定元素href或者src
3、表单
三、发送Ajax
// 1. 创建一个 XMLHttpRequest 类型的对象 —— 相当于打开了一个浏览器
var xhr = new XMLHttpRequest()
// 2. 打开与一个网址之间的连接 —— 相当于在地址栏输入访问地址
xhr.open('GET', './time.php')
// 3. 通过连接发送一次请求 —— 相当于回车或者点击访问发送请求
xhr.send(null)
// 4. 指定 xhr 状态变化事件处理函数 —— 相当于处理网页呈现后的操作
xhr.onreadystatechange = function () {
// 通过 xhr 的 readyState 判断此次请求的响应是否接收完成
if (this.readyState === 4) {
// 通过 xhr 的 responseText 获取到响应的响应体
console.log(this)
}
}
四、状态码
0:初始化请求代理对象
1:open方法已经调用,建立一个与服务端特定端口的连接
2:已经接受到响应报文的响应头,但拿不到题体
3:正在下载响应报文的响应体,有可能响应体为空,也有可能不完整 // 在这里处理响应体不保险
4: 一切ok 整个响应报文都下载下来
五、请求方法
get方法:通常在一次 GET 请求过程中,参数传递都是通过 URL 地址中的 ? 参数传递。
HTML
<ul id="list"></ul>
JS
var listElement = document.getElementById('list');
var xhr = new XMLHttpRequest();
// 这里任然是使用URL中问号参数传递数据
xhr.open('GET', 'users.php');
xhr.send(null);
xhr.onreadystatechange = function () {
if (this.readystate != 4) return
console.log(this.responseText)
var data = JSON.parse(this.responseText)
for (var i = 0; i < data.length; i ++) {
var liElement = document.createElement('li');
liElement.innerHTML = data[i].name;
// 设置每个元素的id
liElement.id = data[i].id
listElement.appendChild(liElement)
listElement.children[i].addEventListener('click', function () {
// TODO: 通过ajax操作获取对应的信息
// 如何获取当前被点击元素的ID
var xhr1 = new XMLHttpResquest();
xhr1.open('GET', 'users.php?id'+this.id);
xhr1.send(null);
xhr1.onreadystatechange = function () {
if (this,readystate != 4) return;
var obj1 = JSON.parse(this.responseText)
alert(obj1.age)
}
})
}
}
// 给每一个li注册一个点击事件
// 应为li后来动态创建,不能在这里动态生成 应该移上面
// for (var i = 0; i < listElement.children.length; i ++) {
// listElement.children[i].addEventListener('click', function () {
// console.log(11)
// })
//}
Post方法:请求过程中,都是采用请求体承载需要提交的数据。
JS
var btn = document.getElementById('btn');
var txtUsername = document.getElementById('username');
var txtPassword = document,getElementById('password')
btn.onclick = function () {
var username = txtUsername.value;
var password = txtPassword .value;
var xhr = new, XMLHttpRequest();
xhr.open('POST', 'login.php');
// !!!! 一定要注意 如果请求是post请求 urlencoded 格式 必须设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 字符串拼接
// xhr.send('username=' + username + '&password=' + password)
// 模板字符串
xhr.send(`username=${username}&password=${password}`);
xhr.onreadystatechange = function () {
if ( this.readystate != 4) return;
console.log(this.responseText)
}
}