AJAX笔记一之应用篇
AJAX实际应用篇
一句话理解什么是AJAX?
在页面不刷新的情况下, 与服务器交换数据,并且向服务器发送 HTTP 请求.
Ajax包括哪些内容：
- XHTML和CSS
- 使用文档对象模型(Document Object Model)作动态显示和交互
- 使用XML和XSLT做数据交互和操作
- 使用XMLHttpRequest进行异步数据接收
利用AJAX可以实现的应用场景：
- 注册时，输入用户名自动检测用户是否已经存在。
- 登陆时，提示用户名密码错误
- 删除数据行时，将行ID发送到后台，后台在数据库中删除，数据库删除成功后，在页面DOM中将数据行也删除。
原生AJAX的介绍及对应的方法和属性:
介绍:
Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。
XHR的主要方法有:
- void open(String method,String url,Boolen async)
用于创建请求
参数：
method： 请求方式（字符串类型），如：POST、GET、DELETE...
url： 要请求的地址（字符串类型）
async： 是否异步（布尔类型）
- void send(String body)
用于发送请求
参数：
body： 要发送的数据（字符串类型）
- void setRequestHeader(String header,String value)
用于设置请求头
参数：
header： 请求头的key（字符串类型）
vlaue： 请求头的value（字符串类型）
- String getAllResponseHeaders()
获取所有响应头
返回值：
响应头数据（字符串类型）
- String getResponseHeader(String header)
获取响应头中指定header的值
参数：
header： 响应头的key（字符串类型）
返回值：
响应头中指定的header对应的值
- void abort()
终止请求
XHR的主要属性有:
- Number readyState
状态值（整数），可以确定请求/响应过程的当前活动阶段
0：未初始化。未调用open()方法
1：启动。已经调用open()方法，未调用send()方法
2：发送。已经调用send()方法，未接收到响应
3：接收。已经接收到部分数据
4：完成。已经接收到全部数据，可以在客户端使用
- Function onreadystatechange
当readyState的值改变时自动触发执行其对应的函数（回调函数）
- String responseText
作为响应主体被返回的文本（字符串类型）
- XmlDocument responseXML
服务器返回的数据（Xml对象）
- Number states
状态码（整数），如：200、404...
- String statesText
状态文本（字符串），如：OK、NotFound...
常用的两种原生请求方式:
GET请求 [GET用于向服务器查询某些信息]:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>发送 GET 请求</title>
</head>
<body>
<button>点击发送 AJAX 请求</button>
<h2></h2>
<script>
//获取按钮
let btn = document.querySelector('button');
let h2 = document.querySelector('h2');
btn.onclick = function(){
//1. 创建 XMLHttpRequest 对象
let xhr = new XMLHttpRequest();
//2. 初始化 『设置请求行的内容』 http://192.168.36.25/server
xhr.open('get', 'http://127.0.0.1/server');
//3. 发送
xhr.send();
//4. 绑定事件, 获取响应结果
// on when 当....时候
// readyState 是xhr对象中的一个属性. 属性的值有 5 个. 0 1 2 3 4
// change 改变
xhr.onreadystatechange = function(){
//当所有的响应结果都已经返回时
if(xhr.readyState === 4){
//处理服务器返回的结果
//响应状态码
console.log(xhr.status);
//响应状态字符串『了解』
console.log(xhr.statusText);
//响应头 『了解』
console.log(xhr.getAllResponseHeaders());
//响应体
console.log(xhr.response);
//设置 h2 标签的文本 -->响应到页面的文本``
h2.innerHTML = xhr.response;
}
}
}
</script>
</body>
</html>
POST请求 [POST请求用于向服务器发送应该被保存的数据。POST请求的主体可以包含非常多的数据，而且格式不限。]:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>发送 POST 请求</title>
<style>
div{
width:200px;
height:200px;
border:solid 2px #999;
}
</style>
</head>
<body>
<div></div>
<script>
//获取元素
let div = document.querySelector('div');
//绑定事件
div.onmouseover= function(){
let xhr = new XMLHttpRequest();
//设置请求头
xhr.open('POST', 'http://127.0.0.1/server');
//设置请求头 set 设置 request 请求 header 头
xhr.setRequestHeader('class','H5210607');
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
//设置请求体
xhr.send('a=100&b=200');
xhr.onreadystatechange = function(){
//判断
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status < 300){
//将响应体的结果 在 div 中呈现
div.innerHTML = xhr.response;
}
}
}
}
</script>
</body>
</html>
```
Jquery中的AJAX:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jquery 发送 AJAX</title>
<script crossorigin="anonymous" src='https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js'></script>
<style>
#result{
width: 200px;
height:100px;
border:solid 1px #ddd;
}
</style>
</head>
<body>
<button>GET</button>
<button>POST</button>
<button>通用方式发送请求</button>
<hr>
<div id="result"></div>
<script>
$('button').eq(0).click(function(){
//http://127.0.0.1/jquery-server?a=100&b=200
$.get('http://127.0.0.1/jquery-server', {a:100, b:200}, function(data){
console.log(data);
});
});
//发送 POST 请求
$('button').eq(1).click(function(){
$.post('http://127.0.0.1/jquery-server', {c:300,d:400}, function(data){
// console.log(data);
$('#result').html(data);
});
});
//通用方法发送
$('button').eq(2).click(function(){
$.ajax({
//请求类型
type: 'get',
//url
url: 'http://192.2.10.56/jquery-server',
//数据 参数
data: {
e:500,
f:600
},
//成功的回调
success: function(data){
console.log(data);
},
error: function(){
alert('请求失败');
},
timeout: 1000
});
});
</script>
</body>
</html>
