1. XML介绍
历史中,ajax传递数据是通过xml格式传递的,现在已经被 JSON 取代了。
- XML 可扩展标记语言。
- XML 被设计用来传输和存储数据。
- XML 和 HTML 类似,不同的是 HTML 中都是预定义标签,而 XML 中没有预定义标签, 全都是自定义标签,用来表示一些数据。
比如说我有一个学生数据:
name = "孙悟空" ; age = 18 ; gender = "男" ;
用 XML 表示:
<student>
<name>孙悟空</name>
<age>18</age>
<gender>男</gender>
</student>
2. AJAX 优缺点
- AJAX 的优点
- 可以无需刷新页面而与服务器端进行通信。
- 允许你根据用户事件来更新部分页面内容。
- AJAX 的缺点
- 没有浏览历史,不能回退
- 存在跨域问题(同源)
- SEO 不友好
3. http协议
http协议(超文本传输协议),协议详细规定了浏览器和万维网服务器之间互相通信的规则
请求报文
重点是格式与参数
行 POST /s?ie=utf-8 HTTP/1.1
头 Host: atguigu.com
Cookie: name=guigu
Content-type: application/x-www-form-urlencoded
User-Agent: chrome 83
空行
体 username=admin&password=admin
响应报文
行 HTTP/1.1 200 OK
头 Content-Type: text/html;charset=utf-8
Content-length: 2048
Content-encoding: gzip
空行
体 <html>
<head>
</head>
<body>
<h1>尚硅谷</h1>
</body>
</html>
4.原生ajax
ajax请求在ie浏览器中是有缓存的,所以在请求的时候,我们需要请求路径加上时间戳
http://127.0.0.1:8000/json-server?t=Date.now()
//1. 创建对象
const xhr = new XMLHttpRequest();
//2. 初始化 设置请求方法和 url
//设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');
//3. 发送
xhr.send();
// 如果是post请求,send可以加参数
xhr.send('a=100&b=200&c=300');
// 超时设置, 如果超过2s,就报错
xhr.timeout = 2000
// 超时回调
xhr.ontimeout = function() {
alert('请求超时了')
}
// 网络请求报错
xhr.onerror = function() {
}
xhr.abort() // 可以取消请求
// 如果想反悔json格式的数据
//设置响应体数据的类型
xhr.responseType = 'json';
//4. 事件绑定 处理服务端返回的结果
// on when 当....时候
// readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4
0 => 未初始化
1 => 调用open方法
2 => 调用了send方法
3 => 服务端返回了部分结果
4 => 服务端返回了所有结果
// change 改变
xhr.onreadystatechange = function(){
//判断 (服务端返回了所有的结果)
if(xhr.readyState === 4){
//判断响应状态码 200 404 403 401 500
// 状态码只要是2开头的都是成功,及>=200 并且 < 300
if(xhr.status >= 200 && xhr.status < 300){
//处理结果 行 头 空行 体
//响应
// console.log(xhr.status);//状态码
// console.log(xhr.statusText);//状态字符串
// console.log(xhr.getAllResponseHeaders());//所有响应头
// console.log(xhr.response);//响应体
//设置 result 的文本
result.innerHTML = xhr.response;
}else{
}
}
}