文章目录
AJAX介绍
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。
使用AJAX的五个步骤
- 创建一个异步对象
var xmlhttp = new XMLHttpRequest();
- 设置请求方式和请求地址
open()
规定请求的类型、URL 以及是否异步处理请求,参数详细解释
method
:请求的类型;GET 或 POSTurl
:文件在服务器上的位置async
:true
(异步)或false
(同步)
- 发送请求
xmlhttp.send();
- 监听状态的变化
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
console.log('已接收到服务器返回的数据');
} else {
console.log('没有接收到服务器返回的数据');
}
}
- 处理返回的结果
获取服务器响应数据
如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的responseText
或responseXML
属性。
- 如果来自服务器的响应并非 XML,请使用
responseText
属性。
responseText
属性返回字符串形式的响应 - 如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,请使用
responseXML
属性
IE浏览器中的AJAX
IE5、IE6浏览器中关于ajax的使用主要有两个问题:创建异步对象和GET缓存问题
IE创建异步对象
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
IE浏览器GET缓存问题
IE浏览器在第一次获取某个URL的值后,如果该URL的名字不改变,则无论内容如何修改,IE都是获取的第一次获取到的值。
为了避免这种情况,请向 URL 添加一个唯一的 ID:
xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true); xmlhttp.send();
AJAX代码封装
我们可以将上面的五个步骤封装为一个函数,方便日后使用
需求:
- 解决IE5、IE6创建异步对象兼容性问题
- 解决IE5、IE6的GET缓存问题
- 解决GET传值问题
- 新增响应超时判断功能
- 若请求地址URL出现中文时需自动转换
<script>
//创建一个对象转字符串函数,方便GET传值
function objToStr(obj) {
//将随机数放到对象的末尾一起转换,防止IE的GET缓存
obj.t = Math.random();
var res = [];
for (var key in obj) {
//避免URL出现中文,此处进行转码
res.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]));
}
return res.join('&');
}
/*
*该函数需要传递五个参数
*@param1 url:请求地址
*@param2 obj:GET传的data内容,以对象类型传递
*@param3 timeout:请求最大等待时间
*@param4 success:请求成功后执行的函数
*@param5 error:请求失败后执行的函数
*/
function ajax(url, obj, timeout, success, error) {
var str = objToStr(obj);
var xmlhttp, timer;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open('GET', url + '?' + str, true);
xmlhttp.send();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
success(xmlhttp);
} else {
error(xmlhttp);
}
}
//如果用户传入了timeout参数,则开始计时
if (timeout) {
timer = setInterval(function () {
console.log('请求中断');
xmlhttp.abort(); //中断请求
clearInterval(timer);
}, timeout)
}
}
//当触发btn的点击事件后,执行我们封装的ajax函数
var btn = document.querySelector('button');
btn.onclick = function () {
ajax('data.php', {
'username': 'wsc',
'age': '18'
}, 3000, function (xmlhttp) {
console.log(xmlhttp.responseText);
}, function (xmlhttp) {
console.log('error');
})
}
</script>
探讨: 如何在改变传入参数顺序的情况下也不影响该函数使用?
答:使用对象来传参即可,我们本来需要传递五个参数,如果更改了参数顺序会导致传参混乱,如果我们将这五个参数以一个对象的形式传递进去,函数内部调用参数的时候使用对象.属性名
就可以调用该参数
AJAX的POST请求方式
如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader()
来添加 HTTP 头。然后在 send()
方法中规定您希望发送的数据:
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
注意:send()传输数据的时候,key和value与等号之间不能有空格
JQuery中的AJAX
<script>
$(function () {
$('button').click(function () {
$.ajax({
type: 'GET',
url: 'data.php',
success: function (xhr) {
console.log(xhr);
//xhr是success方法的一个参数,就是原生的XMLHttpRequest对象
}
})
})
})
</script>
使用AJAX实现点击按钮切换商品内容
html部分
<body>
<div class="square_big">
<span class="title">商品标题名称</span>
<div class="square_small">
<img src="" alt="">
</div>
<span class="info">商品描述信息</span>
<ul>
<li>女装</li>
<li>男装</li>
<li>阴间</li>
</ul>
</div>
<script>
$(function () {
$('ul li').click(function () {
let product = $(this).text();
$.ajax({
url: 'data.php',
type: 'get',
data: 'product=' + product,
success: function (xhr) {
let res = xhr.split('|');
$('.title').text(res[0]);
$('.info').text(res[1]);
$('img').attr('src', res[2]);
}
})
})
})
</script>
</body>
php部分
<?php
$product = array('女装' => array(
'title' => '甜美女装', 'info' => '小可爱专用', 'image' => 'images/1.jpg'
), '男装' => array(
'title' => '海澜之家', 'info' => '男人的衣柜', 'image' => 'images/2.jpg'
), '阴间' => array(
'title' => '阴间返祖', 'info' => '忘了爱', 'image' => 'images/3.jpg'
));
echo $product[$_GET['product']]['title'] . '|' . $product[$_GET['product']]['info'] . '|' . $product[$_GET['product']]['image'];
XML介绍
我们从后台返回数据的时候,之前都是返回一串字符串,中间手动添加’|'隔开,然后再通过split分隔成一个数组;但如果字符串本身就带有竖线呢?这样切割的时候就乱套了。
其实后端一般不会之间返回给我们一个字符串,而是返回给我们一个XML文件或者JSON
XML文件格式
XML 被设计用来传输和存储数据。
HTML 被设计用来显示数据。
<?xml version='1.0' encoding='utf-8' ?> //第一行必须是这个
//必须有个根标签包围, 根标签随便起名,所有的数据都必须写到根标签中
<dog>
<username>王思聪</username> //每一条数据都要放到一对双标签中,取名随意
<age>18</age>
</dog>
以上就是我给XML添加了两条数据,一条数据是username,一条数据是age
获取XML数据的案例
我们假设就从上面这个XML文件中获取username和age两条数据
- ajax代码编写
<script>
$(function () {
$('button').click(function () {
$.ajax({
url: 'data.php',
type: 'get',
success: function (xhr) {
console.log(xhr.querySelector('name').innerHTML);
}
})
})
})
</script>
注意url依然是php文件
- php代码编写
<?php
//jquery的AJAX中的success:function (xhr)会自动判断返回的是xml文件还是普通数据,如果是xml文件则会接收到document格式,如果不标注则只会接受到字符串格式,所以我们要在响应头里配置
header('content-type:text/xml,charser:utf8');
echo file_get_contents('data.xml'); //输出XML文件
- 接受XML文件数据
因为PHP返回给我们的是一个XML文件,所以success: function (xhr)
会接收到一个document格式的参数,我们就可以对这个参数做相应的操作来获取数据
JSON
JSON和XML类似,都是传输数据的
- 要使用JSON,我们要创建一个json文件,并在里面输入内容
{
//注意:必须使用双引号
"username": "wsc", //两条数据之间逗号隔开
"age": 18
}
这样一个JSON文件就创建好了,里面存储了两条数据:username和age
- 在ajax中,url的值依然指向php,而php使用
echo file_get_contents('data.json');
输出一个json格式的数据,用ajax的xhr参数来接收 - 将接受到的json数据转换为一个js对象:
JSON.parse()
;
也可以用JSON.stringify()
方法将一个对象转换成一个json数据
补充方法:eval()
可以将非标准的json数据(没有引号)转换成对象 - 既然已经转换成了对象格式,那我们便可以尽情使用了
Cookie
cookie默认的生命周期是一次会话(浏览器关闭)
但我们可以通过设置cookie的expires属性来控制它的过期时间
let date = new Date(); //创建一个日期对象date
date.setDate(date.getDate()+1); //让date对象的时间向后加一天
document.cookie = 'age=18;expires=' + date.toUTCString() + ';';//设置cookie过期时间为date对象的时间
注意:
- cookie一次只能设置一条数据
- cookie保存数量限制在20~50条数据,不同的浏览器保存cookie数量不同
- cookie大小限制在4KB
- cookie作用范围:同一个浏览器下的同级路径与子级路径可以使用
如果想让上级路径也可以使用cookie,可以在添加cookie的时候增加一条属性:document.cookie:"name=wsc;path=/;";
- 如果同一个域名下的二级域名不同,两者之间也无法共享cookie,此时需要再添加一条domain属性,其值为一级域名:
document.cookie="name=wsc;path=/;domain=127.0.0.1;";
哈希Hash
为网页添加一个Hash:window.location.hash = 5;
此时网页后面会多了一个井号和数字5:http://localhost/#5
获取Hash:直接输出window.location.hash
即可
无论如何刷新页面,都不会消除Hash
可以被用来保存当前所选页码,在刷新后依然停留在该页码: