AJAX的基础使用与封装
2017-02-25 本文已影响97人
oldSix_Zhu
学习笔记,请多指教
<a href="http://www.w3cschool.cn/ajax/ajax-tutorial.html">学习网址推荐</a>
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)
AJAX 可以使网页实现异步更新,创建快速动态网页(即下拉页面到底后立即刷新加载更多内容)
其实就类似于安卓的多进程和iOS的多线程啦
首先要练习AJAX的话,需要自己搭建一个服务器(具体如何搭建我这里就不花大量时间与篇幅写了,因为意义不大,纯粹练习而已,工作中会有专门的后台),并写一点服务器代码,我这里用的是一点php;
在你搭建好服务器之后,设置网站根目录,在目录中创建.php与.html文件即可;
如果是.html文件,服务器会直接渲染在浏览器,如果是.php文件,服务器会先执行完代码,将结果返回给浏览器
下面的demo是点击按钮从服务器请求不同图片与文字展示在两个div上
(images里有三张图片)
demo结构.png
可以看出AJAX主要分五步
.html文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX基本使用</title>
</head>
<body>
<div class='pictureDiv'></div>
<div class='infoDiv'></div>
<input type="button" value='first' onclick='change(this.value)'>
<input type="button" value='second' onclick='change(this.value)'>
<input type="button" value='third' onclick='change(this.value)'>
</body>
<script type="text/javascript">
//按钮添加的点击事件
function change(name){
// 1.建立XMLHTTPRequest对象(核心js对象)
var ajax = new XMLHttpRequest();
// 2.规定请求的类型(get或者post),
// URL(本地即.php文件名,可以在?后加用=连接的参数key),
// 是否异步处理请求(true异步或 false同步,一般不填)
ajax.open('get','change.php?name='+name);
// *使用post*
// ajax.open('post','change.php');
// *使用post必须要设置请求报文,get不用*
// ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 3.发送请求(get请求没有参数)
ajax.send();
// *使用post发送请求可带参数key*
// ajax.send('name='+name);
// 4.每当 ajax对象的readyState 属性改变时,就会调用该函数,我们可以根据服务器响应状态来做事情
ajax.onreadystatechange = function () {
// 判断(状态为4时请求已完成,响应已就绪,200为连接成功)
if (ajax.readyState==4 && ajax.status==200)
{
// 5.响应成功,使用返回的数据 修改页面的内容
// responseText 返回的就是一个 字符串
// 我们 在ajax 中 如果 是通过 ajax.responseText 获取到的 统统都是字符串
console.log(ajax.responseText);
// 分割字符串,返回一个数组(这种加载.php中数据方式并不是在真正开发中使用的,后面会介绍加载XML与JSON方式)
var infoArr = ajax.responseText.split("|");
// 修改图片
document.querySelector('.pictureDiv').style.background ="url("+infoArr[0]+")";
// 修改文本
document.querySelector('.infoDiv').innerText =infoArr[1];
}
}
}
</script>
</html>
.php文件:
<?php
// 准备数据
$infoArray = array(
'first' =>'images/first.jpg|第一张图片' ,
'second' =>'images/second.jpg|第二张图片' ,
'third' =>'images/third.jpg|第三张图片'
);
// 通过$_GET[]获取 浏览器发送过来的key
// $_GET[]是php中的一个全局对象,用于收集来自 method="get"的表单中的值
$key = $_GET['name'];
//$key = $_POST['name'];
// 响应的数据
echo $infoArray[$key];
?>
下面的demo是点击按钮,从服务器的xml中读取图片名字,图片,文字展示成table
(images里有三张图片)
demo结构
.html文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX使用之POST请求XML格式数据</title>
</head>
<body>
<input type="button" value="获取?" id='getPicture'>
</body>
</html>
<script type="text/javascript">
// 绑定点击事件
document.querySelector('#getPicture').onclick = function () {
var ajax = new XMLHttpRequest();
// post
ajax.open('post','change.php');
// 设置请求的报文 固定的
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 发送
ajax.send();
// 注册事件
ajax.onreadystatechange = function () {
if (ajax.readyState==4 && ajax.status==200)
{
// 知道返回的是 xml
console.log(ajax.responseXML);
// document对象,选择所有的picture标签
var pictures = ajax.responseXML.querySelectorAll('picture');
// 在循环之前把table拼出来
var str ='';
// <table>
str+='<table>';
// 循环 获取其中的某一个
for (var i = 0; i < pictures.length; i++) {
// 获取当前循环的那个picture标签对象
var currentPicture = pictures[i];
// 获取每一个值
console.log(currentPicture.querySelector('name').innerHTML);
console.log(currentPicture.querySelector('path').innerHTML);
console.log(currentPicture.querySelector('info').innerHTML);
// 方法1 创建一个 table
/* js创建dom元素 再添加 比较繁琐
document.createElement('table').appendChild();
document.createElement('tr');
document.createElement('td');
*/
// 方法2 直接拼接出一个table的字符串,然后设置到页面上即可
// 拼接开头
str+='<tr>';
// 拼接各表格
str+='<td>'+currentPicture.querySelector('name').innerHTML+'</td>';
// 添加图片
str+='<td>.innerHTML+')</td>';
str+='<td>'+currentPicture.querySelector('info').innerHTML+'</td>';
// 再次添加一个td
str+='<td><a href="#">点击了解更多_'+currentPicture.querySelector('name').innerHTML+'</a></td>';
// 拼接结尾
str+='</tr>';
}
// 循环完毕以后 将table合并
str+='</table>';
console.log(str);
// 直接 添加到页面上
document.body.innerHTML = str;
}
}
}
</script>
.php文件:
<?php
// 设置返回的是 xml
header('content-type:text/xml; charset= utf-8');
// 读取文件并返回
echo file_get_contents('info/change.xml');
?>
.xml文件:
XML指可扩展标记语言EXtensible Markup Language
<?xml version="1.0" encoding="UTF-8"?>
<testXML>
<picture>
<name>第一张图片</name>
<path>images/first.jpg</path>
<info>哈哈哈</info>
</picture>
<picture>
<name>第二张图片</name>
<path>images/second.jpg</path>
<info>嘿嘿嘿</info>
</picture>
<picture>
<name>第三张图片</name>
<path>images/third.jpg</path>
<info>啦啦啦</info>
</picture>
</testXML>
下面的demo是点击按钮,从服务器的json中读取图片名字,图片,文字展示成table
(images里有三张图片)
demo结构
.html文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX使用之POST请求JSON格式数据</title>
</head>
<body>
<input type="button" value="获取图片" id='getPicture'>
</body>
</html>
<script type="text/javascript">
document.querySelector("#getPicture").onclick = function () {
var ajax = new XMLHttpRequest();
ajax.open('post','change.php');
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
ajax.send();
ajax.onreadystatechange = function () {
if (ajax.readyState==4&&ajax.status==200)
{
// json是字符串 所以我们可以通过responseText获取
console.log(ajax.responseText);
// 转化为js对象 不管是[]数组还是{}对象都可以使用该方法转化
var pictureArr = JSON.parse(ajax.responseText);
//也放到一个table中展示
var str ='';
// table 开始
str +='<table>';
// 拼接tr td
for (var i = 0; i < pictureArr.length; i++)
{
// 获取 当前循环的那个 对象
var currentPicture = pictureArr[i];
// 拼接到 tr
str+='<tr>';
str+='<td>'+currentPicture.name+'</td>';
str+='<td>'+currentPicture.info+'</td>';
str+='<td></td>';
str+='</tr>';
}
// table 结束
str +='</table>';
// 页面上显示
document.body.innerHTML = str;
}
}
}
</script>
.php文件:
<?php
// 读取并返回
echo file_get_contents('info/change.json');
?>
.json文件:
JSON(JavaScript Object Notation),是ECMAScript的子集,作用是进行数据的交换,而且由于语法更为简洁,网络传输,以及机器解析都更为迅速.
[
{
"name":"第一张图片",
"info":"哈哈哈",
"path":"images/first.jpg"
},
{
"name":"第二张图片",
"info":"啦啦啦",
"path":"images/second.jpg"
},
{
"name":"第三张图片",
"info":"嘿嘿嘿",
"path":"images/third.jpg"
}
]
封装在ajax.js中的AJAX请求工具
当然,封装请求工具的方式和思路有很多,这里只是基础地封装一下,最终应该根据具体项目情况操作
//1: ajax get
function ajax_get(url,data) {
var ajax = new XMLHttpRequest();
// 如果是get发送数据,这里需要拼接 url
if (data)
{
// 如果有值需要拼接字符串 格式为xxx.php?name=first&path=xxx/xxx
url+='?';
url+=data;
}
else
{
}
ajax.open('get',url);
ajax.send();
ajax.onreadystatechange = function () {
if (ajax.readyState==4&& ajax.status==200)
{
console.log(ajax.responseText);
}
}
}
//2: ajax post
function ajax_post(url,data) {
var ajax = new XMLHttpRequest();
ajax.open('post',url);
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
if (data)
{
// 如果有值 post是在send中发送给服务器
ajax.send(data);
}
else
{
ajax.send();
}
ajax.onreadystatechange = function () {
if (ajax.readyState==4&&ajax.status==200)
{
console.log(ajax.responseText);
}
}
}
//3: 将 get 跟post 封装到一起
/*
参数1:url
参数2:数据
参数3:请求的方法
参数4:数据成功获取以后 调用的方法
*/
function ajax_tool(url,data,method,success) {
// 异步对象
var ajax = new XMLHttpRequest();
// get 跟post 需要分别写不同的代码
if (method=='get')
{
// get请求
if (data)
{
// 如果有值
url+='?';
url+=data;
}
else
{
}
// 设置 方法 以及 url
ajax.open(method,url);
// send即可
ajax.send();
}
else
{
// post请求
// post请求 url 是不需要改变
ajax.open(method,url);
// 需要设置请求报文
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 判断data send发送数据
if (data)
{
// 如果有值 从send发送
ajax.send(data);
}
else
{
// 没有值 直接发送即可
ajax.send();
}
}
// 注册事件
ajax.onreadystatechange = function () {
// 在事件中 获取数据 并修改界面显示
if (ajax.readyState==4&&ajax.status==200) {
// console.log(ajax.responseText);
// 外面可以传入一个 function 作为参数 success
success(ajax.responseText);
}
}
}
//4: 将工具函数进行改造 只接收一个参数对象
/*
url:请求的url
data:发送的数据
method:请求的方法
success:请求成功以后 调用的函数
*/
function ajax_tool_pro(option) {
var ajax = new XMLHttpRequest();
if (option.method=='get')
{
// get请求
if (option.data)
{
// 如果有值
option.url+='?';
option.url+=option.data;
}
else
{
}
// 设置请求方法以及option.url
ajax.open(option.method,option.url);
ajax.send();
}
else
{
// post请求 option.url 是不需要改变
ajax.open(option.method,option.url);
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 判断option.data send发送数据
if (option.data)
{
// 如果有值 从send发送
ajax.send(option.data);
}
else
{
// 没有值 直接发送即可
ajax.send();
}
}
// 注册事件
ajax.onreadystatechange = function () {
// 在事件中 获取数据 并修改界面显示
if (ajax.readyState==4&&ajax.status==200) {
// console.log(ajax.responseText);
// 外面可以传入一个函数作为参数success
option.success(ajax.responseText);
}
}
}
两种工具的调用方式:
<script type="text/javascript" src='xxx/ajax.js'></script>
<script type="text/javascript">
document.querySelector("#ajaxTool").onclick = function () {
// 1:工具函数(接收4个参数的)
ajax_tool(url,data,method,success)
ajax_tool('xxx.php',undefined,'get',function(data){
console.log(data);
})
// 2:工具函数(接收1个对象参数的)
// 好处:参数的顺序可以任意的改变
ajax_tool_pro({
method:"get",
success:function(data){
console.log(data);
},
data:undefined,
url:"xxx.php"
})
}
</script>
