Ajax异步
|
目录
Ajax应用前言Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 介绍在学习Ajax之前，我们先来聊一下同步和异步的问题。 什么是同步？什么是异步呢？ 首先来说同步，同步相对来说更好理解一点。比如调用一个方法，这个方法没有调用完成之前，后续的代码将不能够执行。这就是同步。 而Ajax主要的工作就是通过异步来帮助我们传输数据。 基本使用下面我们通过完成一个基本的功能来看一下ajax的写法： <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn">点击</button>
</body>
</html>
<script>
window.onload = function (){
let oBtn = document.getElementById('btn');
oBtn.onclick = function() {
var xhr = new XMLHttpRequest();
// 输入地址
xhr.open('get','01.txt',true);
// 提交
xhr.send();
// 等待服务器返回内容
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
alert(xhr.responseText);
}
};
};
};
</script>
上面的代码中，我们通过ajax技术实现了点击按钮，弹出01.txt当中内容。
下面我们就来逐一的将上面的代码进行拆解讲解。 对象兼容我们如果想在网页当中使用
示例代码： var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
除了使用这个if和else判断以外，还可以使用try..catch的方法来实现兼容处理。 var xhr;
try{
xhr = new XMLHttpRequest();
}catch(e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
在上面代码中，如果宿主环境中不支持 表单当中的get方法和post方法下面我们会说到 例如： <form action="1.get.php" method="get" enctype="application/x-www-form-urlencoded">
<input type="text" name="username">
<input type="submit" value="提交">
</form>
在上面的表单当中，
get方法和post方法 下面就来说一下这些差异，这些差异性是w3c给出的说法：
示例： <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="1.get.php" method="get">
<input type="text" name="username">
<input type="submit" value="提交">
</form>
</body>
</html>
php代码如下: <?php
header("Content-type:text/html;Charset=utf-8");
// 获取用户名
$username = $_GET['username'];
echo $username;
?>
在上面的案例当中，表单通过get方式向php传递了数据，在页面的地址栏位置，我们可以发现通过url地址进行提交时， open()方法下面我们来说一下open()方法，通过这个方法，我们可以设置发送请求的方法，地址，以及是否异步。 xhr.open(method,url,async); 例如： xhr.open('get',true);
当传输数据的方法为get方法的时候我们在上面说到，传输数据的时候，如果是get方法，那么在url地址中可能存在参数，参数是以？和& 进行拼接。 例如： var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// 将参数通过?的形式进行拼接
xhr.open('get','08.php?name=zhangsan&age=14',true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
alert(xhr.responseText);
}
};
当传输数据的方法为post方法的时候当传输数据为post方法的时候，需要传递的参数应该通过send()方法进行传递。同时需要设置一下数据传输格式。 如下： xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
例如将上面的案例转换成post方法，代码如下： var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open('post','08.php',true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("name=zhangsan&age=14");
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
alert(xhr.responseText);
}
};
绑定onreadystatechange事件上面我们将数据发送到了服务器，服务器接收到后会进行一定的处理，而onreadystatechange事件监听的就是XMLHttpRequest对象的readyState的状态。 xhr.onreadystatechange = function(){};
readyState和statusreadyState里面存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
status里面存储的是http状态码，根据不同的情况，服务器会返回不同的状态码。200表示成功。 一般情况下，我们都是等readyState的值变为4，status的值为200的时候才去处理返回的数据。 xhr.onreadystatechange = function () {
if(xhr.readyState === 4 && xhr.status === 200){
// code ...
}
}
获取服务器响应当我们通过XMLHttpRequest对象向服务器发起请求之后，服务器会给予我们一定的响应，那么我们该如何获取响应呢？ 可以通过XMLHttpRequest 对象的 responseText(获得字符串形式的响应数据。) 或 responseXML(获得 XML 形式的响应数据) 属性。 例如： xhr.onreadystatechange = function () {
if(xhr.readyState === 4 && xhr.status === 200){
alert(xhr.responseText);
}
}
小练习：点击按钮读取数据html代码： <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新闻列表</title>
</head>
<body>
<button id="btn">点击</button>
<ul id="list">
</ul>
</body>
<script>
window.onload = function(){
// 获取list
var oList = document.getElementById('list');
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open('get','06.get.php',true);
xhr.send();
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200){
// 拿到数据进行处理
console.log(xhr.responseText);
var news = JSON.parse(xhr.responseText);
console.log(news);// 数组
var html = '';
for(let i=0;i<news.length;i++){
// 将数据插入到li 并且存储到html
html += `<li><a href="">${news[i].title}</a> [<span>${news[i].date}</span>]</li>`;
}
oList.innerHTML = html;
}
};
};
};
</script>
</html>
php代码： <?php
header("Content-type:text/html;Charset=utf-8");
$arr_news = [
['title'=>'美国从不愿提及的真相：中朝战俘境遇','date'=>'2019-05-27'],['title'=>'县级领导网上筹款20万治病 家人及官方回应','date'=>'2019-05-26'],['title'=>'杜特尔特“拷问”女副总统为啥不笑 13分钟后见效','date'=>'2019-05-25'],['title'=>'翟天临又上热搜了 是被半夜改论文毕业生骂上去的','date'=>'2019-05-24'],['title'=>'美国百岁老人被房东驱逐 惊动了“硬汉”施瓦辛格','date'=>'2019-05-23'],['title'=>'实习女律师当街遇害 知情者：行凶男子想杀漂亮女孩','date'=>'2019-05-22'],['title'=>'国内成品油价格迎来年内第八涨 加满一箱油多花2元','date'=>'2019-05-21'],['title'=>'中安民生“以房养老”骗局：老人被逼卖房还高利贷','date'=>'2019-05-20'],['title'=>'任正非：华为必须做世界第一 若第二可能活不下来','date'=>'2019-05-19'],['title'=>'91岁李兆基退休：香港富豪“四大天王”时代落幕','date'=>'2019-05-18']
];
echo json_encode($arr_news);
上面的代码中，我们点击按钮就可以在页面中显示php给我们返回的数据。 ajax函数封装为了便于操作，我们也可以将ajax常用的操作进行封装。 function ajax(method,data,success) {
var xhr = null;
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
if (method == 'get' && data) {
url += '?' + data;
}
xhr.open(method,true);
if (method == 'get') {
xhr.send();
} else {
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.send(data);
}
xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
success && success(xhr.responseText);
} else {
alert('出错了,Err：' + xhr.status);
}
}
}
}
有了这个函数，上面的小练习就可以写成下面的样式： ajax('get','',function(data) {
var data = JSON.parse( data );
var oUl = document.getElementById('ul1');
var html = '';
for (var i=0; i<data.length; i++) {
html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';
}
oUl.innerHTML = html;
});
我们也可以通过轮询的形式让前端新闻自动请求后端的数据： setInterval(function() {
ajax('get','getNews.php',function(data) {
var data = JSON.parse( data );
var oUl = document.getElementById('ul1');
var html = '';
for (var i=0; i<data.length; i++) {
html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';
}
oUl.innerHTML = html;
});
},3000);
小练习下面通过ajax + 多列布局来实现瀑布流效果： html代码如下： <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
background:#352323 url(images/a.png);
}
img{
display:block;
}
section{
max-width:95%;
margin:0 auto;
overflow:hidden;
column-count: 5;
column-gap:0;
column-fill: auto;
}
figure{
border:2px solid pink;
margin:0 5px 10px;
break-inside: avoid;
padding:5px;
}
figure img{
width:100%;
}
figcaption{
padding:10px 0;
text-align:center;
font-weight:900;
color:#a77869;
}
</style>
</head>
<body>
<section>
<!-- <figure>
<img src="images/1.jpg" alt="">
<figcaption>往后余生，风雪是你</figcaption>
</figure> -->
</section>
</body>
<script src="ajax.js"></script>
<script>
let section = document.getElementsByTagName('section')[0];
ajax('get','img.php','num=100',function(data){
let img_data = JSON.parse(data);
console.log(img_data)
for(let i=0;i<img_data.length;i++){
// 创建figure标签
let figure = document.createElement('figure');
// 创建里面的两个子元素
let img = document.createElement('img');
img.src = img_data[i];
let figcaption = document.createElement('figcaption');
figcaption.innerHTML = "往后余生，风雪是你";
figure.appendChild(img);
figure.appendChild(figcaption);
section.appendChild(figure)
}
})
</script>
</html>
php代码如下： <?php
header("Content-type:text/html;Charset=utf-8");
$num = $_GET['num'];// 通过get方式传递数据
$img = file("img.txt"); // 读取文件地址
$arr_url = array();
for($i=0;$i<$num;$i++){
$url = array_rand($img);
array_push($arr_url,$img[$url]);
}
// 返回json数据
$a = json_encode($arr_url,JSON_UNESCAPED_SLASHES|JSON_UNESCAPED_UNICODE);
echo $a;
在上面的代码中，我们只需要每次在请求的时候设置好num参数即可以得到图片。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |