Ajax引言
之前前端向后发送请求:
form表单 action
a标签 href
地址栏直接输入网址
script
link
以上几种方式,请求发送后,页面会刷新跳转,会出现一个新页面
新的请求方式ajax,
作用:ajax可以在不刷新页面的情况下,请求服务器,可以局部更新页面的数据;
本质: ajax 本质是是利用js中 XMLHttpRequest对象请求服务器;
Date 操作日期
document 操作dom
Math 操作数据函数
XMLHttpRequest对象 具备和服务器通信的能。
AJAX技术
即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用。
本质:是在HTTP协议的基础上,通过js的XMLHttpRequest对象与服务器进行通信。
作用:可以在页面不刷新的情况下,请求服务器,局部更新页面的数据;
异步 与 同步(了解)
指某段程序执行时不会阻塞其它程序执行,其表现形式为程序的执行顺序不依赖程序本身的书写顺序,相反则为同步。
同步:同一时刻只能做一件事,上一步完成才能开始下一步
异步:同时做多件事,效率更高,做一件事情时,不影响另一件事情的进行。
XMLHttpRequest可以以异步方式的处理程序。
XMLHttpRequest
浏览器内建对象,用于在后台与服务器通信(交换数据) , 由此我们便可实现对网页的部分更新,而不是刷新整个页面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
text-align: center;
}
.info {
width: 500px;
height: 200px;
border: 1px solid red;
margin: 50px auto;
}
</style>
</head>
<body>
<h1>ajax</h1>
<p>可以在页面不刷新的情况下,请求服务器,局部更新页面的数据;</p>
<input type="text"> <button>发送请求</button>
<div class="info"></div>
<script>
//本质: 是在HTTP协议的基础上通过js的XMLHttpRequest对象与服务器进行通信。
document.querySelector('button').onclick = function () {
// 1-创建一个XMLhttpRequest实例
// var date = new Date();
var xhr = new XMLHttpRequest();
// 2-把请求报文设置好
// 2-1请求行
xhr.open('get', './01-ajax.php');
// 2-2请求头
xhr.setRequestHeader('content-type', 'text/html');
// 2-3请求主体
//get请求报文没有请求主体 ,发送null
xhr.send(null);
// 3-接受服务器响应内容
// 服务器何时响应,是不确定,会受到各种外界因素影响, 所有以一直等待服务器响应,用事件监听
// 监听XMLHttpRequest的状态 变化
// readyState == 4 表示服务器响应完成
xhr.onreadystatechange = function () {
// 如果服务器响应完成 并且 成功处理请求,则获取数据
if (xhr.readyState === 4 && xhr.status === 200) {
//获取服务器响应的结果(获取响应主体中的数据)
var r = xhr.responseText;
console.log(r);
document.querySelector('.info').innerHTML = r;
}
}
}
</script>
</body>
</html>
发送get请求
XMLHttpRequest以异步的方式发送HTTP请求,因此在发送请求时,一样需要遵循HTTP协议。
- get请求,设置请求行时,需要把参数列表拼接到url后面
- get请求不用设置请求头
- get请求的请求体为null
// 使用XMLHttpRequest发送get请求的步骤
// 1. 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 2. 设置请求行
//第一个参数: 请求方式 get/post
//第二个参数: 请求的地址 需要在url后面拼上参数列表
xhr.open("get", "08.php?name=hucc");
// 3. 设置请求头
// 浏览器会给我们默认添加基本的请求头,get请求时无需设置
xhr.setReqeustHeader('content-type','text/html');
// 4. 设置请求体
// get请求的请求体为空,因为参数列表拼接到url后面了
xhr.send(null);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
text-align: center;
}
.info {
width: 500px;
height: 200px;
border: 1px solid red;
margin: 50px auto;
}
</style>
</head>
<body>
<h1>ajax - get</h1>
<p>可以在页面不刷新的情况下,请求服务器,局部更新页面的数据;</p>
<input type="text"> <button>发送请求</button>
<div class="info"></div>
<script>
//点击按钮,获取输入框的值,通过ajax发送给后台
document.querySelector('button').onclick = function() {
var txt = document.querySelector('input').value;
//利用ajax发送数据给后台
//1-创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//2-设置请求报文
//2-1请求行
xhr.open('get', './02-ajax-get.php?name=' + txt);
//2-2请求头
xhr.setRequestHeader('content-type', 'text/html');
//2-3请求主体
xhr.send(null);
//3-监听服务器响应
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var r = xhr.responseText;
//显示
document.querySelector('.info').innerHTML = r;
}
}
}
</script>
</body>
</html>
发送post请求
var xhr = new XMLHttpRequest;
//1. 设置请求行 post请求的参数列表在请求体中
xhr.open("post", "09.php");
//2. 设置请求头, post请求必须设置content-type,不然后端无法获取到数据
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
//3. 设置请求体
xhr.send("name=hucc&age=18");
post必须设置请求头中的content-type为application/x-www-form-urlencoded
post请求需要将参数列表设置到请求体中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
text-align: center;
}
.info {
width: 500px;
height: 200px;
border: 1px solid red;
margin: 50px auto;
}
</style>
</head>
<body>
<h1>ajax - post</h1>
<p>可以在页面不刷新的情况下,请求服务器,局部更新页面的数据;</p>
<input type="text"> <button>发送请求</button>
<div class="info"></div>
<script>
//点击按钮,获取输入框的值,通过ajax发送给后台
document.querySelector('button').onclick = function() {
var txt = document.querySelector('input').value;
//利用ajax向数据发送给后台
//1-创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//2-设置请求报文
//2-1请求行
xhr.open('post', './03-ajax-post.php');
//2-2请求头
//必须设置content-type属性
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
//2-3请求主体
xhr.send('name=' + txt + '&sex=m');
//3-监听服务器响应
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var r = xhr.responseText;
document.querySelector('.info').innerHTML = r;
}
}
}
</script>
</body>
</html>